@charset "UTF-8";
/*
* top.css
*
*/
/**
  画像トリミング
*/
/* --------------------------------
  top
-------------------------------- */
/* --------------------------------
  Font
-------------------------------- */
.un_top_main {
  padding-top: 0;

  --_hover-in-duration: 0.3s;
  --_hover-out-duration: 0.25s;
  --_hover-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.un_ttl_en__xl {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: var(--bb-recruit-font-family-en-norman);
  font-size: 3rem;

  font-synthesis: none;
  font-variation-settings: "wght" 700;
}
@media (min-width: 768px) {
  .un_ttl_en__xl {
    font-size: 6.875rem;
  }
}

.un_ttl_en__lg {
  text-transform: uppercase;
  font-family: var(--bb-recruit-font-family-en-norman);
  font-size: 2.625rem;
  font-weight: 700;

  font-synthesis: none;
}
@media (min-width: 768px) {
  .un_ttl_en__lg {
    font-size: 4.5rem;
  }
}

.un_ttl_en {
  text-transform: uppercase;
  font-family: var(--bb-recruit-font-family-en-norman);
  font-size: 3rem;

  font-synthesis: none;
  font-variation-settings: "wght" 700;
}
@media (min-width: 768px) {
  .un_ttl_en {
    font-size: 4rem;
  }
}

.un_ttl_en__sm {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--bb-recruit-font-family-en-norman);
  font-size: 0.875rem;

  font-synthesis: none;
  font-variation-settings: "wght" 700;
}
@media (min-width: 768px) {
  .un_ttl_en__sm {
    font-size: 1.5rem;
  }
}

.un_ttl_en__xs {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--bb-recruit-font-family-en-norman);
  font-size: 0.75rem;

  font-synthesis: none;
  font-variation-settings: "wght" 700;
}
@media (min-width: 768px) {
  .un_ttl_en__xs {
    font-size: 0.75rem;
  }
}

.un_ttl__xl {
  font-family: var(--bb-recruit-font-family-mincho);
  font-size: 1.75rem;
  font-weight: 600;
}
@media (min-width: 768px) {
  .un_ttl__xl {
    font-size: 3rem;
  }
}

.un_ttl__lg {
  font-family: var(--bb-recruit-font-family-mincho);
  font-size: 1.25rem;
  font-weight: 600;
}
@media (min-width: 768px) {
  .un_ttl__lg {
    font-size: 1.5rem;
  }
}

.un_ttl {
  font-family: var(--bb-recruit-font-family-mincho);
  font-size: 1rem;
  font-weight: 600;
}
@media (min-width: 768px) {
  .un_ttl {
    font-size: 1.25rem;
  }
}

.un_txt__xl {
  letter-spacing: -0.04em;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .un_txt__xl {
    font-size: 1.375rem;
  }
}

.un_txt__lg {
  font-size: 1.25rem;
  font-weight: 600;
}
@media (min-width: 768px) {
  .un_txt__lg {
    font-size: 1.5rem;
  }
}

.un_txt__md {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .un_txt__md {
    font-size: 1.125rem;
    line-height: 1.5;
  }
}

.un_txt__sm {
  font-size: 0.875rem;
  font-weight: 400;
}
@media (min-width: 768px) {
  .un_txt__sm {
    font-size: 1rem;
  }
}

.un_txt__xs {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .un_txt__xs {
    font-size: 0.75rem;
  }
}

.un_heading {
  display: flex;
  flex-direction: column;

  gap: 0.5rem;
}
@media (min-width: 768px) {
  .un_heading {
    align-items: center;
    flex-direction: row;

    gap: 1.125rem;
  }
}
@media (min-width: 768px) {
  .un_heading h3 {
    margin-block-start: 1.125rem;
  }
}

/*------
  Base Setting
-----*/
.swiper-button-prev svg,
.swiper-button-next svg {
  display: none;
}

#top .bb_recruit_container {
  padding-top: 0 !important;
}

/* KV */
.un_kv {
  position: relative;

  margin-block: 0 6.9444444444vw;
}
@media (min-width: 768px) {
  .un_kv {
    margin-block: 0 6.9444444444vw;
    padding-block-start: 0;
  }
}
.un_kv::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #d6d2cb;

  aspect-ratio: 72/5;
  translate: 0 100%;
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

