@layer views {

  .v-hero {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    color: #fff;
  }

  .v-hero__img {
    position: absolute;
    inset: 0;
  }

  .v-hero__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .v-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.5) 35.767%,
      rgba(0, 0, 0, 0.15) 53.107%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .v-hero__en,
  .v-hero__ja {
    position: relative;
    z-index: 1;

    overflow-wrap: anywhere;
    text-box: trim-both cap alphabetic;
  }

  .v-hero__en {
    position: absolute;
    left: 0;
    top: calc(50% - 40px);

    --cap: 80px;
    font-weight: 300;
    font-size: 12rem;
    line-height: 1;
    letter-spacing: 0.025em;
    text-transform: uppercase;
  }

  .v-hero__en img {
    display: block;
    width: auto;

    height: auto;
    max-height: calc(var(--cap) * 1.2);
    margin-block: calc(var(--cap) * -0.1);
  }

  .v-hero__ja {
    position: absolute;
    left: 863px;
    top: calc(50% - 15px);
    font-weight: 300;
    font-size: 4rem;
    line-height: 1.35;

    letter-spacing: 0.03em;
    font-feature-settings: "palt" 1;
  }

  @media (max-width: 1080px) {

    .v-hero {
      min-height: 375px;
    }

    .v-hero:not(.v-hero--row) {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;

      padding: 0 0 60px;
    }

    .v-hero:not(.v-hero--row) .v-hero__en,
    .v-hero:not(.v-hero--row) .v-hero__ja {
      position: static;
      text-align: left;
    }

    .v-hero:not(.v-hero--row) .v-hero__en {

      --cap: 56.028px;
      font-size: 8.4rem;
      letter-spacing: 0.02em;
    }

    .v-hero:not(.v-hero--row) .v-hero__ja {

      padding-left: 3px;
      padding-top: 36px;
      font-size: 3.6rem;
    }
  }

  @media (max-width: 767px) {
    .v-hero:not(.v-hero--row) {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      height: auto;

      min-height: 0;
      aspect-ratio: 1 / 1;

      padding: 0 0 60px;
    }

    .v-hero:not(.v-hero--row) .v-hero__en,
    .v-hero:not(.v-hero--row) .v-hero__ja {
      position: static;
      text-align: left;
    }

    .v-hero:not(.v-hero--row) .v-hero__en {

      --cap: 37.352px;
      font-size: 5.6rem;
      letter-spacing: 0.02em;
    }

    .v-hero:not(.v-hero--row) .v-hero__ja {

      padding-left: 3px;
      padding-top: 36px;
      font-size: 3rem;
    }

    .v-hero:not(.v-hero--row)::after {
      background: none;
    }
  }

  .v-hero--row {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .v-hero--row::after {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.3) 27.885%,
      rgba(0, 0, 0, 0) 52.404%
    );
  }

  .v-hero--vignette::after {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.255) 25%,
      rgba(0, 0, 0, 0.045) 45%,
      rgba(0, 0, 0, 0.105) 65%,
      rgba(0, 0, 0, 0.21) 85%,
      rgba(0, 0, 0, 0.255) 100%
    );
  }

  .v-hero--vignette-dim::after {
    background:
      linear-gradient(
        to right,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.255) 25%,
        rgba(0, 0, 0, 0.045) 45%,
        rgba(0, 0, 0, 0.105) 65%,
        rgba(0, 0, 0, 0.21) 85%,
        rgba(0, 0, 0, 0.255) 100%
      ),
      rgba(0, 0, 0, 0.25);
  }

  .v-hero--vignette-soft::after {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.17) 25%,
      rgba(0, 0, 0, 0.03) 45%,
      rgba(0, 0, 0, 0.07) 65%,
      rgba(0, 0, 0, 0.14) 85%,
      rgba(0, 0, 0, 0.17) 100%
    );
  }

  .v-hero--vignette-none::after {
    background: none;
  }

  .v-hero--row .v-hero__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding-right: max(96px, calc((100% - var(--content-max)) / 2 - 34px));
  }

  .v-hero--row .v-hero__en,
  .v-hero--row .v-hero__ja {
    position: static;
  }

  .v-hero--row .v-hero__en {
    letter-spacing: 0.02em;
  }

  .v-hero--jp-only .v-hero__ja {
    font-size: 9rem;
  }

  @media (max-width: 1340px) {
    .v-hero--long-en .v-hero__head {
      padding-right: 48px;
    }

    .v-hero--long-en .v-hero__en {

      --cap: 64.032px;
      font-size: 9.6rem;
    }

    .v-hero--long-en .v-hero__ja {
      font-size: 3.8rem;
    }
  }

  @media (max-width: 1080px) {
    .v-hero--row {
      justify-content: flex-end;
      padding-bottom: 60px;
    }

    .v-hero--row .v-hero__head {
      flex-direction: column;
      align-items: flex-start;
      gap: 36px;
      padding-right: 0;
    }

    .v-hero--row .v-hero__en {

      --cap: 56.028px;
      font-size: 8.4rem;
    }

    .v-hero--row .v-hero__ja {

      padding-left: 3px;
      font-size: 3.6rem;
    }

    .v-hero--jp-only .v-hero__ja {
      padding-left: 0;
      font-size: 9rem;
    }
  }

  @media (max-width: 767px) {

    .v-hero {
      min-height: 375px;
    }

    .v-hero__en,
    .v-hero__ja {
      white-space: normal;
    }

    .v-hero--row {
      justify-content: flex-end;
      padding-bottom: 60px;
    }

    .v-hero--row::after {
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.4) 27.885%,
        rgba(0, 0, 0, 0) 52.404%
      );
    }

    .v-hero--vignette::after {
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.34) 25%,
        rgba(0, 0, 0, 0.06) 45%,
        rgba(0, 0, 0, 0.14) 65%,
        rgba(0, 0, 0, 0.28) 85%,
        rgba(0, 0, 0, 0.34) 100%
      );
    }

    .v-hero--vignette-none-sp::after {
      background: none;
    }

    .v-hero--row .v-hero__head {
      flex-direction: column;
      align-items: flex-start;
      gap: 36px;
      padding-right: 0;
    }

    .v-hero__img img {
      object-position: 43.2% center;
    }

    .v-hero--row .v-hero__en {

      --cap: 37.352px;
      font-size: 5.6rem;
    }

    .v-hero--row .v-hero__en:has(img[src$="/heading_fc-recruitment_w.svg"]),
    .v-hero--row .v-hero__en:has(img[src$="/heading_order-process_w.svg"]),
    .v-hero--row .v-hero__en:has(img[src$="/heading_privacy-policy_w.svg"]),
    .v-hero--row .v-hero__en:has(img[src$="/heading_recruit-hiring_w.svg"]) {
      --cap: 93px;
    }

    .v-hero--row .v-hero__ja {

      padding-left: 3px;
      font-size: 3.2rem;
    }

    .v-hero--jp-only .v-hero__ja {

      padding-left: 0;
      font-size: 4.8rem;
    }
  }

  .v-breadcrumb {
    padding: 24px 40px;
    background: #fff;
  }

  .v-breadcrumb ol {
    display: flex;
    gap: 0.5em;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
  }

  .v-breadcrumb li + li::before {
    content: '/';
    margin-right: 0.5em;
  }

  .v-breadcrumb li {
    text-box: trim-both cap alphabetic;
  }

  @media (hover: hover) and (pointer: fine) {
    .v-breadcrumb a {
      text-decoration: underline;
      text-decoration-color: transparent;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
      transition: text-decoration-color var(--dur-hover) var(--ease-hover);
    }

    .v-breadcrumb a:hover {
      text-decoration-color: currentColor;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .v-breadcrumb a {
      transition: none;
    }
  }

  @media (max-width: 767px) {
    .v-breadcrumb {
      display: flex;
      align-items: center;
      min-height: 56px;
      padding: 0 20px;
      overflow-x: auto;
      overflow-y: hidden;

      overscroll-behavior-x: contain;

      scrollbar-width: none;
    }

    .v-breadcrumb::-webkit-scrollbar {
      display: none;
    }

    .v-breadcrumb li {
      white-space: nowrap;
    }
  }

  .v-breadcrumb--ruled {
    border-top: 1px solid var(--line);
  }

  .v-entry-back {
    display: flex;
    align-items: flex-start;
    max-width: 900px;
    margin-inline: auto;
    padding-top: 60px;
  }

  .v-entry-back--wide {
    max-width: none;
    padding-top: 64px;
  }

  @media (max-width: 767px) {
    .v-entry-back--wide {
      padding-top: 60px;
    }
  }

  .v-content-section {
    padding-bottom: 160px;
    background: #fff;
  }

  .v-content-section--beige {
    padding-top: 80px;
    background: var(--bg-beige-light);
  }

  @media (max-width: 767px) {
    .v-content-section {
      padding-bottom: 120px;
    }

    .v-content-section--beige {
      padding-top: 60px;
    }
  }

  .v-content-section--flush {
    padding-top: 0;
  }

  .v-content-section--dark {
    padding-top: 80px;
    background: var(--bg-black);
    color: #fff;
  }

  .v-content-section--dark .v-section-head__en {
    color: #fff;
  }

  .v-lineup-intro {
    width: 469px;
    margin-left: auto;
    margin-right: 130px;
    padding-top: 111px;
  }

  .v-lineup-intro__title {
    font-weight: 300;
    font-size: 4rem;
    line-height: 1.55;
    letter-spacing: 0.03em;
    font-feature-settings: "palt" 1;
    text-box: trim-both cap alphabetic;
  }

  .v-lineup-intro__text {
    padding-top: 40px;

    text-box: trim-both cap alphabetic;
  }

  .v-carousel-stack {
    display: flex;
    flex-direction: column;
    gap: 90px;
    padding-top: 90px;
  }
}