@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:ital,wght@0,1..1000;1,1..1000&display=swap");

a {
  transition: 0.4s;
}

a:hover {
  opacity: 0.9;
  transition: 0.4s;
}

.body-hr {
  overflow-x: hidden;
}

.sp-only {
  display: none !important;
}

.sp-only-small {
  display: none !important;
}

@media screen and (max-width: 820px) {
  /** SPのみ */
  .sp-only {
    display: block !important;
  }
}

.pc-only {
  display: block !important;
}

@media screen and (max-width: 820px) {
  /** SPのみ */
  .pc-only {
    display: none !important;
  }
}

@media screen and (max-width: 425px) {
  /** SPのみ */
  .sp-only-small {
    display: none !important;
  }
}

.hr-title {
  width: 100%;
  text-align: center;
  position: relative;
}

.hr-title-en {
  font-size: 30px;
  line-height: 20px;
  font-weight: 400;
  color: #ff815a;
  font-family: "Sofia Sans Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 1.5px;
  display: flex;
  justify-content: center;
}

.hr-title-en span {
  font-size: 24px;
}

.hr-title-en img {
  max-height: 23px;
}

@media screen and (max-width: 820px) {
  .hr-title-en {
    font-size: 4.8vw;
  }
  .hr-title-en span {
    font-size: 4.2vw;
  }
  .hr-title-en img {
    max-height: 5vw;
  }
}

@media screen and (max-width: 430px) {
  .hr-title-en img {
    max-height: 4.5vw;
  }
}

.hr-title-jp {
  font-size: 38px;
  line-height: 46px;
  font-weight: 900;
  margin: 8px 0 0;
}

@media screen and (max-width: 820px) {
  .hr-title-jp {
    font-size: 5.6vw;
    line-height: 8vw;
    margin: 2px 0 0;
  }
}

.hr-title-jp span {
  color: #ff815a;
}

.hr-title-sub {
  font-size: 16px;
  margin: 0;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {
  /** PC(1440px以下)のみ */
  .hr-title-sub {
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 820px) {
  /** SPのみ */
  .hr-title-sub {
    font-size: 4.27vw;
    line-height: 6vw;
  }
}

@media screen and (max-width: 425px) {
  /** SPのみ */
  .hr-title-sub {
    font-size: 16px;
    line-height: 6vw;
  }
}

@media screen and (max-width: 330px) {
  /** SPのみ */
  .hr-title-sub {
    font-size: 14px;
  }
}

.hr-main-fv {
  width: 100%;
  position: relative;
}

@media screen and (max-width: 820px) {
  .hr-main-fv {
    padding: 100px 0 0 0;
    box-sizing: border-box;
  }
}

.hr-main-fv-contents {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transform: translateX(52px);
}

@media screen and (max-width: 820px) {
  .hr-main-fv-contents {
    flex-wrap: wrap;
    transform: translateX(0);
  }
}

.hr-main-fv-text img {
  width: 100%;
  max-width: 615px;
}

@media screen and (max-width: 820px) {
  .hr-main-fv-text {
    width: 100%;
    padding: 0 4%;
    position: relative;
    z-index: 2;
  }
}

.hr-main-fv-text-title {
  font-size: 50px;
  font-weight: bold;
  color: #313435;
  margin: 0 0 25px 0;
}

@media screen and (max-width: 1312px) {
  .hr-main-fv-text-title {
    font-size: 42px;
  }
}

@media screen and (max-width: 1232px) {
  .hr-main-fv-text-title {
    font-size: 36px;
  }
}

@media screen and (max-width: 1164px) {
  .hr-main-fv-text-title {
    font-size: 32px;
  }
}

@media screen and (max-width: 820px) {
  .hr-main-fv-text-title {
    font-size: 6.8vw;
    margin: 0 0 16px 0;
  }
}

.hr-main-fv-text-title p .text01 {
  margin-left: -24px;
}

.hr-main-fv-text-title p .text02 {
  letter-spacing: -24px;
}

@media screen and (max-width: 820px) {
  .hr-main-fv-text-title p .text01 {
    margin-left: -18px;
  }

  .hr-main-fv-text-title p .text02 {
    letter-spacing: -16px;
  }
}

@media screen and (max-width: 425px) {
  .hr-main-fv-text-title p .text01 {
    margin-left: -12px;
  }

  .hr-main-fv-text-title p .text02 {
    letter-spacing: -10px;
  }
}

.hr-main-fv-text-logo {
  max-width: 413px;
}

@media screen and (max-width: 820px) {
  .hr-main-fv-text-logo {
    max-width: 70vw;
  }
}

.hr-main-fv-text-title p {
  color: #ff815a;
  display: inline-block;
  margin: 0;
}

.hr-main-fv-text-title span {
  letter-spacing: 0;
}

.hr-main-fv-img {
  transform: translateX(-52px);
}

@media screen and (max-width: 820px) {
  .hr-main-fv-img {
    width: 100%;
    transform: translateX(0);
  }
}

.hr-main-fv-img img {
  width: 100%;
  max-width: 652px;
}

@media screen and (max-width: 820px) {
  .hr-main-fv-img img {
    margin-top: -14vw;
    max-width: 100%;
  }
}

.hr-main-fv-btn {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 385px;
  width: 100%;
  height: 69px;
}

@media screen and (max-width: 820px) {
  .hr-main-fv-btn {
    padding: 0 20px;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 425px) {
  .hr-main-fv-btn {
    max-width: 240px;
    height: 46px;
    padding: 0;
    bottom: 46px;
  }
}

.hr-main-fv-btn a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  background: linear-gradient(90deg, #ff705e 6.5%, #ffc13b 97%);
  border-radius: 999px;
  box-shadow: 0px 10px 50px rgba(229, 142, 76, 0.5);
  transition: 0.4s;
}

@media screen and (max-width: 425px) {
  .hr-main-fv-btn a {
    font-size: 14px;
  }
}

.hr-main-fv-btn a:hover {
  box-shadow: 0px 10px 50px rgba(229, 142, 76, 0);
  transition: 0.4s;
}

.hr-main-fv-btn img {
  width: 100%;
  max-width: 473px;
}

.hr-about {
  padding: 100px 0;
  background: url(images/about-bg.jpg) top center no-repeat;
}

@media screen and (max-width: 820px) {
  .hr-about {
    padding: 100px 4% 10% 4%;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 425px) {
  .hr-about {
    padding: 26px 4% 10% 4%;
    box-sizing: border-box;
    background-size: 100% 190px;
  }
}

.hr-about-contents {
  max-width: 1216px;
  width: 100%;
  background: #fff;
  margin: 0 auto;
  border-radius: 20px;
  padding: 48px 0;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 820px) {
  .hr-about-contents {
    padding: 48px 0;
    box-sizing: border-box;
  }
}

.hr-about-title {
  display: flex;
  justify-content: center;
}

.hr-about-title img {
  width: 100%;
  max-width: 456px;
}

.hr-about-list {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 81px 0 0 0;
  padding: 0;
  list-style-type: none;
}

@media screen and (max-width: 820px) {
  .hr-about-list {
    flex-wrap: wrap;
    margin: 42px 0 0 0;
  }
}

@media screen and (max-width: 425px) {
  .hr-about-list {
    flex-wrap: wrap;
    margin: 26px 0 0 0;
  }
}

.hr-about-item {
  width: 100%;
  text-align: center;
}

@media screen and (max-width: 820px) {
  .hr-about-item {
    width: 100%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    padding: 0 4%;
  }

  .hr-about-item:last-child .hr-about-item-text p {
    padding-bottom: 0;
  }
}

.hr-about-item-img {
  width: 100%;
  text-align: center;
}

.hr-about-item-img img {
  max-width: 362px;
  width: 100%;
  display: inline-block;
  filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.1));
}

@media screen and (max-width: 820px) {
  .hr-about-item-img img {
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.2));
  }
}