.un_kv_bg {
  overflow-x: hidden;
  position: sticky;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.un_kv_bg_mask {
  clip-path: polygon(0% calc(6.9400672112vw + 93px), 100% 93px, 100% calc(100svh - 6.9400672112vw - 72px), 0% calc(100svh - 72px));
}
@media (min-width: 768px) {
  .un_kv_bg_mask {
    clip-path: polygon(0% calc(6.9400672112vw + 56px), 100% 56px, 100% calc(100vh - 6.9400672112vw - 40px), 0% calc(100vh - 40px));
  }
}

[data-kv-bg-filter] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: color-mix(in srgb, #42362c 80%, transparent);

  mix-blend-mode: multiply;
}

.un_kv_bg_blur_01,
.un_kv_bg_blur_02 {
  position: absolute;

  filter: blur(38px);
}
.un_kv_bg_blur_01 {
  top: 2.5rem;
  left: 0;
  width: 29.75rem;
  height: 11.5625rem;
  background-image: linear-gradient(to right, var(--bb-recruit-color-white) 0%, var(--bb-recruit-color-white) 10%, transparent);
}
@media (min-width: 768px) {
  .un_kv_bg_blur_01 {
    top: 4.375rem;
    left: -5rem;
    width: 46.375rem;
    height: 21.5625rem;
  }
}

@media (min-width: 768px) {
  .un_kv_bg_blur_02 {
    top: -4.875rem;
    right: -6.4375rem;
    left: auto;
    width: 21.875rem;
    height: 100%;
    background-image: linear-gradient(to left, var(--bb-recruit-color-white) 0%, transparent);
  }
}

.un_kv_swiper {
  z-index: -1 !important;
  height: 100%;
}

.un_kv_swiper .swiper-slide {
  opacity: 0;
  width: 100%;
  height: 100%;
}
.un_kv_swiper .swiper-slide img {
  width: 100vw;
  height: 100vh;
  transition: clip-path 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);

  -o-object-fit: cover;

     object-fit: cover;
}
@media (min-width: 768px) {
  .un_kv_swiper .swiper-slide img {
    transition: clip-path 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
}
.un_kv_swiper .swiper-slide.swiper-slide-next img {
  clip-path: polygon(0% 0%, 0% 0%, -19.4380309138vh 100%, -19.4380309138vh 100%);
}
.un_kv_swiper .swiper-slide.swiper-slide-active img {
  clip-path: polygon(0% 0%, calc(19.4380309138vh + 100%) 0%, 100% 100%, 0% 100%);
}

.un_kv_block {
  width: 100%;
  height: 100svh;
}
.un_kv_block__top {
  position: fixed;
  top: 0;
  left: 0;
}
.un_kv_block__bottom {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: 18.75rem;
  height: 38.125rem;
  text-align: center;
}
@media (min-width: 768px) {
  .un_kv_block__bottom {
    height: 48rem;
  }
}

.un_kv_heading {
  position: absolute;
  top: 50px;
  left: 50%;
  white-space: nowrap;

  translate: -50% 0;
}
@media (min-width: 768px) {
  .un_kv_heading {
    top: calc(1.5rem + (100vw - 1024px) * 0.07);
    left: 3.75rem;

    translate: 0 0;
  }
}
@media (min-width: 1024px) {
  .un_kv_heading {
    top: calc(0.0625rem + (100vw - 1440px) * 0.07);
    left: 115px;
  }
}
.un_kv_heading p:first-child {
  margin-top: 0.25rem;
  white-space: nowrap;
  letter-spacing: -0.05em;
  font-size: 5.25rem;
  line-height: 1.15;

  font-variation-settings: "wght" 800;
}
@media (min-width: 768px) {
  .un_kv_heading p:first-child {
    margin-top: 1.75rem;
    margin-bottom: 1.125rem;
    letter-spacing: -0.04em;
    font-size: 8.125rem;
  }
}
@media (min-width: 1024px) {
  .un_kv_heading p:first-child {
    margin-top: 2.5rem;
    margin-bottom: 2.125rem;
    font-size: 11.625rem;
  }
}
.un_kv_heading p:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0.375rem;
  left: -0.375rem;
  transform: skew(-15deg) rotate(-4deg);
  letter-spacing: -0.08em;
  font-size: 1.4375rem;
}
@media (min-width: 768px) {
  .un_kv_heading p:nth-child(2) {
    justify-content: start;
    top: -1.25rem;
    left: -1rem;
    letter-spacing: 0.07em;
    font-size: 1.875rem;

    font-feature-settings: "palt" 1;
  }
}
@media (min-width: 1024px) {
  .un_kv_heading p:nth-child(2) {
    top: -1.5625rem;
    left: -0.875rem;
    font-size: 2.375rem;
  }
}
.un_kv_heading p:nth-child(2) span:first-child {
  display: flex;
  align-items: center;
  position: relative;
}
.un_kv_heading p:nth-child(2) span:first-child::before {
  content: "";
  display: block;
  position: relative;
  width: 1.875rem;
  height: 0.0625rem;
  background-color: var(--bb-recruit-font-color);

  margin-inline-end: 0.25rem;
}
@media (min-width: 768px) {
  .un_kv_heading p:nth-child(2) span:first-child::before {
    width: 3.75rem;

    margin-inline-end: 0.625rem;
    translate: 0rem 0.1875rem;
  }
}

.un_kv_description {
  position: absolute;
  bottom: 6.25rem;
  left: 1.5rem;
  max-width: 15.625rem;
  letter-spacing: 0.02em;
  color: var(--bb-recruit-font-color-gold-dark);
  font-size: 0.625rem;
  font-weight: bold;
  line-height: 1.6;
}
@media (min-width: 768px) {
  .un_kv_description {
    bottom: 6.5625rem;
    left: 2.5rem;
    max-width: 21.25rem;
    font-size: 0.9375rem;
    line-height: 1.8;
  }
}
@media (min-width: 1024px) {
  .un_kv_description {
    bottom: 6.5625rem;
    left: 7.5rem;
  }
}

.un_kv_anchor {
  position: absolute;
  top: 9.375rem;
  right: 2.3125rem;
  height: 3.125rem;
}
.un_kv_anchor::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1.5625rem;
  width: 0.125rem;
  height: 18.75rem;
  background-color: var(--bb-recruit-font-color);
}
.un_kv_anchor::after {
  content: "";
  position: absolute;
  top: 18.0625rem;
  left: -1.5625rem;
  width: 0.125rem;
  height: 0.75rem;
  transform-origin: bottom;
  background-color: var(--bb-recruit-font-color);

  rotate: -45deg;
}
.un_kv_anchor ul {
  display: flex;
  flex-direction: column;

  gap: 1.3125rem;
}
.un_kv_anchor ul a {
  opacity: 1;
  transition: opacity var(--_hover-out-duration) var(--_hover-ease);
}
@media (min-width: 768px) {
  .un_kv_anchor ul a:focus-visible {
    opacity: 0.5;
    transition: opacity var(--_hover-in-duration) var(--_hover-ease);
  }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .un_kv_anchor ul a:hover {
    opacity: 0.5;
    transition: opacity var(--_hover-in-duration) var(--_hover-ease);
  }
}
@media (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
  .un_kv_anchor ul a:hover {
    opacity: 0.5;
    transition: opacity var(--_hover-in-duration) var(--_hover-ease);
  }
}

.un_kv_bannerBox {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;

  gap: 1.125rem;
  padding-inline-start: 1.5rem;
  padding-block-end: 1.25rem;
}
@media (min-width: 768px) {
  .un_kv_bannerBox {
    max-width: 100%;

    margin-inline: auto;
    padding-inline: 2.5rem;
    gap: 1.5rem;
    padding-block-end: 2rem;
  }
}
@media (min-width: 1024px) {
  .un_kv_bannerBox {
    max-width: 75rem;

    padding-inline: 7.5rem;
  }
}

