#hero-area .p-hero-image__item > img {
  -webkit-mask-image: var(--bg-mask);
  mask-image: var(--bg-mask);
  -webkit-mask-size: 98% auto;
  mask-size: 98% auto;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

:root {
  --hero-padding-left: min(120px, 8.333vw);
  --hero-padding-block: min(224px, 15.555vw);
}

#main-wrapper::before {
  display: none;
}

#hero-area {
  position: relative;
  padding: 0;
}

#hero-area .p-main-title {
  position: relative;
  z-index: 10;
  padding-left: var(--hero-padding-left);
  padding-block: var(--hero-padding-block);
  color: var(--txt-primary);
  font-size: var(--size-80);
  font-weight: 900;
  line-height: var(--size-96);
}

#hero-area .p-hero-icon {
  display: block;
  position: absolute;
  z-index: 2;
  background: var(--bg-diamond) no-repeat center / contain;
  aspect-ratio: 136 / 95;
}

#hero-area .p-hero-icon.p-hero-icon--a {
  filter: blur(var(--size-4));
}

#hero-area .p-hero-icon.p-hero-icon--b {
  filter: blur(var(--size-8));
}

#hero-area .p-hero-icon.p-hero-icon--c {
  filter: blur(var(--size-6));
}

#hero-area .p-hero-icon.p-hero-icon--d {
  filter: blur(var(--size-5));
}

#hero-area .p-hero-image {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;

  --hero-img-gap: var(--size-24);

  filter: drop-shadow(var(--size-12) var(--size-12) var(--size-8) var(--sw-secondary));
}

#hero-area .p-hero-image__item {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 22.222vw);
  aspect-ratio: 1 / 1;
  padding: var(--size-8);
}

#hero-area .p-hero-image__item > img {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  aspect-ratio: 1 / 1;
  -o-object-fit: cover;
  object-fit: cover;
}

#hero-area .p-hero-image__item:first-child {
  translate: calc(-100% - var(--hero-img-gap)) 0;
}

#hero-area .p-hero-image__item:nth-child(2) {
  translate: var(--hero-img-gap) 0;
}

#hero-area .p-hero-image__item:nth-child(3) {
  translate: -50% calc(50% + var(--hero-img-gap));
}

#home-message {
  position: relative;
  width: var(--col-6);
  margin-inline: auto;
}

#home-message::after,
#home-message::before {
  content: "";
  display: block;
  position: absolute;
  width: min(268px, 18.611vw);
  background: url("/recruit/assets/img/common/bg_diamond-row.svg") no-repeat 50% / contain;
  aspect-ratio: 24 / 33;
  filter: blur(var(--size-16));
}

#home-message::before {
  top: 0;
  left: max(-360px, -18.75vw);
}

#home-message::after {
  right: max(-240px, -12.5vw);
  bottom: clamp(40px, 2.083vw, 46px);
  transform: rotateY(180deg);
}

#home-message .p-message-title {
  margin-bottom: var(--size-32);
  color: var(--txt-secondary);
  font-size: var(--size-56);
  font-weight: 900;
  line-height: var(--size-72);
}

#home-message .p-message-text > p {
  font-size: var(--size-20);
  font-weight: 700;
  line-height: var(--size-32);
}

#home-message .p-message-text > p + p {
  margin-top: 1em;
}

#home-message .c-rich-btn {
  display: block;
  width: var(--col-3);
  margin-top: var(--size-32);
}

.p-home-members {
  display: flex;
  margin: auto;
  gap: var(--gap);
}

.p-home-members__head {
  flex: 0 1 var(--col-4);
  padding-top: var(--size-24);
}

.p-home-members .p-members-list {
  grid-template-columns: repeat(2, 1fr);
  flex: 1 0 auto;
}

.p-home-members__en {
  color: var(--txt-secondary);
  font-size: var(--size-64);
  font-weight: 700;
  line-height: var(--size-80);
}

.p-home-members__title {
  display: flex;
  align-items: center;
  color: var(--txt-primary);
  gap: var(--size-12);
  font-size: var(--size-18);
  line-height: var(--size-32);
}

.p-home-members__title::before {
  content: "";
  display: block;
  width: var(--size-24);
  height: var(--size-24);
  border-radius: var(--size-6);
  background: var(--bg-noize) var(--bg-secondary);
  background-blend-mode: screen;
}

.p-home-members__read {
  margin-top: var(--size-32);
  font-size: var(--size-20);
  font-weight: 700;
  line-height: var(--size-32);
}

.p-home-footer {
  display: flex;
  gap: var(--gap);
  margin-inline: auto;
}

.p-home-footer__item {
  flex: 0 1 100%;
}

.p-page-btn {
  color: inherit;
  font-size: var(--size-24);
  font-weight: 700;
  line-height: var(--size-36);
}