.hr-about-item-text h3 {
  font-size: 32px;
  font-weight: bold;
  color: #313435;
  margin: 0;
  padding-top: 37px;
}

@media screen and (max-width: 820px) {
  .hr-about-item-text h3 {
    font-size: 4.27vw;
    line-height: 6vw;
    padding-top: 0;
    padding-bottom: 6px;
  }
}

.hr-about-item-text h3 span {
  color: #ff705e;
}

.hr-about-item-text p {
  padding-top: 16px;
  font-size: 16px;
  margin: 0;
  font-weight: 400;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {
  /** PC(1440px以下)のみ */
  .hr-about-item-text p {
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 820px) {
  /** SPのみ */
  .hr-about-item-text p {
    font-size: 4.27vw;
    line-height: 6vw;
    padding-top: 4px;
    padding-bottom: 62px;
  }
}

@media screen and (max-width: 425px) {
  /** SPのみ */
  .hr-about-item-text p {
    padding-bottom: 32px;
    font-size: 16px;
  }
}

@media screen and (max-width: 820px) {
  .hr-about-item-text h3 {
    font-size: 4.27vw;
    line-height: 6vw;
    padding-top: 0;
    padding-bottom: 6px;
  }
}

.hr-cycle-contents {
  max-width: 1216px;
  width: 100%;
  background: #313435;
  margin: 0 auto;
  border-radius: 20px;
  padding: 48px 0;
  margin-bottom: 80px;
  position: relative;
}

@media screen and (max-width: 820px) {
  .hr-cycle-contents {
    padding: 48px 10px;
    box-sizing: border-box;
    width: 92%;
    margin: 0 4% 18vw 4%;
  }
}

@media screen and (max-width: 425px) {
  .hr-cycle-contents {
    padding: 24px 10px;
    margin: 0 4% 52px 4%;
  }
}

.hr-cycle-result-label {
  width: 100%;
  display: flex;
  justify-content: center;
}

.hr-cycle-result-label span {
  padding: 24px;
  background: #fff;
  color: #313435;
  font-size: 32px;
  font-weight: bold;
  border-radius: 10px;
  position: relative;
}

@media screen and (max-width: 820px) {
  .hr-cycle-result-label span {
    font-size: 3.87vw;
    padding: 16px;
  }
}

@media screen and (max-width: 425px) {
  .hr-cycle-result-label span {
    font-size: 16px;
    padding: 10px 16px;
  }
}

.hr-cycle-result-label span::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 0;
  height: 0;
  border-right: 18px solid transparent;
  border-top: 18px solid #fff;
  border-left: 18px solid transparent;
}

.hr-cycle-result-img {
  padding-top: 44px;
  width: 100%;
  text-align: center;
}

.hr-cycle-result-img img {
  width: 100%;
  max-width: 810px;
  display: inline-block;
}

.hr-cycle-title {
  display: flex;
  justify-content: center;
}

.hr-cycle-title img {
  width: 100%;
  max-width: 614px;
}

.hr-cycle-img {
  width: 100%;
  display: flex;
  justify-content: center;
}

.hr-cycle-img img {
  width: 100%;
  max-width: 1026px;
}

@media screen and (max-width: 820px) {
  .hr-cycle-result {
    padding: 0 10px;
    box-sizing: border-box;
  }
}

.hr-cycle-result-list {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
  padding-top: 27px;
  padding-left: 0;
}

@media screen and (max-width: 410px) {
  .hr-cycle-result-list {
    gap: 4%;
  }
}

.hr-cycle-result-item {
  font-size: 20px;
  color: #ff705e;
  list-style-type: none;
  display: flex;
  align-items: center;
  font-weight: bold;
  padding-right: 59px;
}

@media screen and (max-width: 820px) {
  .hr-cycle-result-item {
    font-size: 4vw;
    padding-right: 3vw;
  }
}

@media screen and (max-width: 414px) {
  .hr-cycle-result-item {
    font-size: 3vw;
    padding-right: 2vw;
  }
}

.hr-cycle-result-item:nth-child(2) {
  padding-right: 70px;
}

@media screen and (max-width: 820px) {
  .hr-cycle-result-item:nth-child(2) {
    padding-right: 2vw;
  }
}

.hr-cycle-result-item:nth-child(3) {
  padding-right: 0;
}

.hr-cycle-result-item img {
  width: 20px;
  margin-right: 6px;
}

.hr-cycle-img02 {
  width: 100%;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 820px) {
  .hr-cycle-img02 {
    padding: 64px 20px 0 20px;
    box-sizing: border-box;
  }
}

.hr-cycle-img02 img {
  width: 100%;
  max-width: 810px;
}

.hr-about-img {
  width: 100%;
  display: flex;
  justify-content: center;
}

.hr-about-img02 {
  width: 100%;
  display: flex;
  justify-content: center;
}

.down-arrow-position {
  position: absolute;
  bottom: -63px;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 820px) {
  .down-arrow-position {
    bottom: -11.5vw;
  }
}

@media screen and (max-width: 425px) {
  .down-arrow-position {
    bottom: -30px;
  }
}

.down-arrow-position img {
  max-width: 53px;
}

@media screen and (max-width: 820px) {
  .down-arrow-position img {
    max-width: 10vw;
  }
}

@media screen and (max-width: 425px) {
  .down-arrow-position img {
    max-width: 24px;
  }
}

.down-arrow-cycle {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 48px 0 38px 0;
}

@media screen and (max-width: 820px) {
  .down-arrow-cycle {
    padding: 6% 0 0;
  }
}

.down-arrow-cycle img {
  max-width: 53px;
}

@media screen and (max-width: 820px) {
  .down-arrow-cycle img {
    max-width: 10vw;
  }
}

@media screen and (max-width: 425px) {
  .down-arrow-cycle img {
    max-width: 24px;
  }
}

@media screen and (max-width: 820px) {
  .hr-solution {
    flex-wrap: wrap;
    padding: 0 4%;
    box-sizing: border-box;
  }
}

.hr-cycle-title {
  width: 100%;
  text-align: center;
  font-size: 38px;
  line-height: 65px;
  color: #fff;
  font-weight: bold;
}

@media screen and (max-width: 820px) {
  .hr-cycle-title {
    font-size: 5.87vw;
    line-height: 7.97vw;
  }
}

.hr-solution-title {
  width: 100%;
  max-width: 1156px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.hr-solution-title-img_left {
  max-width: 198px;
  transform: translateX(-5px);
  margin: 0;
  display: flex;
  align-items: flex-end;
}

.hr-solution-title-img_left img {
  width: 198px;
  height: 138px;
}

@media screen and (max-width: 820px) {
  .hr-solution-title-img_left {
    max-width: 25vw;
    transform: translateX(-6vw);
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .hr-solution-title-img_left img {
    width: 100%;
    height: auto;
  }
}

.hr-solution-title h3 {
  width: 100%;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
}

@media screen and (max-width: 820px) {
  .hr-solution-title h3 {
    font-size: 5vw;
  }
}

.hr-solution-title h3 span {
  font-size: 50px;
  font-weight: bold;
  position: relative;
}

@media screen and (max-width: 820px) {
  .hr-solution-title h3 span {
    font-size: 7vw;
    font-weight: bold;
    position: relative;
  }
}

.hr-solution-title h3 span::after {
  content: "";
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6px;
  background: #ff705e;
}

.hr-solution-title-img_right {
  max-width: 209px;
  transform: translateX(5px);
  margin: 0;
  display: flex;
  align-items: flex-end;
}

.hr-solution-title-img_right img {
  width: 209px;
  height: 139px;
}

@media screen and (max-width: 820px) {
  .hr-solution-title-img_right {
    max-width: 25vw;
    transform: translateX(6vw);
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .hr-solution-title-img_right img {
    width: 100%;
    height: auto;
  }
}

.hr-solution-contents {
  max-width: 1156px;
  width: 100%;
  background: #fff;
  margin: 0 auto;
  border-radius: 20px;
  padding: 48px 0 183px 0;
  position: relative;
  margin-bottom: 90px;
  box-shadow: 0px 0px 40px rgba(242, 125, 92, 0.1),
    0px 0px 10px rgba(242, 125, 92, 0.2);
}

@media screen and (max-width: 820px) {
  .hr-solution-contents {
    width: 100%;
    padding: 48px 20px 30vw 20px;
    box-sizing: border-box;
    margin-bottom: 16%;
  }
}

@media screen and (max-width: 426px) {
  .hr-solution-contents {
    width: 100%;
    padding: 20px 20px 64px 20px;
    box-sizing: border-box;
    margin-bottom: 65px;
  }
}

.hr-solution-list {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
  list-style-type: none;
}

@media screen and (max-width: 820px) {
  .hr-solution-list {
    flex-wrap: wrap;
  }
}

.hr-solution-item-img {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 46px;
}

@media screen and (max-width: 820px) {
  .hr-solution-item-img {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 23px;
  }
}

.hr-solution-item-img img {
  max-width: 254px;
}

.hr-solution-item-text {
  width: 100%;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

@media screen and (max-width: 820px) {
  .hr-solution-item-text {
    font-size: 4.27vw;
  }
}

.hr-solution-item-arrow {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 8px 0 24px 0;
}

.hr-solution-item-arrow img {
  height: 34px;
}

@media screen and (max-width: 820px) {
  .hr-solution-item-list {
    padding-left: 0;
  }
}

.hr-solution-item {
  width: 100%;
}

.hr-solution-item-check {
  width: 100%;
  font-size: 20px;
  color: #ff705e;
  list-style-type: none;
  display: flex;
  align-items: center;
  font-weight: bold;
  padding-bottom: 32px;
  letter-spacing: -0.5px;
}

@media screen and (max-width: 820px) {
  .hr-solution-item:nth-child(1) {
    padding-bottom: 12%;
  }
  .hr-solution-item-check {
    padding-left: 0;
    padding-bottom: 16px;
    font-size: 3.1vw;
  }
}

.hr-solution-item-check:last-child {
  padding-bottom: 0;
}

.hr-solution-item-check img {
  width: 30px;
  margin-right: 6px;
}

@media screen and (max-width: 820px) {
  .hr-solution-item-check img {
    width: 20px;
    margin-right: 6px;
  }
}

.hr-solution-position {
  position: absolute;
  bottom: -49px;
  left: 50%;
  transform: translateX(-50%);
}

.hr-solution-position img {
  width: 100%;
  max-width: 615px;
  bottom: -35px;
}

@media screen and (max-width: 820px) {
  .hr-solution-position {
    width: 100%;
  }

  .hr-solution-position img {
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
}

.hr-solution-detail-contents {
  display: flex;
  justify-content: space-between;
  padding-bottom: 151px;
  max-width: 1216px;
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 820px) {
  .hr-solution-detail-contents {
    flex-wrap: wrap;
    padding-bottom: 15vw;
  }
}

.hr-btn {
  width: 100%;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 820px) {
  .hr-btn {
    padding: 0 20px;
    box-sizing: border-box;
  }
}

.hr-btn a {
  width: 100%;
  max-width: 385px;
  height: 69px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  background: linear-gradient(90deg, #ff705e 6.5%, #ffc13b 97%);
  border-radius: 999px;
  box-shadow: 0px 10px 50px rgba(229, 142, 76, 0.5);
  transition: 0.4s;
}

@media screen and (max-width: 820px) {
  .hr-btn a {
    font-size: 4.27vw;
  }
}

@media screen and (max-width: 425px) {
  .hr-btn a {
    max-width: 240px;
    height: 46px;
    font-size: 14px;
  }
}

.hr-btn a:hover {
  box-shadow: 0px 10px 50px rgba(229, 142, 76, 0);
  transition: 0.4s;
}

@media screen and (max-width: 820px) {
  .hr-solution-detail-text {
    padding: 0 16px;
  }
}

.hr-solution-detail-text h4 {
  font-size: 32px;
  font-weight: bold;
  line-height: 50px;
  color: #ff815a;
  position: relative;
  padding-bottom: 65px;
  margin: 0;
}

@media screen and (max-width: 820px) {
  .hr-solution-detail-text h4 {
    font-size: 4.87vw;
    line-height: 6.5vw;
    padding-bottom: 10vw;
  }
}

@media screen and (max-width: 425px) {
  .hr-solution-detail-text h4 {
    font-size: 20px;
    line-height: 7.5vw;
    padding-bottom: 10vw;
  }
}

@media screen and (max-width: 345px) {
  .hr-solution-detail-text h4 {
    font-size: 16px;
    line-height: 7.5vw;
    padding-bottom: 10vw;
  }
}

.hr-solution-detail-text h4::after {
  content: "";
  position: absolute;
  background: #ff815a;
  bottom: 32px;
  left: 0;
  width: 100px;
  height: 2px;
}

@media screen and (max-width: 820px) {
  .hr-solution-detail-text h4::after {
    bottom: 5vw;
  }
}

.hr-solution-detail-text p {
  font-size: 16px;
  line-height: 36px;
  font-weight: 500;
  margin: 0;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {
  /** PC(1440px以下)のみ */
  .hr-solution-detail-text p {
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 820px) {
  /** SPのみ */
  .hr-solution-detail-text p {
    font-size: 4.27vw;
    line-height: 6vw;
    padding-bottom: 5vw;
  }
}

@media screen and (max-width: 425px) {
  /** SPのみ */
  .hr-solution-detail-text p {
    font-size: 12px;
    letter-spacing: -0.5px;
  }
}

.hr-solution-detail-img img {
  width: 100%;
  max-width: 566px;
}

@media screen and (max-width: 820px) {
  .hr-solution-detail-img img {
    width: 100%;
    max-width: 100%;
  }
}

.hr-solution-btn {
  display: flex;
  justify-content: center;
}

.hr-solution-btn img {
  width: 100%;
  max-width: 473px;
}

.hr-service {
  padding-bottom: 98px;
}

@media screen and (max-width: 820px) {
  .hr-service {
    flex-wrap: wrap;
    padding: 0 4% 18% 4%;
    box-sizing: border-box;
  }
}

.hr-service-contents {
  max-width: 1216px;
  width: 100%;
  background: #313435;
  margin: 0 auto;
  border-radius: 20px;
  margin-top: 100px;
  margin-bottom: 100px;
  padding: 70px 82px;
  box-sizing: border-box;
  position: relative;
}

@media screen and (max-width: 820px) {
  .hr-service-contents {
    padding: 50px 20px;
    box-sizing: border-box;
    margin-bottom: 12%;
  }
}

@media screen and (max-width: 425px) {
  .hr-service-contents {
    padding: 30px 10px;
  }
}

.hr-service-contents .hr-title-jp {
  color: #fff;
}

@media screen and (max-width: 820px) {
  .hr-service-contents .hr-title-jp {
    font-size: 5.6vw;
    line-height: 8vw;
  }
}

.hr-service-contents .hr-title-sub {
  color: #fff;
  padding-top: 24px;
  font-size: 16px;
}

@media screen and (max-width: 820px) {
  .hr-service-contents .hr-title-sub {
    color: #fff;
    padding-top: 0;
    font-size: 16px;
  }
}

@media screen and (min-width: 821px) and (max-width: 1440px) {
  /** PC(1440px以下)のみ */
  .hr-service-contents .hr-title-sub {
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 820px) {
  /** SPのみ */
  .hr-service-contents .hr-title-sub {
    font-size: 4.27vw;
    line-height: 6vw;
  }
}

@media screen and (max-width: 425px) {
  /** SPのみ */
  .hr-service-contents .hr-title-sub {
    font-size: 16px;
    line-height: 6vw;
  }
}

.hr-title-icon {
  width: 181px;
  position: absolute;
  top: -107px;
  left: 36px;
}

@media screen and (max-width: 820px) {
  /** SPのみ */
  .hr-title-icon {
    width: 20vw;
    position: absolute;
    top: -15vw;
    left: 10px;
  }
}

@media screen and (max-width: 425px) {
  /** SPのみ */
  .hr-title-icon {
    width: 88px;
    top: -18vw;
  }
}

.hr-title-icon img {
  width: 100%;
}

.hr-service-title {
  display: flex;
  justify-content: center;
  transform: translateY(-37px);
  padding-bottom: 20px;
}

.hr-service-title img {
  width: 100%;
  max-width: 1051px;
}

.hr-service-subtitle {
  width: 100%;
  display: flex;
  justify-content: center;
}

.hr-service-subtitle h3 {
  width: 273px;
  height: 60px;
  background: #ff815a;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  position: relative;
  margin: 56px 0 10px 0;
}

@media screen and (max-width: 820px) {
  /** SPのみ */
  .hr-service-subtitle h3 {
    width: auto;
    height: auto;
    padding: 12px 24px;
    font-size: 5.33vw;
    margin: 27px 0 10px 0;
  }
}

@media screen and (max-width: 425px) {
  /** SPのみ */
  .hr-service-subtitle h3 {
    font-size: 14px;
  }
}

.hr-service-subtitle h3::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 0;
  height: 0;
  border-right: 18px solid transparent;
  border-top: 18px solid #ff815a;
  border-left: 18px solid transparent;
}

.hr-service-subtitle img {
  width: 100%;
  max-width: 273px;
}

.hr-service-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 29px;
  margin: 35px 0 0 0;
  padding: 0 86px;
  list-style-type: none;
  box-sizing: border-box;
  padding: 0;
  padding-bottom: 56px;
}

.hr-service-list.other {
  padding-bottom: 0;
}

@media screen and (max-width: 820px) {
  .hr-service-list {
    flex-wrap: wrap;
    padding: 0;
    gap: 12px;
    margin: 22px 0 0 0;
    padding-bottom: 6%;
    justify-content: space-between;
  }
}

.hr-service-item {
  width: 240px;
  background: #fff;
  border-radius: 10px;
  padding: 14px 28px 24px 28px;
  box-sizing: border-box;
}

@media screen and (max-width: 1220px) {
  .hr-service-item {
    width: 31%;
  }
}

@media screen and (max-width: 1001px) {
  .hr-service-item {
    width: 30%;
  }
}

@media screen and (max-width: 820px) {
  .hr-service-item {
    width: 49%;
    padding: 4% 3%;
  }
}

@media screen and (max-width: 702px) {
  .hr-service-item {
    width: 48%;
    padding: 2% 3%;
  }
}

@media screen and (max-width: 425px) {
  .hr-service-item {
    width: 48%;
    padding: 10px;
  }
}

@media screen and (max-width: 320px) {
  .hr-service-item {
    width: 100%;
  }
}

.hr-service-item-icon {
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 820px) {
  /** PC(1440px以下)のみ */
  .hr-service-item-icon {
    justify-content: center;
  }
}

@media screen and (max-width: 425px) {
  /** PC(1440px以下)のみ */
  .hr-service-item-icon {
    height: 50px;
  }
}

.hr-service-item h4 {
  margin: 0;
  padding-bottom: 11px;
  font-size: 16px;
  font-weight: bold;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {
  /** PC(1440px以下)のみ */
  .hr-service-item h4 {
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 820px) {
  /** SPのみ */
  .hr-service-item h4 {
    font-size: 4.27vw;
    line-height: 6vw;
  }
}

@media screen and (max-width: 425px) {
  /** SPのみ */
  .hr-service-item h4 {
    font-size: 12px;
    line-height: 5px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

.hr-service-item h4.sp-1 {
  letter-spacing: -1px;
}

.hr-service-item p {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  height: 65px;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {
  /** PC(1440px以下)のみ */
  .hr-service-item p {
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 820px) {
  /** SPのみ */
  .hr-service-item p {
    font-size: 4.27vw;
    line-height: 6vw;
  }
}

@media screen and (max-width: 425px) {
  /** SPのみ */
  .hr-service-item p {
    font-size: 12px;
    line-height: 16px;
  }
}

@media screen and (max-width: 820px) {
  .hr-service-item p {
    height: auto;
  }
}

.hr-service-item-icon img {
  max-width: 100%;
}

.hr-service-btn {
  display: flex;
  justify-content: center;
}

.hr-service-btn img {
  width: 100%;
  max-width: 473px;
}

.hr-feature {
  width: 100%;
  padding: 110px 0 98px 0;
  background: #fff;
}

@media screen and (max-width: 820px) {
  .hr-feature {
    width: 100%;
    padding: 52px 0 18% 0;
    box-sizing: border-box;
    background: #fff;
  }
}

.hr-feature-contetns {
  max-width: 1216px;
  width: 100%;
  margin: 0 auto;
}

.hr-feature-title {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 820px) {
  .hr-feature-title {
    padding-bottom: 50px;
  }
}

.hr-feature-list {
  margin-top: 96px;
}

@media screen and (max-width: 820px) {
  .hr-feature-list {
    padding: 0;
    margin-top: 26px;
  }
}

.hr-feature-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 105px;
}

@media screen and (max-width: 820px) {
  .hr-feature-item {
    flex-wrap: wrap;
    margin-bottom: 12vw;
  }
}

@media screen and (max-width: 820px) {
  .hr-feature-item {
    flex-wrap: wrap;
    margin-bottom: 28px;
  }
}

.hr-feature-item-text {
  width: calc(100% - 701px);
  padding-right: 20px;
  box-sizing: border-box;
}

@media screen and (max-width: 820px) {
  .hr-feature-item-text {
    width: 100%;
    padding-right: 4%;
    padding-left: 4%;
    padding-bottom: 8px;
  }
}

.hr-feature-item-text h3 {
  font-size: 32px;
  font-weight: bold;
  line-height: 45px;
  margin: 0;
  letter-spacing: -0.3px;
}

@media screen and (max-width: 820px) {
  .hr-feature-item-text h3 {
    text-align: center;
    font-size: 5.87vw;
    line-height: 6.5vw;
  }
}

.hr-feature-item-text h3 span {
  font-size: 12px;
  vertical-align: top;
  line-height: 34px;
}

.hr-feature-item-text-num {
  width: 100%;
  display: flex;
}

.hr-feature-item-text-num img {
  width: 34px;
  height: 37px;
}

@media screen and (max-width: 820px) {
  .hr-feature-item-text-num {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 8px;
  }
  .hr-feature-item-text-num img {
    width: 34px;
    height: 37px;
  }
}

@media screen and (max-width: 425px) {
  .hr-feature-item-text-num {
    padding-bottom: 4px;
  }
  .hr-feature-item-text-num img {
    width: 20px;
    height: auto;
  }
}

.hr-feature-item-text p {
  font-size: 16px;
  margin: 20px 0 0 0;
  letter-spacing: -0.8px;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {
  /** PC(1440px以下)のみ */
  .hr-feature-item-text p {
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 820px) {
  /** SPのみ */
  .hr-feature-item-text p {
    font-size: 4.27vw;
    line-height: 6vw;
    margin: 4px 0 0 0;
  }
}

@media screen and (max-width: 425px) {
  /** SPのみ */
  .hr-feature-item-text p {
    font-size: 12px;
    line-height: 5vw;
    margin: 4px 0 0 0;
    letter-spacing: 0.01px;
    text-align: justify;
    text-align-last: left;
  }
}

.hr-feature-item-text .sp-caption {
  margin-top: 32px;
}

@media screen and (max-width: 820px) {
  .hr-feature-item-text .sp-caption {
    margin-top: 0px;
  }
}

.hr-feature-item-text p span {
  font-size: 12px;
  display: flex;
}

.hr-feature-item-text .sp-caption span {
  font-size: 12px;
  display: flex;
  letter-spacing: 0;
}

.hr-feature-item-text .sp-caption span:nth-child(1)::before {
  content: "※1 ";
  padding-right: 5px;
}

.hr-feature-item-text .sp-caption span:nth-child(2)::before {
  content: "※2 ";
  padding-right: 5px;
}

@media screen and (max-width: 820px) {
  .hr-feature-item-text p span {
    font-size: 12px;
    margin-top: 0;
    letter-spacing: 0.06px;
  }
}

.hr-feature-item-img {
  width: 701px;
}

.hr-feature-item-img img {
  width: 100%;
}

@media screen and (max-width: 820px) {
  .hr-feature-item-img {
    width: 100%;
    max-width: 100%;
    padding: 24px 2% 0 2%;
    box-sizing: border-box;
  }
  .hr-feature-item:first-child .hr-feature-item-img {
    padding: 0 2% 0 2%;
  }
}

.hr-feature-item-img-caption {
  font-size: 16px;
  width: 100%;
  text-align: center;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {
  /** PC(1440px以下)のみ */
  .hr-feature-item-img-caption {
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 820px) {
  /** SPのみ */
  .hr-feature-item-img-caption {
    font-size: 4.27vw;
  }
}

@media screen and (max-width: 425px) {
  /** SPのみ */
  .hr-feature-item-img-caption {
    font-size: 12px;
  }
}

.hr-feature-item-img-caption02 {
  font-size: 12px;
  width: 100%;
  text-align: right;
  padding-right: 40px;
  display: block;
  box-sizing: border-box;
  color: #676767;
}

@media screen and (max-width: 820px) {
  .hr-feature-item-img-caption02 {
    padding-right: 20px;
  }
}

.hr-feature-item:nth-child(2n) {
  flex-direction: row-reverse;
}

.hr-feature-item:nth-child(2n) .hr-feature-item-text h3 {
  text-align: right;
}

.hr-feature-item:nth-child(2n) .hr-feature-item-text-num {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.hr-feature-item:nth-child(2n) .hr-feature-item-text-num img {
  padding-right: 10px;
}

.hr-feature-item:nth-child(2n) .hr-feature-item-text {
  padding-right: 0;
  padding-left: 20px;
}

@media screen and (max-width: 820px) {
  /** SPのみ */
  .hr-feature-item:nth-child(2n) .hr-feature-item-text {
    padding-right: 4%;
    padding-left: 4%;
  }

  .hr-feature-item:nth-child(2n) .hr-feature-item-text-num {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 8px;
  }

  .hr-feature-item:nth-child(2n) .hr-feature-item-text-num img {
    padding-right: 0;
  }

  .hr-feature-item:nth-child(2n) .hr-feature-item-text h3 {
    text-align: center;
  }
}

@media screen and (max-width: 425px) {
  .hr-feature-item:nth-child(2n) .hr-feature-item-text-num {
    padding-bottom: 4px;
  }
}

.hr-feature-item:last-child {
  margin-bottom: 64px;
}

@media screen and (max-width: 820px) {
  .hr-feature-item:last-child {
    margin-bottom: 6%;
  }
}

.hr-feature-btn {
  display: flex;
  justify-content: center;
}

.hr-feature-btn img {
  width: 100%;
  max-width: 473px;
}

.hr-shift {
  width: 100%;
  position: relative;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 37%,
    rgba(245, 245, 245, 0) 37%,
    rgba(245, 245, 245, 0) 100%
  );
}

@media screen and (max-width: 820px) {
  .hr-shift {
    box-sizing: border-box;
  }
}

.hr-shift-contents {
  width: 100%;
  max-width: 1216px;
  margin: 0 auto;
  position: relative;
}

.hr-shift-img {
  max-width: 740px;
}

@media screen and (max-width: 820px) {
  .hr-shift-img {
    max-width: 100%;
  }
}

.hr-shift-img img {
  width: 100%;
}

.hr-shift-text {
  width: 100%;
  max-width: 750px;
  position: absolute;
  background: #fff;
  right: 0;
  bottom: -165px;
  padding: 50px;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 820px) {
  .hr-shift-text {
    padding: 20px 16px;
    position: relative;
    width: 94%;
    margin: 0 3%;
    margin-top: -25vw;
    bottom: auto;
    left: auto;
  }
}

.hr-shift-text-logo img {
  max-width: 217px;
}

@media screen and (max-width: 820px) {
  .hr-shift-text-logo {
    display: flex;
    justify-content: center;
  }

  .hr-shift-text-logo img {
    max-width: 50vw;
  }
}

.hr-shift-text h3 {
  font-size: 44px;
  line-height: 60px;
  letter-spacing: -0.5px;
  margin: 20px 0;
}

@media screen and (max-width: 820px) {
  .hr-shift-text h3 {
    font-size: 5vw;
    line-height: 7vw;
    margin: 8px 0;
  }
}

.hr-shift-text p {
  font-size: 16px;
  margin: 0 0 46px 0;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {
  /** PC(1440px以下)のみ */
  .hr-shift-text p {
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 820px) {
  /** SPのみ */
  .hr-shift-text p {
    font-size: 4.27vw;
    margin: 0 0 23px 0;
  }
}

@media screen and (max-width: 425px) {
  /** SPのみ */
  .hr-shift-text p {
    font-size: 12px;
    margin: 0 0 23px 0;
  }
}

.hr-shift-text-list {
  display: flex;
  list-style: none;
  justify-content: space-between;
  padding-right: 46px;
}

@media screen and (max-width: 820px) {
  .hr-shift-text-list {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    gap: 20px;
    align-items: flex-end;
    padding: 0 4px;
  }
}

.hr-shift-text-item:nth-child(1) img {
  max-width: 101px;
}

.hr-shift-text-item:nth-child(2) img {
  max-width: 168px;
}

.hr-shift-text-item:nth-child(3) img {
  max-width: 176px;
}

@media screen and (max-width: 820px) {
  .hr-shift-text-item:nth-child(1) img {
    max-width: 100%;
  }

  .hr-shift-text-item:nth-child(2) img {
    max-width: 100%;
  }

  .hr-shift-text-item:nth-child(3) img {
    max-width: 100%;
  }
}

.hr-system {
  width: 100%;
  max-width: 1216px;
  margin: 0 auto;
  padding: 300px 0 0 0;
}

@media screen and (max-width: 820px) {
  .hr-system {
    padding: 0 5px;
    box-sizing: border-box;
    margin-top: 20px;
  }
}

.hr-system .hr-title-sub {
  margin-top: 16px;
}

@media screen and (max-width: 425px) {
  .hr-system .hr-title-sub {
    font-size: 12px;
    margin-top: 2px;
    line-height: 5.2vw;
  }
}

.hr-system-title {
  display: flex;
  justify-content: center;
}

.hr-system-title img {
  width: 100%;
  max-width: 949px;
}

.hr-system-list {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 97px;
  margin: 64px 0 100px 0;
  padding: 0;
  list-style-type: none;
}

@media screen and (max-width: 820px) {
  .hr-system-list {
    flex-wrap: wrap;
    gap: 4%;
    margin: 6% 0 10% 0;
  }
}

.hr-system-item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}

@media screen and (max-width: 820px) {
  .hr-system-item {
    width: 48%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
  }
}

.hr-system-item:nth-child(1) img {
  width: 100%;
  max-width: 128px;
  display: inline-block;
}

.hr-system-item:nth-child(2) img {
  width: 100%;
  max-width: 93px;
  display: inline-block;
}

.hr-system-item:nth-child(3) img {
  width: 100%;
  max-width: 105px;
  display: inline-block;
}

@media screen and (max-width: 820px) {
  .hr-system-item:nth-child(1) img {
    width: 100%;
    max-width: 93px;
    display: inline-block;
  }

  .hr-system-item:nth-child(2) img {
    width: 100%;
    max-width: 93px;
    display: inline-block;
  }

  .hr-system-item:nth-child(3) {
    width: 100%;
    margin-top: 8%;
  }

  .hr-system-item:nth-child(3) img {
    width: 100%;
    max-width: 93px;
    display: inline-block;
  }
}

.hr-system-item h3 {
  width: 100%;
  font-size: 30px;
  font-weight: bold;
  margin: 0;
  text-align: center;
}

@media screen and (max-width: 820px) {
  .hr-system-item h3 {
    font-size: 3.87vw;
  }
}

.hr-system-item p {
  width: 100%;
  font-size: 16px;
  margin: 0;
  letter-spacing: -0.5px;
  text-align: center;
}

@media screen and (min-width: 821px) and (max-width: 1440px) {
  /** PC(1440px以下)のみ */
  .hr-system-item p {
    font-size: 1.2vw;
  }
}

@media screen and (max-width: 820px) {
  /** SPのみ */
  .hr-system-item p {
    font-size: 3vw;
  }
}

@media screen and (max-width: 820px) {
  .hr-price {
    padding: 0 4%;
    box-sizing: border-box;
  }
}

.hr-price .hr-title-sub {
  margin-top: 12px;
}

@media screen and (max-width: 425px) {
  .hr-price {
    margin-top: 2px;
  }
}

.hr-price-contents {
  max-width: 1216px;
  width: 100%;
  background: #fff;
  margin: 0 auto;
  border-radius: 20px;
  padding: 48px 0 62px 0;
  position: relative;
  margin-bottom: 130px;
}

@media screen and (max-width: 820px) {
  .hr-price-contents {
    padding: 20px 16px 40px 16px;
    box-sizing: border-box;
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 425px) {
  .hr-price-contents .hr-title-sub {
    letter-spacing: -0.5px;
    font-size: 12px;
  }
}

@media screen and (max-width: 330px) {
  .hr-price-contents .hr-title-sub {
    letter-spacing: -1px;
    font-size: 11px;
  }
}

.hr-price-title {
  display: flex;
  justify-content: center;
}

.hr-price-title img {
  width: 100%;
  max-width: 949px;
}

.hr-price-list {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 260px;
  margin: 64px 0 72px 0;
  padding: 0;
  list-style-type: none;
}

@media screen and (max-width: 820px) {
  .hr-price-list {
    gap: 40px;
    margin: 30px 0 20px 0;
  }
}

.hr-price-item {
}

.hr-price-item:nth-child(1) img {
  width: 100%;
  max-width: 104px;
}

.hr-price-item:nth-child(2) img {
  width: 100%;
  max-width: 104px;
}

@media screen and (max-width: 820px) {
  .hr-price-item:nth-child(1) img {
    width: 100%;
    max-width: 16vw;
  }

  .hr-price-item:nth-child(2) img {
    width: 100%;
    max-width: 16vw;
  }
}

@media screen and (max-width: 425px) {
  .hr-price-item:nth-child(1) img {
    width: 100%;
    max-width: 55px;
  }

  .hr-price-item:nth-child(2) img {
    width: 100%;
    max-width: 55px;
  }
}

.hr-price-item-img {
  width: 100%;
  display: flex;
  justify-content: center;
}

.hr-price-item h3 {
  width: 100%;
  font-size: 30px;
  text-align: center;
  margin: 16px 0 24px 0;
}

.hr-price-item h3 span {
  font-size: 20px;
  transform: translateY(-7px);
  display: inline-block;
}

@media screen and (max-width: 820px) {
  .hr-price-item h3 {
    width: 100%;
    font-size: 4.87vw;
    text-align: center;
    margin: 6px 0 2px 0;
  }

  .hr-price-item h3 span {
    font-size: 3.87vw;
    transform: translateY(0);
    display: inline-block;
  }
}

.hr-price-item-price {
  width: 100%;
  text-align: center;
  font-size: 120px;
  line-height: 70px;
  color: #ff815a;
  font-weight: bold;
}

@media screen and (max-width: 425px) {
  .hr-price-item-price {
    font-size: 60px;
    line-height: 55px;
  }
}

.hr-price-item-price span {
  font-size: 36px;
  color: #313435;
  font-weight: 900;
}

@media screen and (max-width: 425px) {
  .hr-price-item-price span {
    font-size: 18px;
  }
}

.hr-price-btn {
  display: flex;
  justify-content: center;
  padding-top: 48px;
  padding-bottom: 6px;
}

.hr-price-btn img {
  width: 100%;
  max-width: 473px;
}

.hr-focus {
  padding-bottom: 100px;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 69.5%,
    rgba(245, 245, 245, 0) 64.5%,
    rgba(245, 245, 245, 0) 100%
  );
}

@media screen and (max-width: 820px) {
  .hr-focus {
    padding: 0 4% 10% 4%;
    box-sizing: border-box;
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 74.5%,
      rgba(245, 245, 245, 0) 74.5%,
      rgba(245, 245, 245, 0) 100%
    );
  }
}

@media screen and (max-width: 425px) {
  .hr-focus {
    padding: 0 4% 10% 4%;
    box-sizing: border-box;
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 76.5%,
      rgba(245, 245, 245, 0) 74.5%,
      rgba(245, 245, 245, 0) 100%
    );
  }
}

.hr-focus-img {
  width: 100%;
  max-width: 643px;
  margin: 0 auto;
  padding-top: 44px;
}

.hr-focus-img img {
  width: 100%;
}

.hr-focus-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  max-width: 1021px;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
}

@media screen and (max-width: 820px) {
  .hr-focus-list {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.hr-focus-item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

@media screen and (max-width: 820px) {
  .hr-focus-item {
    width: 48%;
  }
  .hr-focus-item:nth-child(3) {
    width: 60%;
  }
}

.hr-focus-item-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding-top: 27px;
  padding-left: 0;
  padding-bottom: 110px;
}

@media screen and (max-width: 820px) {
  .hr-focus-item-list {
    padding-top: 12px;
    padding-left: 0;
    padding-bottom: 40px;
  }
}

.hr-focus-item-img {
  position: relative;
}

.hr-focus-item-img-label {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  padding: 7px 20px;
  color: #fff;
  background: #313435;
  border-radius: 999px;
}

@media screen and (max-width: 418px) {
  .hr-focus-item-img-label {
    font-size: 12px;
  }
}

@media screen and (max-width: 320px) {
  .hr-focus-item-img-label {
    font-size: 9px;
  }
}

.hr-focus-item-img {
  width: 188px;
}

.hr-focus-item-img img {
  width: 100%;
}

.hr-focus-item-check {
  width: 100%;
  font-size: 20px;
  color: #ff705e;
  list-style-type: none;
  display: flex;
  align-items: center;
  font-weight: bold;
  padding-left: 50px;
  padding-bottom: 46px;
}

@media screen and (max-width: 820px) {
  .hr-focus-item-check {
    padding-left: 0;
    padding-bottom: 24px;
    font-size: 3vw;
  }
}

.hr-focus-item-check:last-child {
  padding-bottom: 0;
}

.hr-focus-item-check img {
  width: 20px;
  margin-right: 6px;
}

.hr-focus-btn {
  display: flex;
  justify-content: center;
  padding-top: 79px;
  padding-bottom: 67px;
}

.hr-focus-btn img {
  width: 100%;
  max-width: 473px;
}

.contact {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

@media screen and (max-width: 820px) {
  .contact {
    right: 0;
  }
}

@media screen and (max-width: 340px) {
  .contact {
    right: 32px;
  }
}

.header {
  position: fixed;
  backdrop-filter: none;
}

.header.active {
  backdrop-filter: blur(1.2rem);
}