.un_kv_swiper_pagination {
  display: inline-flex;
  justify-content: end;

  margin-inline-start: auto;
  margin-inline-end: 1.5rem;
  gap: 0.375rem;
}
@media (min-width: 768px) {
  .un_kv_swiper_pagination {
    gap: 0.5rem;
    margin-inline-end: 0;
  }
}
.un_kv_swiper_pagination .swiper-pagination-bullet {
  display: block;
  overflow: hidden;
  position: relative;
  width: 0.625rem;
  height: 0.125rem;
  transition: width var(--_hover-in-duration) var(--_hover-ease);
  background-color: #bbb;
}
@media (min-width: 768px) {
  .un_kv_swiper_pagination .swiper-pagination-bullet {
    width: 1.25rem;
  }
}
.un_kv_swiper_pagination .swiper-pagination-bullet-active {
  width: 1.25rem;
}
@media (min-width: 768px) {
  .un_kv_swiper_pagination .swiper-pagination-bullet-active {
    width: 2.5rem;
  }
}
.un_kv_swiper_pagination .swiper-pagination-bullet-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left;
  animation: kv-pagination-bar 6s linear forwards;
  background-color: var(--bb-recruit-color-red);

  scale: 0 1;
}
@keyframes kv-pagination-bar {
  to {
    scale: 1 1;
  }
}

.un_kv_banner {
  display: flex;
  opacity: 1;
  align-items: center;
  position: relative;
  padding: 0.375rem 1.5rem 0.375rem 0.625rem;
  width: 100%;
  transition: opacity var(--_hover-out-duration) var(--_hover-ease);
  background-color: var(--bb-recruit-bg-color-white);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .un_kv_banner {
    padding: 0.75rem 1.5rem;
    width: 36.8125rem;
  }
}
@media (min-width: 768px) {
  .un_kv_banner:focus-visible {
    opacity: 0.5;
    transition: opacity var(--_hover-in-duration) var(--_hover-ease);
  }
  .un_kv_banner:focus-visible::after {
    transition: translate var(--_hover-in-duration) var(--_hover-ease);

    translate: 0.25rem 0;
  }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .un_kv_banner:hover {
    opacity: 0.5;
    transition: opacity var(--_hover-in-duration) var(--_hover-ease);
  }
  .un_kv_banner:hover::after {
    transition: translate var(--_hover-in-duration) var(--_hover-ease);

    translate: 0.25rem 0;
  }
}
@media (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
  .un_kv_banner:hover {
    opacity: 0.5;
    transition: opacity var(--_hover-in-duration) var(--_hover-ease);
  }
  .un_kv_banner:hover::after {
    transition: translate var(--_hover-in-duration) var(--_hover-ease);

    translate: 0.25rem 0;
  }
}
.un_kv_banner::after {
  content: "";
  display: inline;
  position: absolute;
  right: 1.5rem;
  margin-left: auto;
  width: 0.375rem;
  height: 0.8125rem;
  transition: translate var(--_hover-out-duration) var(--_hover-ease);
  background-image: url("/recruit/assets/img/common/icon_arw.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media (min-width: 768px) {
  .un_kv_banner::after {
    right: 1.5rem;
    width: 0.4375rem;
    height: 1rem;
  }
}

.un_kv_banner_tag {
  text-transform: uppercase;
}

.un_kv_banner_date {
  margin-inline-start: 0.5625rem;
}
@media (min-width: 768px) {
  .un_kv_banner_date {
    margin-inline-start: 1.1875rem;
  }
}

.un_kv_banner_txtBox {
  overflow: hidden;
  position: relative;
  width: 100%;

  margin-inline-start: 0.5625rem;
}
@media (min-width: 768px) {
  .un_kv_banner_txtBox {
    margin-inline-start: 0.375rem;
  }
}
.un_kv_banner_txtBox::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2.5rem;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--bb-recruit-bg-color-white));
}

@media (min-width: 768px) {
  .un_state hgroup h2 {
    margin-inline-start: 3.75rem;
  }
}
@media (max-width: 767.98px) {
  .un_state hgroup h2 {
    letter-spacing: 0;

    margin-inline-start: 0.5em;
  }
}
.un_state hgroup p {
  letter-spacing: 0.18em;
  text-transform: none;

  margin-block-start: 0.25rem;
}
@media (min-width: 768px) {
  .un_state hgroup p {
    letter-spacing: 0.07em;

    margin-block-start: -0.0625rem;
  }
}

.un_state_txt {
  display: flex;
  flex-direction: column;
  letter-spacing: 0.18em;
  font-weight: 400;
  line-height: 2;

  gap: 1.25rem;
  margin-block-start: 1.625rem;
}
@media (min-width: 768px) {
  .un_state_txt {
    letter-spacing: 0.25em;
    line-height: 2.4;

    margin-block-start: 2.5625rem;
    gap: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .un_news {
    padding-block-start: 3.9375rem;
  }
}

.un_news_inner {
  padding-block: 0;
}

.un_news_body {
  margin-block-start: 1rem;
}

.un_news_btnBox {
  display: flex;
  justify-content: center;

  margin-block-start: 2.875rem;
}
@media (min-width: 768px) {
  .un_news_btnBox {
    margin-block-start: 4.0625rem;
  }
}

.un_pickup {
  padding-block-start: 5.5rem;
}
@media (min-width: 768px) {
  .un_pickup {
    padding-block-start: 2.625rem;
  }
}

.un_pickup_inner {
  padding-block: 0;
}

.un_pickup_body {
  margin-block-start: 2.25rem;
}
@media (min-width: 768px) {
  .un_pickup_body {
    margin-block-start: 1.5rem;
  }
}

.un_pickup_slide {
  display: inline-block;

  aspect-ratio: 373/210;
}
@media (min-width: 768px) {
  .un_pickup_slide {
    width: 23.3125rem !important;
  }
}

.un_pickup_item {
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  .un_pickup_item:focus-visible img {
    transition: scale var(--_hover-in-duration) var(--_hover-ease);

    scale: 1.05;
  }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .un_pickup_item:hover img {
    transition: scale var(--_hover-in-duration) var(--_hover-ease);

    scale: 1.05;
  }
}
@media (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
  .un_pickup_item:hover img {
    transition: scale var(--_hover-in-duration) var(--_hover-ease);

    scale: 1.05;
  }
}

.un_pickup_item_img {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.un_pickup_item_img img {
  width: 100%;
  height: 100%;
  transition: scale var(--_hover-out-duration) var(--_hover-ease);
  transform-origin: center;

  -o-object-fit: cover;

     object-fit: cover;
}

[data-swiper-pickup].is-unMounted {
  position: relative;

  padding-inline: 1.5rem;
}
@media (min-width: 768px) {
  [data-swiper-pickup].is-unMounted {
    padding-inline: 2.5rem;
  }
}
@media (min-width: 1024px) {
  [data-swiper-pickup].is-unMounted {
    max-width: 85rem;

    padding-inline: 5rem;
    margin-inline: auto;
  }
}
[data-swiper-pickup].is-unMounted .swiper-wrapper {
  display: grid;

  gap: 2.5rem;
}
@media (min-width: 768px) {
  [data-swiper-pickup].is-unMounted .swiper-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(min(18.75rem, 100%), 1fr));
  }
}
[data-swiper-pickup].is-unMounted .swiper-slide {
  flex: none;
  width: auto !important;
}
[data-swiper-pickup].is-unMounted .un_pickup_swiper_controller {
  display: none;
}