.p-page-btn .c-rich-btn__inner {
  min-height: min(168px, 8.75vw);
}

.p-page-btn__en {
  display: inline-block;
  margin-right: var(--size-24);
  color: var(--txt-secondary);
  font-size: var(--size-40);
  font-weight: 700;
  line-height: var(--size-56);
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  :root {
    --hero-padding-left: var(--size-40);
    --hero-padding-block: var(--size-120);
  }

  #hero-area .p-main-title {
    font-size: var(--size-56);
    line-height: var(--size-72);
  }

  #hero-area .p-hero-icon.p-hero-icon--a {
    filter: blur(var(--size-2));
    top: min(10px, 0.976vw);
    left: min(0px, 0vw);
    width: min(140px, 13.671vw);
  }

  #hero-area .p-hero-icon.p-hero-icon--b {
    filter: blur(var(--size-4));
    top: min(56px, 5.468vw);
    left: min(300px, 29.296vw);
    width: min(64px, 6.25vw);
  }

  #hero-area .p-hero-icon.p-hero-icon--c {
    filter: blur(var(--size-4));
    top: min(300px, 29.296vw);
    left: min(56px, 5.468vw);
    width: min(140px, 13.671vw);
  }

  #hero-area .p-hero-icon.p-hero-icon--d {
    filter: blur(var(--size-2));
    top: min(290px, 28.32vw);
    left: min(360px, 35.156vw);
    width: min(90px, 8.789vw);
  }

  #hero-area .p-hero-image {
    --hero-img-gap: var(--size-20);

    top: min(20px, 1.953vw);
    left: min(940px, 91.796vw);
  }

  #hero-area .p-hero-image__item {
    width: 19.531vw;
  }

  #home-message {
    width: var(--col-5);
  }

  #home-message::after,
  #home-message::before {
    width: min(140px, 13.671vw);
  }

  #home-message::before {
    left: min(-240px, -23.438vw);
  }

  #home-message::after {
    right: min(-200px, -19.532vw);
    bottom: min(20px, 1.953vw);
  }

  #home-message .p-message-title {
    margin-bottom: var(--size-28);
    font-size: var(--size-48);
    line-height: var(--size-64);
  }

  #home-message .p-message-text > p {
    font-size: var(--size-18);
    line-height: var(--size-32);
  }

  #home-message .c-rich-btn {
    width: var(--col-3);
    margin-top: var(--size-28);
  }

  .p-home-members__head {
    flex: 0 1 var(--col-3);
  }

  .p-home-members__en {
    font-size: var(--size-48);
    line-height: var(--size-64);
  }

  .p-home-members__title {
    gap: var(--size-10);
  }

  .p-home-members__read {
    font-size: var(--size-18);
    line-height: var(--size-32);
  }

  .p-page-btn {
    font-size: var(--size-20);
    line-height: var(--size-32);
  }

  .p-page-btn__en {
    font-size: var(--size-32);
    line-height: var(--size-44);
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  #hero-area .p-hero-icon.p-hero-icon--a {
    top: min(20px, 1.388vw);
    left: min(0px, 0vw);
    width: min(240px, 16.666vw);
  }

  #hero-area .p-hero-icon.p-hero-icon--b {
    top: min(100px, 6.944vw);
    left: min(480px, 33.333vw);
    width: min(120px, 8.333vw);
  }

  #hero-area .p-hero-icon.p-hero-icon--c {
    top: min(440px, 30.555vw);
    left: min(600px, 41.666vw);
    width: min(140px, 9.722vw);
  }

  #hero-area .p-hero-icon.p-hero-icon--d {
    top: min(500px, 34.722vw);
    left: min(120px, 8.333vw);
    width: min(200px, 13.888vw);
  }

  #hero-area .p-hero-image {
    --hero-img-gap: var(--size-28);

    top: min(24px, 1.666vw);
    left: min(1420px, 98.611vw);
  }
}

