@charset "UTF-8";
.field {
  position: relative
}
.field__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden
}
.field__contents {
  position: absolute;
  inset: 0;
  z-index: 1
}
.field__block {
  width: 94vw;
  position: absolute;
  top: 7.1vw;
  left: 50%;
  translate: -50% 0
}
.field__heading {
  display: grid;
  justify-content: center;
  gap: 0;
  color: #fff;
  margin-bottom: 5.625vw
}
.field__heading-ttl {
  font-weight: 500;
  font-size: 2.96875vw;
  letter-spacing: .2em;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 1.328125vw
}
.field__heading-en {
  font-family: DINNextLTPro-HeavyItalic,serif;
  font-size: 1.875vw;
  line-height: 1.5;
  text-align: center
}
.field__links {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3.75vw;
  color: #fff
}
.field__link {
  display: grid;
  justify-items: center;
  gap: 1.5vw;
  font-size: 2.5vw;
  background-color: #dc1e37;
  border-radius: 1.2vw;
  padding: 4vw 1.5vw 1.5vw;
  position: relative
}
.field__link .is-unit {
  display: grid;
  place-content: center;
  width: 6.25vw;
  aspect-ratio: 1/1;
  font-family: DINNextLTPro-Regular,serif;
  font-weight: 700;
  font-size: 3.75vw;
  line-height: 1.3;
  text-align: center;
  color: #dc1e37;
  background-color: #fff;
  border: 1px solid #dc1e37;
  border-radius: 50%;
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 50%
}
.field__link::after {
  content: "";
  display: block;
  width: 2.5vw;
  aspect-ratio: 1;
  background-color: #fff;
  mask: url(/jp/recruit/group_new_graduate/construction/assets/img/common/icon_arrow_02.svg) no-repeat center/contain
}
.field__btn {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: .9vw;
  width: 26vw;
  height: 7vw;
  font-weight: 600;
  font-size: 3vw;
  line-height: 1;
  color: #fff;
  background-color: #dc1e37;
  border: none;
  border-radius: calc(infinity * 1px);
  position: absolute;
  cursor: pointer
}
.field__btn:nth-child(1) {
  top: 49vw;
  left: 26vw
}
.field__btn:nth-child(2) {
  top: 45vw;
  left: 52vw
}
.field__btn:nth-child(3) {
  top: 100vw;
  left: 25.1vw
}
.field__btn:nth-child(4) {
  top: 102vw;
  left: 61vw
}
.field__btn:nth-child(5) {
  top: 129vw;
  left: 44.6vw
}
.field__btn:nth-child(6) {
  top: 184vw;
  left: 35.3vw
}
.field__btn:nth-child(7) {
  top: 219vw;
  left: 39.3vw
}
.field__btn::after {
  content: "";
  display: block;
  width: 2vw;
  aspect-ratio: 1/1;
  clip-path: polygon(0 0,100% 0,50% 100%);
  background-color: #dc1e37;
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% -1px
}
.field__btn-icon::before {
  content: "";
  display: block;
  width: 3vw;
  aspect-ratio: 1/1;
  background: url(/jp/recruit/group_new_graduate/construction/assets/img/works/field/icon_search.svg) no-repeat center/contain
}
:where(dialog.field-modal) {
  width: unset;
  max-width: unset;
  padding: unset;
  color: unset;
  background-color: unset;
  border: unset;
  overflow: unset;
  outline: 0
}
html:has(.field-modal[open]) {
  overflow: hidden;
  scrollbar-gutter: stable
}
.field-modal {
  --_shadow-color: #DEDEDE8D;
  --_duration: 0.5s;
  width: 92vw;
  min-height: 0;
  max-height: 92vh;
  background-color: var(--_shadow-color);
  opacity: 0;
  box-shadow: 0 0 0 100vmax var(--_shadow-color);
  transition: opacity var(--_duration)
}
.field-modal[open] {
  display: flex;
  flex-direction: column
}
.field-modal:not([data-active=true]) {
  opacity: 0
}
.field-modal::-ms-backdrop {
  background-color: rgba(222,222,222,.5529411765);
  -ms-transition: background-color .5s ease-out;
  transition: background-color .5s ease-out
}
.field-modal::backdrop {
  background-color: rgba(222,222,222,.5529411765);
  transition: background-color .5s ease-out
}
.field-modal.is-show {
  opacity: 1
}
.field-modal.is-show::-ms-backdrop {
  background-color: rgba(222,222,222,.5529411765)
}
.field-modal.is-show::backdrop {
  background-color: rgba(222,222,222,.5529411765)
}
.field-modal__container {
  display: grid;
  grid-template-rows: minmax(0,1fr);
  width: 100%;
  min-height: 0;
  background-color: #fff;
  padding: 60px 24px 30px 24px
}
.field-modal__close {
  background: url(/jp/recruit/group_new_graduate/construction/assets/img/common/icon_close_01.svg) no-repeat center/contain;
  border: none;
  position: absolute;
  top: 24px;
  right: 16px;
  width: 28px;
  aspect-ratio: 1/1;
  cursor: pointer
}
.field-modal__body {
  display: grid;
  grid-template-areas: "ttl" "img" "txt" "btn";
  align-content: start;
  gap: 20px;
  min-height: 0;
  overflow-y: auto;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain
}
.field-modal__ttl {
  grid-area: ttl
}
.field-modal__img {
  grid-area: img;
  justify-self: center;
  align-self: center;
  width: 100%;
  max-width: 420px
}
.field-modal__img img {
  width: 100%;
  height: auto
}
.field-modal__txt {
  grid-area: txt;
  line-height: 1.8
}
.field-modal__btns {
  display: flex;
  flex-wrap: wrap;
  grid-area: btn;
  align-items: start;
  gap: 10px
}
.faq__block {
  display: grid;
  gap: 24px
}
.faq__dl {
  display: grid;
  gap: 16px;
  border-bottom: 1px solid rgba(0,0,0,.2);
  padding-bottom: 24px
}
.faq__dl > dt {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 18px
}
.faq__dl > dd {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px
}
.faq__detail {
  display: grid;
  gap: 12px
}
.faq__detail > dt {
  font-weight: 600;
  font-size: 20px;
  color: #dc1e37
}
.faq__detail > dd {
  line-height: 1.8
}
.faq .is-unit {
  width: 16px;
  font-family: DINNextLTPro-Regular,serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  text-align: center;
  color: #dc1e37
}
@media screen and (min-width:661px) {
  .field__block {
    width: 84.2vw
  }
  .field__links {
    gap: 1.875vw
  }
  .field__link {
    gap: .78125vw;
    font-size: 1.25vw;
    border-radius: .625vw;
    padding: 1.953125vw .78125vw .78125vw
  }
  .field__link .is-unit {
    width: 3.125vw;
    font-size: 1.875vw
  }
  .field__link::after {
    width: 1.5625vw
  }
  .field__btn {
    gap: .46875vw;
    width: 15.234375vw;
    height: 3.59375vw;
    font-size: 1.5625vw
  }
  .field__btn:nth-child(1) {
    top: 53.4vw;
    left: 32vw
  }
  .field__btn:nth-child(2) {
    top: 47.8vw;
    left: 56.3vw
  }
  .field__btn:nth-child(3) {
    top: 104vw;
    left: 31.1vw
  }
  .field__btn:nth-child(4) {
    top: 105.8vw;
    left: 62.3vw
  }
  .field__btn:nth-child(5) {
    top: 134.1vw;
    left: 49.6vw
  }
  .field__btn:nth-child(6) {
    top: 189.1vw;
    left: 40.3vw
  }
  .field__btn:nth-child(7) {
    top: 222vw;
    left: 42.3vw
  }
  .field__btn::after {
    width: .625vw
  }
  .field__btn-icon::before {
    width: 1.953125vw
  }
  .field-modal {
    width: 85vw;
    max-width: 1092px;
    max-height: 90vh
  }
  .field-modal__container {
    padding: min(40px,3vw) min(94px,9.4vw) min(40px,3vw) min(40px,3vw)
  }
  .field-modal__close {
    width: min(34px,2.6vw);
    top: min(40px,3vw);
    right: min(40px,3vw)
  }
  .field-modal__body {
    grid-template-columns: 1fr 43.842%;
    grid-template-areas: "ttl img" "txt img" "btn img";
    row-gap: 24px;
    column-gap: 20px
  }
  .faq__block {
    gap: 40px
  }
  .faq__dl {
    gap: 24px;
    padding-bottom: 40px
  }
  .faq__dl > dt {
    gap: 16px;
    font-size: 22px
  }
  .faq__dl > dd {
    gap: 16px
  }
  .faq__detail {
    gap: 21px
  }
  .faq__detail > dt {
    font-size: 28px
  }
  .faq .is-unit {
    width: 21px;
    font-size: 32px
  }
}
@media (any-hover:hover) {
  .field__btn {
    transition: opacity .3s ease-out
  }
  .field__btn:hover {
    opacity: .7
  }
}