.un_pickup_swiper_controller {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-block-start: 1.125rem;
  gap: 2.9375rem;
}
@media (min-width: 768px) {
  .un_pickup_swiper_controller {
    justify-content: end;

    margin-inline: auto;
    padding-inline: 2.5rem;
    padding-block-start: 0.625rem;
  }
}
@media (min-width: 1024px) {
  .un_pickup_swiper_controller {
    max-width: 90rem;

    padding-inline: 7.5rem;
  }
}

.un_pickup_swiper_pagination {
  display: flex;
  width: 7.5rem;
  height: 0.125rem;
  background-color: #bbb;
}
.un_pickup_swiper_pagination .swiper-pagination-bullet {
  width: 100%;
  height: 0.125rem;
  transition: scale var(--_hover-out-duration) var(--_hover-ease);
  transform-origin: right;
  background-color: var(--bb-recruit-color-red);

  scale: 0 1;
}
.un_pickup_swiper_pagination .swiper-pagination-bullet-active {
  transform-origin: left;

  scale: 1 1;
}
.un_pickup_swiper_pagination.js-prev .swiper-pagination-bullet {
  transform-origin: left;
}
.un_pickup_swiper_pagination.js-prev .swiper-pagination-bullet-active {
  transform-origin: right;
}

.un_pickup_swiper_btn {
  display: flex;

  gap: 3.8125rem;
}
.un_pickup_swiper_btn button {
  width: 1.25rem;
  height: 2.6875rem;
}
.un_pickup_swiper_btn button::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transition: transform var(--_hover-out-duration) var(--_hover-ease);
  background-image: url("/recruit/assets/img/common/icon_arw.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media (min-width: 768px) {
  .un_pickup_swiper_btn button:focus-visible::after {
    transition: transform var(--_hover-in-duration) var(--_hover-ease);
    transform: translateX(0.25rem);
  }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .un_pickup_swiper_btn button:hover::after {
    transition: transform var(--_hover-in-duration) var(--_hover-ease);
    transform: translateX(0.25rem);
  }
}
@media (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
  .un_pickup_swiper_btn button:hover::after {
    transition: transform var(--_hover-in-duration) var(--_hover-ease);
    transform: translateX(0.25rem);
  }
}
.un_pickup_swiper_btn .swiper-button-prev {
  transform: rotate(180deg);
}

.un_about_kvWrapper {
  overflow: clip;
  position: relative;

  margin-block-start: 6rem;
}
@media (min-width: 768px) {
  .un_about_kvWrapper {
    margin-block: 0 4.0625rem;
  }
}

.un_about_kvContainer {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;

  aspect-ratio: 360/600;
}
@media (min-width: 768px) {
  .un_about_kvContainer {
    aspect-ratio: 1440/670;
    margin-block-start: 5.4375rem;
    margin-block-end: 0;
  }
}

.un_about_kv {
  position: relative;
  width: 100%;

  aspect-ratio: 360/600;
}
@media (min-width: 768px) {
  .un_about_kv {
    aspect-ratio: 1440/670;
  }
}
.un_about_kv span {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/recruit/assets/img/top/about_kv_img.webp");
  background-repeat: no-repeat;
  background-position: 70% center;
  background-size: cover;

  --slice-range: calc(25 * (100vw / 360));
  --full-height: calc(600 * 100vw / 360);
}
@media (min-width: 768px) {
  .un_about_kv span {
    background-position: center 70%;

    --slice-range: calc(100 * (100vw / 1440));
    --full-height: calc(670 * 100vw / 1440);
  }
}
.un_about_kv span:nth-child(1) {
  display: block;

  clip-path: polygon(0% var(--slice-range), 16.5% calc(var(--slice-range) * 0.834), 16.5% calc(var(--full-height) - var(--slice-range) * 0.166), 0% var(--full-height));
}
.un_about_kv span:nth-child(2) {
  display: block;

  clip-path: polygon(16.7% calc(var(--slice-range) * 0.834), 33% calc(var(--slice-range) * 0.664), 33% calc(var(--full-height) - var(--slice-range) * 0.332), 16.7% calc(var(--full-height) - var(--slice-range) * 0.166));
}
.un_about_kv span:nth-child(3) {
  display: block;

  clip-path: polygon(33.2% calc(var(--slice-range) * 0.664), 49.8% calc(var(--slice-range) * 0.498), 49.8% calc(var(--full-height) - var(--slice-range) * 0.498), 33.2% calc(var(--full-height) - var(--slice-range) * 0.332));
}
.un_about_kv span:nth-child(4) {
  display: block;

  clip-path: polygon(50% calc(var(--slice-range) * 0.498), 66.5% calc(var(--slice-range) * 0.332), 66.5% calc(var(--full-height) - var(--slice-range) * 0.664), 50% calc(var(--full-height) - var(--slice-range) * 0.498));
}
.un_about_kv span:nth-child(5) {
  display: block;

  clip-path: polygon(66.7% calc(var(--slice-range) * 0.332), 83% calc(var(--slice-range) * 0.166), 83% calc(var(--full-height) - var(--slice-range) * 0.83), 66.7% calc(var(--full-height) - var(--slice-range) * 0.664));
}
.un_about_kv span:nth-child(6) {
  display: block;

  clip-path: polygon(83.2% calc(var(--slice-range) * 0.166), 100% 0, 100% calc(var(--full-height) - var(--slice-range) * 0.996), 83.2% calc(var(--full-height) - var(--slice-range) * 0.83));
}

@media (min-width: 768px) {
  .un_about_txtBox {
    padding-block: 7.5rem 9.5625rem;
  }
}