@media screen and (min-width: 1441px) {
  :root {
    --hero-padding-left: min(120px, 8.333vw);
    --hero-padding-block: min(224px, 15.555vw);
  }

  .c-section-block {
    width: var(--col-12);
  }

  #hero-area {
    width: 100%;
  }

  #hero-area .p-hero-icon.p-hero-icon--a {
    top: clamp(20px, 1.041vw, 23px);
    left: clamp(0px, 0vw, 0px);
    width: clamp(240px, 12.5vw, 276px);
  }

  #hero-area .p-hero-icon.p-hero-icon--b {
    top: clamp(100px, 5.208vw, 115px);
    left: clamp(480px, 25vw, 552px);
    width: clamp(120px, 6.25vw, 138px);
  }

  #hero-area .p-hero-icon.p-hero-icon--c {
    top: clamp(440px, 22.916vw, 506px);
    left: clamp(600px, 31.25vw, 690px);
    width: clamp(140px, 7.291vw, 161px);
  }

  #hero-area .p-hero-icon.p-hero-icon--d {
    top: clamp(500px, 26.041vw, 575px);
    left: clamp(120px, 6.25vw, 138px);
    width: clamp(200px, 10.416vw, 230px);
  }

  #hero-area .p-hero-image {
    --hero-img-gap: var(--size-48);

    top: clamp(24px, 1.25vw, 28px);
    left: clamp(1580px, 82.291vw, 1817px);
  }

  #hero-area .p-hero-image__item {
    width: clamp(320px, 16.666vw, 368px);
  }

  #home-message::after,
  #home-message::before {
    width: clamp(200px, 10.416vw, 230px);
  }

  #home-message::before {
    left: clamp(-322px, -14.584vw, -280px);
  }

  #home-message::after {
    right: max(-200px, -10.417vw);
    bottom: clamp(40px, 2.083vw, 46px);
  }

  .p-home-members {
    width: var(--col-12);
  }

  .p-home-members__head {
    flex: 0 1 var(--col-4);
  }
}

@media screen and (max-width: 1440px) {
  #hero-area .p-hero-image {
    filter: drop-shadow(var(--size-4) var(--size-8) var(--size-6) var(--sw-secondary));
  }

  .p-home-members__title::before {
    width: var(--size-20);
    height: var(--size-20);
    border-radius: var(--size-6);
  }
}

@media screen and (max-width: 1024px) {
  .p-page-btn .c-rich-btn__inner {
    flex-direction: column;
    max-height: none;
    gap: 0;
  }

  .p-page-btn__en {
    margin-right: 0;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --hero-padding-left: 0;
    --hero-padding-block: var(--size-120);
  }

  #hero-area {
    height: clamp(320px, 85.333vw, 384px);
    margin-inline: auto;
    padding: 0;
  }

  #hero-area .p-main-title {
    padding-block: clamp(40px, 10.666vw, 48px);
    font-size: var(--size-32);
    line-height: var(--size-44);
  }

  #hero-area .p-hero-icon.p-hero-icon--a {
    top: clamp(-12px, -2.667vw, -10px);
    left: clamp(-24px, -5.334vw, -20px);
    width: clamp(120px, 32vw, 144px);
  }

  #hero-area .p-hero-icon.p-hero-icon--b {
    top: clamp(20px, 5.333vw, 24px);
    left: clamp(150px, 40vw, 180px);
    width: clamp(50px, 13.333vw, 60px);
  }

  #hero-area .p-hero-icon.p-hero-icon--c {
    top: clamp(230px, 61.333vw, 276px);
    left: clamp(0px, 0vw, 0px);
    width: clamp(100px, 26.666vw, 120px);
  }

  #hero-area .p-hero-icon.p-hero-icon--d {
    top: clamp(120px, 32vw, 144px);
    left: clamp(240px, 64vw, 288px);
    width: clamp(80px, 21.333vw, 96px);
  }

  #hero-area .p-hero-image {
    --hero-img-gap: var(--size-10);

    top: clamp(120px, 32vw, 144px);
    left: clamp(360px, 96vw, 432px);
  }

  #hero-area .p-hero-image__item {
    width: clamp(130px, 34.666vw, 156px);
  }

  #home-message {
    width: 100%;
  }

  #home-message::after,
  #home-message::before {
    display: none;
  }

  #home-message .p-message-title {
    margin-bottom: var(--size-24);
    font-size: var(--size-28);
    line-height: var(--size-40);
  }

  #home-message .p-message-text > p {
    font-size: var(--size-15);
    line-height: var(--size-24);
  }

  #home-message .c-rich-btn {
    width: auto;
    max-width: clamp(240px, 64vw, 288px);
    margin-top: var(--size-24);
  }

  .p-home-members {
    flex-direction: column;
    gap: var(--size-24);
  }

  .p-home-members__head {
    flex: 0 1 auto;
  }

  .p-home-members .p-members-list {
    grid-template-columns: 1fr;
  }

  .p-home-members__en {
    font-size: var(--size-40);
    line-height: var(--size-56);
  }

  .p-home-members__title {
    gap: var(--size-8);
  }

  .p-home-members__read {
    margin-top: var(--size-18);
    font-size: var(--size-16);
    line-height: var(--size-28);
  }

  .p-home-footer {
    flex-direction: column;
    gap: var(--size-24);
  }

  .p-page-btn {
    font-size: var(--size-16);
    line-height: var(--size-28);
  }

  .p-page-btn__en {
    font-size: var(--size-24);
    line-height: var(--size-36);
  }
}