.un_about_heading {
  position: relative;
}
.un_about_heading h3 {
  position: relative;
}
.un_about_heading h3::before {
  content: "";
  position: absolute;
  bottom: -1.25rem;
  left: 0;
  width: 1.875rem;
  height: 0.125rem;
  background-color: var(--bb-recruit-color-red);
}
@media (min-width: 768px) {
  .un_about_heading h3::before {
    bottom: -0.5rem;
    width: 3.125rem;
  }
}
.un_about_heading p {
  margin-block-start: 2.375rem;
  text-spacing-trim: trim-start;
}
@media (min-width: 768px) {
  .un_about_heading p {
    margin-block-start: 1.875rem;
  }
}

.un_about_txt {
  margin-block-start: 1.5rem;
}
@media (min-width: 768px) {
  .un_about_txt {
    margin-block-start: 1.875rem;
  }
}

.un_about_linkWrapper {
  display: grid;

  margin-block-start: 2.625rem;
  gap: 2rem;
}
@media (min-width: 768px) {
  .un_about_linkWrapper {
    justify-content: center;

    grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
    margin-block-start: 0;
    gap: 2.5rem;
  }
}

.un_about_link {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: -2.5rem;
  width: 100%;
}
@media (min-width: 768px) {
  .un_about_link {
    max-width: 36.25rem;
  }
}
@media (min-width: 768px) {
  .un_about_link:focus-visible .un_about_link_img {
    transition: scale var(--_hover-in-duration) var(--_hover-ease), clip-path var(--_hover-in-duration) var(--_hover-ease);

    --clip-size: 0.625rem;
    scale: 1.05;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .un_about_link:focus-visible .un_about_link_img {
    --clip-size: 1.5625rem;
  }
}
@media (min-width: 768px) {
  .un_about_link:focus-visible .un_about_link_btn::after {
    transition: translate var(--_hover-in-duration) var(--_hover-ease);

    translate: 0.25rem 0;
  }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .un_about_link:hover .un_about_link_img {
    transition: scale var(--_hover-in-duration) var(--_hover-ease), clip-path var(--_hover-in-duration) var(--_hover-ease);

    --clip-size: 0.625rem;
    scale: 1.05;
  }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .un_about_link:hover .un_about_link_img {
    --clip-size: 1.5625rem;
  }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .un_about_link:hover .un_about_link_btn::after {
    transition: translate var(--_hover-in-duration) var(--_hover-ease);

    translate: 0.25rem 0;
  }
}
@media (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
  .un_about_link:hover .un_about_link_img {
    transition: scale var(--_hover-in-duration) var(--_hover-ease), clip-path var(--_hover-in-duration) var(--_hover-ease);

    --clip-size: 0.625rem;
    scale: 1.05;
  }
}
@media (min-width: 768px) and (-ms-high-contrast: none) and (min-width: 768px), (min-width: 768px) and (-ms-high-contrast: active) and (min-width: 768px) {
  .un_about_link:hover .un_about_link_img {
    --clip-size: 1.5625rem;
  }
}
@media (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
  .un_about_link:hover .un_about_link_btn::after {
    transition: translate var(--_hover-in-duration) var(--_hover-ease);

    translate: 0.25rem 0;
  }
}

.un_about_link_imgBox {
  overflow: hidden;
  position: relative;
  width: calc(100% - 2.4375rem);

  aspect-ratio: 273/342;
}
@media (min-width: 768px) {
  .un_about_link_imgBox {
    width: calc(100% - 3.9375rem);

    aspect-ratio: 517/388;
  }
}
.un_about_link_imgBox::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}
.un_about_link_imgBox picture img {
  width: 100%;
  height: 100%;
  transition: scale var(--_hover-out-duration) var(--_hover-ease);

  -o-object-fit: cover;

     object-fit: cover;
}
.un_about_link_imgBox > picture {
  position: absolute;
  top: 0;
  left: 0;

  filter: blur(20px);
}

.un_about_link_img {
  overflow: hidden;
  position: relative;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: scale var(--_hover-out-duration) var(--_hover-ease), clip-path var(--_hover-out-duration) var(--_hover-ease);

  --clip-size: 0.3125rem;
  clip-path: polygon(var(--clip-size) var(--clip-size), calc(100% - var(--clip-size)) var(--clip-size), calc(100% - var(--clip-size)) calc(100% - var(--clip-size)), var(--clip-size) calc(100% - var(--clip-size)));
}
@media (min-width: 768px) {
  .un_about_link_img {
    --clip-size: 0.625rem;
  }
}
.un_about_link_img img {
  -o-object-fit: cover;
     object-fit: cover;
}

.un_about_link_txt {
  display: inline-block;
  flex-grow: 1;
  position: relative;
  z-index: 20;
  bottom: 2.5rem;
  padding: 2rem 1.5rem 1.5rem;
  width: calc(100% - 2.4375rem);
  background-image: linear-gradient(106deg, #636261 0%, #636261 45%, #929292 100%);
  color: var(--bb-recruit-color-white);

  margin-inline-start: 2.4375rem;
}
@media (min-width: 768px) {
  .un_about_link_txt {
    bottom: 2.125rem;
    padding: 2.1875rem 2.5rem 1.9375rem;
    width: calc(100% - 3.9375rem);

    margin-inline-start: 3.9375rem;
  }
}

.un_about_link_deco {
  position: absolute;
  top: -0.625rem;
  right: 0.625rem;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bb-recruit-color-gray-dark);
  font-family: var(--bb-recruit-font-family-en-norman);

  writing-mode: vertical-lr;
  font-synthesis: none;
  font-variation-settings: "wght" 700;
  translate: 0 -100%;
}
@media (min-width: 768px) {
  .un_about_link_deco {
    top: -1rem;
    right: 1.25rem;
    letter-spacing: 0.08em;
    font-size: 1.25rem;
  }
}

.un_about_link_description {
  line-height: 1.6;

  margin-block-start: 0.75rem;
}
@media (min-width: 768px) {
  .un_about_link_description {
    line-height: 1.8;

    margin-block-start: 0.5rem;
  }
}

.un_about_link_btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-transform: uppercase;
  font-family: var(--bb-recruit-font-family-en-norman);
  line-height: 1.3;

  font-synthesis: none;
  font-variation-settings: "wght" 700;
  gap: 0.5rem;
  margin-block-start: 0.625rem;
}
@media (min-width: 768px) {
  .un_about_link_btn {
    font-size: 1rem;

    margin-block-start: 0.6875rem;
  }
}
.un_about_link_btn::after {
  content: "";
  display: block;
  width: 0.375rem;
  height: 0.8125rem;
  transition: translate var(--_hover-out-duration) var(--_hover-ease);
  background-image: url("/recruit/assets/img/common/icon_arw.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  margin-block-start: 0.1875rem;
}
@media (min-width: 768px) {
  .un_about_link_btn::after {
    width: 0.4375rem;
    height: 1rem;

    margin-block-start: 0.0125rem;
  }
}

.un_job {
  overflow: hidden;
  position: relative;

  margin-block-start: 7.25rem;
}
@media (min-width: 768px) {
  .un_job {
    min-height: 41.875rem;

    margin-block-start: 9.375rem;
  }
}
.un_job::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 100%;
  height: 100%;
  background-image: url("/recruit/assets/img/top/job_bg_img_sm.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  translate: -50% 0;
  clip-path: polygon(0% 6.9926811944vw, 100% 0%, 100% calc(100% - 6.9926811944vw), 0% 100%);
  aspect-ratio: 360/741;
}
@media (min-width: 768px) {
  .un_job::before {
    min-height: 41.875rem;
    background-image: url("/recruit/assets/img/top/job_bg_img_lg.webp");

    aspect-ratio: 1440/670;
  }
}

.un_job_inner {
  position: relative;

  padding-block: 8.75rem 6.75rem;
}
@media (min-width: 768px) {
  .un_job_inner {
    display: grid;

    padding-block: 9.375rem 11.125rem;
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1024px) {
  .un_job_inner {
    justify-content: space-between;

    grid-template-columns: 21.875rem 1fr;
    gap: 4.5625rem;
  }
}

.un_job_heading {
  position: relative;
  color: var(--bb-recruit-color-white);
}
.un_job_heading h3 {
  position: relative;
}
@media (min-width: 768px) {
  .un_job_heading h3 {
    padding-inline-start: 1.25rem;
  }
}
.un_job_heading h3::before {
  content: "";
  position: absolute;
  bottom: -1.125rem;
  left: 0;
  width: 1.875rem;
  height: 0.125rem;
  background-color: var(--bb-recruit-color-red);
}
@media (min-width: 768px) {
  .un_job_heading h3::before {
    bottom: -1.875rem;
    width: 3.125rem;
  }
}
.un_job_heading p {
  margin-block-start: 2.25rem;
  text-spacing-trim: trim-start;
}
@media (min-width: 768px) {
  .un_job_heading p {
    margin-block-start: 3.125rem;
  }
}

.un_job_txt {
  color: var(--bb-recruit-color-white);

  margin-block-start: 1.5rem;
}
@media (min-width: 768px) {
  .un_job_txt {
    margin-block-start: 2.375rem;
  }
}

.un_job_linkBox {
  line-height: 1.6;

  margin-block-start: 3.875rem;
}
@media (min-width: 768px) {
  .un_job_linkBox {
    line-height: 1.8;

    margin-block-start: 3.3125rem;
  }
}

.un_job_link {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1.75rem 2.8125rem 1.75rem 0.625rem;
  border-bottom: 0.0625rem solid currentColor;
  color: var(--bb-recruit-color-white);

  gap: 0.1875rem;
}
@media (min-width: 768px) {
  .un_job_link {
    padding: 2rem 3.75rem 2rem 2.125rem;

    gap: 0.75rem;
  }
}
.un_job_link:visited {
  color: var(--bb-recruit-color-white);
}
.un_job_link:hover {
  color: var(--bb-recruit-color-white);
}
.un_job_link:active {
  color: var(--bb-recruit-color-white);
}
.un_job_link:first-child {
  border-top: 0.0625rem solid currentColor;
}
.un_job_link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.8125rem;
  width: 0.9375rem;
  height: 2rem;
  transition: translate var(--_hover-out-duration) var(--_hover-ease);
  background-image: url("/recruit/assets/img/common/icon_arw.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  translate: 0 -50%;
}
@media (min-width: 768px) {
  .un_job_link::before {
    right: 2.5rem;
  }
}
.un_job_link::after {
  content: "";
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--_hover-out-duration) var(--_hover-ease);
  background-image: url("/recruit/assets/img/top/job_filter.svg");
  background-repeat: repeat;
  background-size: 3.125rem 3.125rem;
  pointer-events: none;
}
@media (min-width: 768px) {
  .un_job_link:focus-visible {
    color: var(--bb-recruit-bg-color-white);
  }
  .un_job_link:focus-visible::before {
    transition: translate var(--_hover-in-duration) var(--_hover-ease);

    translate: 0.25rem -50%;
  }
  .un_job_link:focus-visible::after {
    opacity: 1;
    transition: opacity var(--_hover-in-duration) var(--_hover-ease);

    scale: 1 1;
  }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .un_job_link:hover {
    color: var(--bb-recruit-bg-color-white);
  }
  .un_job_link:hover::before {
    transition: translate var(--_hover-in-duration) var(--_hover-ease);

    translate: 0.25rem -50%;
  }
  .un_job_link:hover::after {
    opacity: 1;
    transition: opacity var(--_hover-in-duration) var(--_hover-ease);

    scale: 1 1;
  }
}
@media (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
  .un_job_link:hover {
    color: var(--bb-recruit-bg-color-white);
  }
  .un_job_link:hover::before {
    transition: translate var(--_hover-in-duration) var(--_hover-ease);

    translate: 0.25rem -50%;
  }
  .un_job_link:hover::after {
    opacity: 1;
    transition: opacity var(--_hover-in-duration) var(--_hover-ease);

    scale: 1 1;
  }
}

.un_people {
  position: relative;
  z-index: var(--bb-recruit-base-zIndex);
  background-color: var(--bb-recruit-bg-color-white);

  padding-block-end: 6rem;
  padding-block-start: 6.5rem;
}
@media (min-width: 768px) {
  .un_people {
    padding-block-end: 2.875rem;
    padding-block-start: 6rem;
  }
}
.un_people::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--bb-recruit-bg-color-white);

  aspect-ratio: 1440/100;
  clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
  translate: 0 -99%;
}
.un_people::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6.9926811944vw;
  background-color: var(--bb-recruit-bg-color-white);

  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  translate: 0 99%;
}

.un_people_heading {
  position: relative;
}
.un_people_heading p {
  position: relative;
}
.un_people_heading p::before {
  content: "";
  position: absolute;
  bottom: -1.25rem;
  left: 0;
  width: 1.875rem;
  height: 0.125rem;
  background-color: var(--bb-recruit-color-red);
}
@media (min-width: 768px) {
  .un_people_heading p::before {
    bottom: -0.625rem;
    width: 3.125rem;
  }
}
.un_people_heading h3 {
  margin-block-start: 2.375rem;
  text-spacing-trim: trim-start;
}
@media (min-width: 768px) {
  .un_people_heading h3 {
    margin-block-start: 2.125rem;
  }
}

.un_people_txtBlock {
  display: flex;
  flex-direction: column;
  z-index: 10;

  padding-block: 0;
  gap: 1.375rem;
}
@media (min-width: 768px) {
  .un_people_txtBlock {
    gap: 2.375rem;
  }
}

.un_people_swiper {
  z-index: 1;

  margin-block: -1.875rem 0;
  padding-block: 3.75rem 0 !important;
}
@media (min-width: 768px) {
  .un_people_swiper {
    margin-block: 0.375rem 2.4375rem;
    margin-block: -5rem 0;
    padding-block: 9.75rem 0 !important;
  }
}
.un_people_swiper .swiper-slide {
  will-change: transform;
  translate: 0 0 0;
}

[data-swiper-people].is-unMounted {
  position: relative;

  padding-inline: 1.5rem;
}
@media (min-width: 768px) {
  [data-swiper-people].is-unMounted {
    padding-inline: 0;
  }
}
[data-swiper-people].is-unMounted .swiper-wrapper {
  display: grid;

  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  [data-swiper-people].is-unMounted .swiper-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1100px) {
  [data-swiper-people].is-unMounted .swiper-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}
[data-swiper-people].is-unMounted .swiper-slide {
  flex: none;
  width: auto !important;
}
[data-swiper-people].is-unMounted .swiper-slide:nth-child(2) {
  transform: translate(0, -1.875rem);
}
@media (min-width: 768px) {
  [data-swiper-people].is-unMounted .swiper-slide:nth-child(2) {
    transform: translate(0, -2.5rem);
  }
}
[data-swiper-people].is-unMounted .swiper-slide:nth-child(3) {
  transform: translate(0, -3.75rem);
}
@media (min-width: 768px) {
  [data-swiper-people].is-unMounted .swiper-slide:nth-child(3) {
    transform: translate(0, -5rem);
  }
}
[data-swiper-people].is-unMounted .swiper-slide:nth-child(4) {
  transform: translate(0, -5.625rem);
}
@media screen and (min-width: 1100px) {
  [data-swiper-people].is-unMounted .swiper-slide:nth-child(4) {
    transform: translate(0, -7.5rem);
  }
}
[data-swiper-people].is-unMounted .un_people_swiper_controller {
  display: none;
}

.un_people_swiper_controller {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-block-start: 2rem;
  gap: 2.1875rem;
}
@media (min-width: 768px) {
  .un_people_swiper_controller {
    justify-content: end;

    margin-inline: auto;
    padding-inline: 2.5rem;
    margin-block-start: 0.5625rem;
    gap: 2.9375rem;
  }
}
@media (min-width: 1024px) {
  .un_people_swiper_controller {
    max-width: 90rem;

    padding-inline: 7.5rem;
  }
}

.un_people_swiper_pagination {
  display: flex;
  width: 7.5rem;
  height: 0.125rem;
  background-color: #bbb;
}
.un_people_swiper_pagination .swiper-pagination-bullet {
  width: 100%;
  height: 0.125rem;
  transition: scale var(--_hover-in-duration) var(--_hover-ease);
  transform-origin: right;
  background-color: var(--bb-recruit-color-red);

  scale: 0 1;
}
.un_people_swiper_pagination .swiper-pagination-bullet-active {
  transform-origin: left;

  scale: 1 1;
}
.un_people_swiper_pagination.js-prev .swiper-pagination-bullet {
  transform-origin: left;
}
.un_people_swiper_pagination.js-prev .swiper-pagination-bullet-active {
  transform-origin: right;
}

.un_people_swiper_btn {
  display: flex;

  gap: 3.8125rem;
}
.un_people_swiper_btn button {
  width: 1.25rem;
  height: 2.6875rem;
}
@media (min-width: 768px) {
  .un_people_swiper_btn button:focus-visible::after {
    transition: translate var(--_hover-in-duration) var(--_hover-ease);

    translate: 0.25rem 0;
  }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .un_people_swiper_btn button:hover::after {
    transition: translate var(--_hover-in-duration) var(--_hover-ease);

    translate: 0.25rem 0;
  }
}
@media (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
  .un_people_swiper_btn button:hover::after {
    transition: translate var(--_hover-in-duration) var(--_hover-ease);

    translate: 0.25rem 0;
  }
}
.un_people_swiper_btn button::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transition: translate var(--_hover-out-duration) var(--_hover-ease);
  background-image: url("/recruit/assets/img/common/icon_arw.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.un_people_swiper_btn .swiper-button-prev {
  transform: rotate(180deg);
}

.un_people_swiper_autoPlay {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
}
.un_people_swiper_autoPlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--_hover-out-duration) var(--_hover-ease);
  background-image: url("/recruit/assets/img/common/icon_play.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem 1.25rem;
}
.un_people_swiper_autoPlay::after {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--_hover-out-duration) var(--_hover-ease);
  background-image: url("/recruit/assets/img/common/icon_pause.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.9375rem 1.25rem;
}
.un_people_swiper_autoPlay[data-swiper-people-is-play=true]::before {
  opacity: 0;
  transition: opacity var(--_hover-in-duration) var(--_hover-ease);
}
.un_people_swiper_autoPlay[data-swiper-people-is-play=true]::after {
  opacity: 1;
  transition: opacity var(--_hover-in-duration) var(--_hover-ease);
}
.un_people_swiper_autoPlay[data-swiper-people-is-play=false]::before {
  opacity: 1;
  transition: opacity var(--_hover-in-duration) var(--_hover-ease);
}
.un_people_swiper_autoPlay[data-swiper-people-is-play=false]::after {
  opacity: 0;
  transition: opacity var(--_hover-in-duration) var(--_hover-ease);
}

.un_people_btnBox {
  display: flex;
  justify-content: center;

  margin-block-start: 2.375rem;
}
@media (min-width: 768px) {
  .un_people_btnBox {
    margin-block-start: 2.4375rem;
  }
}

.un_work {
  position: relative;

  padding-block-start: 6.5rem;
}
@media (min-width: 768px) {
  .un_work {
    padding-block-start: 7.5rem;
  }
}

.un_work_inner {
  position: relative;

  padding-block: 2.625rem 5rem;
}
@media (min-width: 768px) {
  .un_work_inner {
    padding-block: 5.375rem 2.875rem;
    gap: 1.25rem;
  }
}
@media screen and (min-width: 1200px) {
  .un_work_inner {
    display: grid;
    align-items: center;

    grid-template-columns: 20.625rem 1fr;
  }
}

@media (min-width: 768px) {
  .un_work_txtBox {
    min-width: 21.875rem;
  }
}

.un_work_heading {
  position: relative;
}
.un_work_heading h3 {
  position: relative;
  line-height: 1;
}
.un_work_heading h3::before {
  content: "";
  position: absolute;
  bottom: -1.6875rem;
  left: 0;
  width: 1.875rem;
  height: 0.125rem;
  background-color: var(--bb-recruit-color-red);
}
@media (min-width: 768px) {
  .un_work_heading h3::before {
    bottom: -2.1875rem;
    width: 3.125rem;
  }
}
.un_work_heading p {
  margin-block-start: 2.75rem;
  text-spacing-trim: trim-start;
}
@media (min-width: 768px) {
  .un_work_heading p {
    margin-block-start: 3.75rem;
  }
}

.un_work_txt {
  margin-block-start: 1.5rem;
}
@media (min-width: 768px) {
  .un_work_txt {
    margin-block-start: 2.375rem;
  }
}

.un_work_linkBox {
  display: flex;
  flex-direction: column;

  gap: 1.5rem;
  margin-block-start: 2.5rem;
}
@media (min-width: 768px) {
  .un_work_linkBox {
    flex-direction: row;
    justify-content: center;

    margin-block-start: 1.4375rem;
    margin-inline: auto;
    gap: 2.5rem;
  }
}
@media screen and (min-width: 1200px) {
  .un_work_linkBox {
    justify-content: end;

    margin-inline: 0;
    margin-block-start: 0;
    gap: max(min(2.5rem, 50vw - 720px + 2.5rem), 1.5rem);
  }
}
.un_work_linkBox img {
  width: 100%;
  height: 100%;

  -o-object-fit: cover;

     object-fit: cover;
}

.un_work_link {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;

  aspect-ratio: 1;
  clip-path: polygon(3.8125rem 0%, 100% 0%, 100% calc(100% - 3.8125rem), calc(100% - 3.8125rem) 100%, 0% 100%, 0% 3.8125rem);
}
@media (min-width: 768px) {
  .un_work_link {
    max-width: 23.3125rem;

    clip-path: polygon(4.5625rem 0%, 100% 0%, 100% calc(100% - 4.5625rem), calc(100% - 4.5625rem) 100%, 0% 100%, 0% 4.5625rem);
  }
}
.un_work_link:visited {
  color: var(--bb-recruit-color-black);
}
@media (min-width: 768px) {
  .un_work_link:focus-visible .un_work_link_img {
    transition: scale var(--_hover-in-duration) var(--_hover-ease);

    scale: 1.05;
  }
  .un_work_link:focus-visible .un_work_link_btn::after {
    transition: translate var(--_hover-in-duration) var(--_hover-ease);

    translate: 0.25rem 0;
  }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .un_work_link:hover .un_work_link_img {
    transition: scale var(--_hover-in-duration) var(--_hover-ease);

    scale: 1.05;
  }
  .un_work_link:hover .un_work_link_btn::after {
    transition: translate var(--_hover-in-duration) var(--_hover-ease);

    translate: 0.25rem 0;
  }
}
@media (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
  .un_work_link:hover .un_work_link_img {
    transition: scale var(--_hover-in-duration) var(--_hover-ease);

    scale: 1.05;
  }
  .un_work_link:hover .un_work_link_btn::after {
    transition: translate var(--_hover-in-duration) var(--_hover-ease);

    translate: 0.25rem 0;
  }
}

.un_work_link_img {
  position: absolute;
  z-index: -1;
  left: 0;
  width: 100%;
  height: 0;
  height: 100%;
  transition: scale var(--_hover-out-duration) var(--_hover-ease);

  aspect-ratio: 1;
}
@media (min-width: 768px) {
  .un_work_link_img {
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.un_work_link_img::before {
  content: "";
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, transparent, #322b27 100%);
}

.un_work_link_txtBox {
  margin-top: auto;
  padding-bottom: 1rem;
  color: var(--bb-recruit-color-white);
  line-height: 1.6;

  padding-inline: 1.3125rem 3.8125rem;
}
@media (min-width: 768px) {
  .un_work_link_txtBox {
    padding-bottom: 1.0625rem;

    padding-inline: 1.5625rem 4.5625rem;
  }
}
.un_work_link_txtBox p:first-child {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.1;
}
@media (min-width: 768px) {
  .un_work_link_txtBox p:first-child {
    font-size: 1.375rem;
  }
}

.un_work_link_btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-family: var(--bb-recruit-font-family-en-norman);
  line-height: 1.3;

  font-synthesis: none;
  font-variation-settings: "wght" 700;
  margin-block-start: 0.5rem;
  gap: 0.41875rem;
}
@media (min-width: 768px) {
  .un_work_link_btn {
    font-size: 1rem;

    gap: 0.5rem;
    margin-block-start: 0.59375rem;
  }
}
.un_work_link_btn::after {
  content: "";
  display: block;
  width: 0.375rem;
  height: 0.8125rem;
  transition: translate var(--_hover-out-duration) var(--_hover-ease);
  background-image: url("/recruit/assets/img/common/icon_arw.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  margin-block-start: 0.1875rem;
}
@media (min-width: 768px) {
  .un_work_link_btn::after {
    width: 0.4375rem;
    height: 1rem;

    margin-block-start: 0.0125rem;
  }
}