@layer pages {

  /* ---------------------------------------------
  #about
------------------------------------------------ */
  #about {
    >main {
      padding-block-end: 0;
    }
  }

  /* ---------------------------------------------
  .about-overview
------------------------------------------------ */
  .about-overview {
    position: relative;
    background: url("/assets/images/about/bg-about-01-sp.jpg") no-repeat fixed center / cover;

    @media (min-width: 897px) {
      background-image: url("/assets/images/about/bg-about-01-pc.jpg");
    }

    @supports (-webkit-touch-callout: none) {
      background: none;
      clip-path: inset(0);

      &::before {
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("/assets/images/about/bg-about-01-sp.jpg") no-repeat center / cover;
        content: "";
        pointer-events: none;
        will-change: transform;

        @media (min-width: 897px) {
          background-image: url("/assets/images/about/bg-about-01-pc.jpg");
        }
      }
    }
  }

  /* ---------------------------------------------
  .about-hero
------------------------------------------------ */
  .about-hero {
    display: flex;
    min-height: 100svh;
    align-items: center;
    margin-block-start: -3rem;

    @media (min-width: 897px) {
      margin-block-start: -11.5625rem;
    }

    >.container {
      padding-block-start: 0.375rem;

      @media (min-width: 897px) {
        max-width: 82.5rem;
        padding-block-start: 0.625rem;
      }

      @media (max-width: 896px) and (orientation: landscape) {
        padding-block-start: 1.5rem;
      }
    }

    >.container>.title {
      color: var(--color-white);
      font-size: min(4rem, 4.84848dvw);
      font-weight: 700;
      line-height: 1.25;
      margin-block-end: 2.1875rem;

      @media (max-width: 896px) {
        font-size: min(2.25rem, 9.6dvw);
        margin-block-end: 1.5625rem;
        text-align: center;
      }

      @media (max-width: 896px) and (orientation: landscape) {
        font-size: min(1.625rem, 6.93333dvw);
        margin-block-end: 0.9375rem;
      }
    }

    >.container>.text {
      color: var(--color-white);
      font-size: min(1.5rem, 1.81818dvw);
      font-weight: 700;
      line-height: 1.75;

      @media (max-width: 896px) {
        font-size: min(0.875rem, 3.73333dvw);
        line-height: 1.75;
        text-align: center;
      }

      @media (max-width: 896px) and (orientation: landscape) {
        font-size: min(0.8125rem, 3.46667dvw);
      }
    }
  }

  /* ---------------------------------------------
  .about-business
------------------------------------------------ */
  .about-business {
    padding-block: 5rem;

    @media (min-width: 897px) {
      padding-block: 10rem;
    }

    >.container {
      @media (min-width: 897px) {
        max-width: 82.5rem;
      }
    }

    >.container>.hero-heading {
      padding: 0 0 2.5rem;

      @media (min-width: 897px) {
        max-width: none;
        padding-block-end: 4.9375rem;
      }
    }

    >.container>.lead {
      color: var(--color-white);
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.5;

      @media (min-width: 897px) {
        font-size: 2.25rem;
        padding-inline: 0.125rem;
      }
    }

    >.container>.content {
      display: grid;
      margin-block-start: 3.4375rem;
      row-gap: 1.5rem;

      @media (min-width: 897px) {
        margin-block-start: 4.9375rem;
      }
    }
  }

  /* ---------------------------------------------
  .about-business-box
------------------------------------------------ */
  .about-business-box {
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 1rem 1.0625rem;
    border-radius: 2.5rem;
    background-color: var(--color-blue-05);
    -moz-column-gap: 2.5rem;
    column-gap: 2.5rem;

    @media (max-width: 896px) {
      flex-direction: column;
      padding: 2.5rem 1.5rem 3rem;
      border-radius: 1.25rem;
    }

    >.detail {
      @media (min-width: 897px) {
        display: flex;
        height: 100%;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        padding: min(5rem, 6.06061dvw) 0 min(5rem, 6.06061dvw) min(4.9375rem, 5.98485dvw);
      }

      @media (max-width: 896px) {
        display: contents;
      }
    }

    >.detail>.top {
      width: 100%;

      @media (min-width: 897px) {
        flex: 1;
      }

      @media (max-width: 896px) {
        order: 1;
        margin-block-end: 2.375rem;
      }
    }

    >.detail>.top>.heading-top-line {
      margin-block-end: 1.375rem;

      @media (min-width: 897px) {
        margin-block-end: 2.125rem;
      }
    }

    >.detail>.top>.text {
      color: var(--color-white);
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.75;

      @media (min-width: 897px) {
        font-size: 1.125rem;
        line-height: 2;
      }
    }

    >.detail>.link {
      @media (max-width: 896px) {
        width: 100%;
        order: 3;
        margin-block-start: 1.5rem;
      }
    }

    >.detail>.link>.button {
      @media (max-width: 896px) {
        margin: 0 auto;
      }
    }

    >.card {
      width: 100%;

      @media (min-width: 897px) {
        width: 50.081%;
      }

      @media (max-width: 896px) {
        order: 2;
      }
    }

    &[data-bg-variant="dark-blue"] {
      background-color: var(--color-blue-06);
    }
  }

  /* ---------------------------------------------
  .about-business-list
------------------------------------------------ */
  .about-business-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    >li {
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: 1.25rem;

      @media (min-width: 897px) {
        width: calc(50% - 0.25rem);
        min-height: 19.25rem;
      }

      @media (max-width: 896px) {
        aspect-ratio: 1 / 1;
      }

      @media (max-width: 896px) and (orientation: landscape),
      (max-width: 896px) and (hover: hover) and (pointer: fine) {
        min-height: 18.5625rem;
        aspect-ratio: unset;
      }

      &[data-size-variant="full"] {
        @media (min-width: 897px) {
          width: 100%;
        }
      }

      &:hover,
      &:active,
      &:focus-within {
        >.default {
          opacity: 0;
          visibility: hidden;
        }
      }
    }

    >li>.default {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      background-color: var(--color-white);
      transition: opacity var(--transition-duration) var(--transition-timing-function),
        visibility var(--transition-duration) var(--transition-timing-function);
    }

    >li>.default>.logo {
      width: 100%;
      max-width: 10rem;
    }

    >li>.default>.logo>img {
      width: 100%;
      height: auto;
    }

    >li>.content {
      position: relative;
      display: flex;
      width: 100%;
      height: 100%;
    }

    >li>.content>.image {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
    }

    >li>.content>.image>img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }

    >li>.content>.box {
      position: relative;
      z-index: 1;
      display: flex;
      width: 100%;
      flex-direction: column;
      justify-content: space-between;
      padding: min(2rem, 8.53333dvw) min(0.8125rem, 3.46667dvw) min(1.5rem, 6.4dvw) min(1.5rem, 6.4dvw);

      @media (min-width: 897px) {
        padding: min(2rem, 2.42424dvw) min(1.5rem, 1.81818dvw) min(1.5rem, 1.81818dvw);
      }
    }

    >li>.content>.box>.detail {
      width: 100%;
      flex: 1;
    }

    >li>.content>.box>.detail>.text {
      color: var(--color-white);
      font-size: clamp(0.625rem, 3.2dvw, 0.75rem);
      font-weight: 500;
      line-height: 1.5;

      @media (min-width: 897px) {
        font-size: clamp(0.625rem, 0.90909dvw, 0.75rem);
      }
    }

    >li>.content>.box>.detail>.title {
      color: var(--color-white);
      font-size: clamp(0.875rem, 4.26667dvw, 1rem);
      font-weight: 700;
      line-height: 1.5;

      @media (min-width: 897px) {
        font-size: clamp(0.875rem, 1.21212dvw, 1rem);
      }

      *+& {
        margin-block-start: min(0.5625rem, 2.4dvw);
      }
    }

    >li>.content>.box>.detail>.note {
      color: oklch(from var(--color-white) l c h / 50%);
      font-size: 0.625rem;
      font-weight: 500;
      line-height: 1.5;

      *+& {
        margin-block-start: 1.5625rem;

        @media (min-width: 897px) {
          margin-block-start: min(1.5625rem, 1.89394dvw);
        }
      }
    }

    >li>.content>.box>.logo {
      position: relative;
      overflow: hidden;
      width: 100%;
      max-width: min(5rem, 21.33333dvw);
      border-radius: 0.625rem;
      aspect-ratio: 1 / 1;
      background-color: var(--color-white);

      @media (min-width: 897px) {
        max-width: min(5rem, 6.06061dvw);
      }

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 1px solid var(--color-gray-light);
        border-radius: 0.625rem;
        content: "";
      }
    }

    >li>.content>.box>.logo>img {
      width: 100%;
      height: auto;
    }

    >li>.content>.link {
      position: absolute;
      z-index: 1;
      right: 1rem;
      bottom: 1rem;
      display: block;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      aspect-ratio: 1 / 1;
      background: var(--color-white) url("/assets/images/common/icon-arrow-right-03.svg") no-repeat center / 12px 12px;

      &[target="_blank"] {
        background-image: url("/assets/images/common/icon-new-window-04.svg");
      }
    }
  }

  /* ---------------------------------------------
  .about-history
------------------------------------------------ */
  .about-history {
    position: relative;
    overflow: hidden;
    background: url("/assets/images/about/bg-about-02-sp.jpg") no-repeat fixed center / cover;
    padding-block: 5rem;

    @media (min-width: 897px) {
      background-image: url("/assets/images/about/bg-about-02-pc.jpg");
      padding-block: 10rem;
    }

    @supports (-webkit-touch-callout: none) {
      background: none;
      clip-path: inset(0);

      &::before {
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("/assets/images/about/bg-about-02-sp.jpg") no-repeat center / cover;
        content: "";
        pointer-events: none;
        will-change: transform;

        @media (min-width: 897px) {
          background-image: url("/assets/images/about/bg-about-02-pc.jpg");
        }
      }
    }

    >.container {
      position: relative;
      z-index: 1;

      @media (min-width: 897px) {
        max-width: 82.5rem;
      }
    }

    >.container>.hero-heading {
      padding: 0 0 2.1875rem;

      @media (min-width: 897px) {
        max-width: none;
        padding-block-end: 4.625rem;
      }
    }

    >.container>.lead {
      color: var(--color-white);
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 2;
      margin-block-end: 5rem;

      @media (min-width: 897px) {
        font-size: 1.5rem;
        margin-block-end: 10rem;
        padding-inline: 0.5625rem;
      }
    }

    >.container>.content {
      display: grid;
      row-gap: 1rem;

      @media (min-width: 897px) {
        row-gap: 1.5rem;
      }
    }

    >.container>.content>.white-box {
      padding: 2rem 1.5rem;
      border-radius: 1.25rem;
      background-color: var(--color-white);

      @media (min-width: 897px) {
        border-radius: 5rem;
        padding-block: 6rem;
      }
    }
  }

  /* ---------------------------------------------
  .about-history-list
------------------------------------------------ */
  .about-history-list {
    width: 100%;

    @media (min-width: 897px) {
      max-width: 68rem;
      margin: 0 auto;
    }

    >.item {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 1.3125rem 2.5rem;

      @media (max-width: 896px) {
        flex-direction: column;
      }

      &:not(:first-child) {
        border-top: 1px solid var(--color-gray-light);
        margin-block-start: 1.5rem;
        padding-block-start: 1.5rem;

        @media (min-width: 897px) {
          border-color: var(--color-gray-medium);
          margin-block-start: 2.5rem;
          padding-block-start: 2.5rem;
        }
      }

      &[data-align-variant="center"] {
        @media (min-width: 897px) {
          align-items: center;
        }
      }
    }

    >.item>.detail {
      @media (min-width: 897px) {
        flex: 1;
      }
    }

    >.item>.detail>.year {
      color: var(--color-primary);
      font-family: var(--font-family-montserrat);
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.21875;
      margin-block-end: 1rem;

      @media (min-width: 897px) {
        font-size: 2.875rem;
        line-height: 1.2392;
        margin-block-end: 0.9375rem;
      }
    }

    >.item>.detail>.title {
      color: var(--color-primary);
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.5;
      margin-block-end: 0.8125rem;

      @media (min-width: 897px) {
        font-size: 1.75rem;
        margin-block-end: 1.3125rem;
      }
    }

    >.item>.detail>.text {
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.75;

      @media (min-width: 897px) {
        font-size: 1rem;
      }

      &+& {
        margin-block-start: 1.5625rem;

        @media (min-width: 897px) {
          margin-block-start: 1.75rem;
        }
      }
    }

    >.item>.image-box {
      display: flex;
      overflow: hidden;
      width: 100%;
      align-items: center;
      justify-content: center;
      padding: 1.25rem 2.25rem;
      border-radius: 2.5rem;
      aspect-ratio: 1 / 1;
      background-color: var(--color-gray-lighter);
      text-align: center;

      @media (min-width: 897px) {
        width: 36.766%;
        padding-inline: 1.25rem;
      }

      &[data-size-variant="full"] {
        padding: 0;

        >.image {
          max-width: 100%;
        }
      }

      &[data-size-variant="sp-small"] {
        @media (max-width: 896px) {
          padding-inline: 2.625rem 2.5625rem;
        }
      }
    }

    >.item>.image-box>.image {
      width: 100%;

      @media (min-width: 897px) {
        max-width: 17.5rem;
      }
    }

    >.item>.image-box>.image>img {
      width: 100%;
      height: auto;
    }
  }

  /* ---------------------------------------------
  .history-step-list
------------------------------------------------ */
  .history-step-list {
    display: grid;
    margin-block-start: 1.375rem;
    row-gap: 1.75rem;

    @media (min-width: 897px) {
      gap: 1.875rem;
      grid-template-columns: repeat(3, 1fr);
      margin-block-start: 2.375rem;
    }

    >li {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 1rem;
      border-radius: 0.625rem;
      background-color: var(--color-gray-lighter);
      -moz-column-gap: 1rem;
      column-gap: 1rem;

      @media (min-width: 897px) {
        padding: 1.5rem;
      }

      &:not(:last-child)::after {
        position: absolute;
        width: 0;
        height: 0;
        border-width: 12px 10px 0;
        border-color: var(--color-gray) transparent transparent transparent;
        content: "";

        @media (min-width: 897px) {
          top: 50%;
          right: -1.3125rem;
          border-width: 10px 0 10px 12px;
          border-color: transparent transparent transparent var(--color-gray);
          transform: translateY(-50%);
        }

        @media (max-width: 896px) {
          bottom: -1.25rem;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }

    >li>i {
      display: block;
      width: 3rem;
    }

    >li>i>img {
      width: 100%;
      height: auto;
    }

    >li>.detail {
      flex: 1;
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.5;
    }
  }

  /* ---------------------------------------------
  .history-logo-list
------------------------------------------------ */
  .history-logo-list {
    display: grid;
    margin: 1.3125rem -0.1875rem 0 0;
    gap: 0.5rem;
    grid-template-columns: repeat(4, 1fr);

    @media (min-width: 897px) {
      margin: 2.375rem 0 0;
      gap: 2.5rem 2.5625rem;
      grid-template-columns: repeat(7, 1fr);
      padding-inline: 1px;
    }

    >li {
      overflow: hidden;
      border-radius: 0.625rem;
      text-align: center;
    }

    >li>img {
      width: 100%;
      height: auto;
    }
  }

  /* ---------------------------------------------
  .about-future
------------------------------------------------ */
  .about-future {
    position: relative;
    overflow: hidden;
    background: url("/assets/images/about/bg-about-03-sp.jpg") no-repeat fixed center / cover;
    color: var(--color-white);
    margin-block-end: -10rem;
    padding-block: 6.5625rem 16.3125rem;

    @media (min-width: 897px) {
      background-image: url("/assets/images/about/bg-about-03-pc.jpg");
      margin-block-end: -13.4375rem;
      padding-block: 10.375rem 23.8125rem;
    }

    @supports (-webkit-touch-callout: none) {
      background: none;
      clip-path: inset(0);

      &::before {
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("/assets/images/about/bg-about-03-sp.jpg") no-repeat center / cover;
        content: "";
        pointer-events: none;
        will-change: transform;

        @media (min-width: 897px) {
          background-image: url("/assets/images/about/bg-about-03-pc.jpg");
        }
      }
    }

    >.container {
      position: relative;
      z-index: 1;
    }

    >.container>.hero-heading {
      padding-block: 0 2rem;

      @media (min-width: 897px) {
        max-width: none;
        padding-block-end: 3.0625rem;
      }
    }

    >.container>.title {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.5;
      margin-block-end: 1.3125rem;
      text-align: center;

      @media (min-width: 897px) {
        font-size: 2rem;
        margin-block-end: 2.4375rem;
      }
    }

    >.container>.text {
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.75;

      @media (min-width: 897px) {
        font-size: 1rem;
        line-height: 1.5;
        text-align: center;
      }

      &+& {
        margin-block-start: 1.5625rem;

        @media (min-width: 897px) {
          margin-block-start: 1.5rem;
        }
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  .blog-hero
------------------------------------------------ */
  .blog-hero {
    @media (min-width: 897px) {
      margin-block-start: -4.0625rem;
    }

    >h1>picture {
      display: block;
    }

    >h1>picture>img {
      width: 100%;
      height: auto;
    }
  }

  /* ---------------------------------------------
  .blog-article
------------------------------------------------ */
  .blog-article {
    >.container {
      margin-block-start: 4rem;

      @media (min-width: 897px) {
        margin-block-start: 6rem;
      }
    }
  }

  /* ---------------------------------------------
  .blog-pickup
------------------------------------------------ */
  .blog-pickup {
    overflow: hidden;
    border-bottom: 1px solid var(--color-gray-light);
    margin-block-end: 4rem;
    padding-block: 4rem;

    @media (min-width: 897px) {
      margin-block-end: 6rem;
      padding-block: 6.0625rem 3rem;
    }

    >.container>.head {
      @media (min-width: 897px) {
        position: relative;
        padding-inline: 9rem;
      }
    }

    >.container>.head>.heading-group-underline {
      margin-block-end: 1.5rem;

      @media (min-width: 897px) {
        margin-block-end: 2rem;
      }
    }

    >.container>.head>.controller {
      position: absolute;
      top: -1px;
      right: 0;
      display: flex;
      -moz-column-gap: 1rem;
      column-gap: 1rem;

      @media (max-width: 896px) {
        display: none;
      }
    }

    &+.container {
      margin-block-start: 0;
    }
  }

  /* ---------------------------------------------
  .blog-slider
------------------------------------------------ */
  .blog-slider {
    >.inner {
      @media (min-width: 897px) {
        width: calc(100vw - 50% + 35.3125rem);
        padding-inline-start: 6.25rem;
      }
    }

    >.inner>.slider>.list.swiper-wrapper {
      @media (max-width: 896px) {
        flex-direction: column;
        row-gap: 1rem;
        transform: none;
      }
    }

    >.inner>.slider>.list>.item {
      @media (min-width: 897px) {
        width: calc(74.07407% - 0.48611rem);
        height: auto;
      }
    }

    >.pagination {
      margin-block-start: 2.5rem;

      @media (max-width: 896px) {
        display: none;
      }
    }

    >.pagination>.swiper-pagination {
      position: static;
      display: flex;
      justify-content: center;
      -moz-column-gap: 0.5rem;
      column-gap: 0.5rem;
    }

    >.pagination>.swiper-pagination>.swiper-pagination-bullet {
      width: 0.5rem;
      height: 0.5rem;
      background-color: var(--color-gray-medium);
      opacity: 1;

      @media (hover: hover) and (pointer: fine) {
        transition: background-color var(--transition-duration) var(--transition-timing-function);

        &:hover {
          background-color: var(--color-primary);
        }
      }
    }

    >.pagination>.swiper-pagination>.swiper-pagination-bullet-active {
      background-color: var(--color-primary);
    }

    >.pagination .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 0;
    }
  }

  /* ---------------------------------------------
  .blog-card
------------------------------------------------ */
  .blog-card {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border-radius: 2.5rem;
    background-color: var(--color-gray-lighter);

    @media (min-width: 897px) {
      height: 100%;
      flex-direction: row;
      align-items: flex-start;
      padding: 2.5rem 4rem 2.5rem 2.5rem;
      border-radius: 5rem;
      -moz-column-gap: 2.5rem;
      column-gap: 2.5rem;
    }

    >figure {
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: 2.5rem 2.5rem 0 0;
      aspect-ratio: 345 / 194;

      @media (min-width: 897px) {
        width: 42.726%;
        border-radius: 2.5rem;
        aspect-ratio: 370 / 208;
      }
    }

    >figure>img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      transition: transform var(--transition-duration) var(--transition-timing-function);
    }

    >.detail {
      padding-block-start: 0.5rem;

      @media (max-width: 896px) {
        padding: 1rem 1.5rem 1.375rem;
      }

      @media (min-width: 897px) {
        flex: 1;
      }
    }

    >.detail>.meta {
      display: flex;
      flex-wrap: wrap;
      margin-block-end: 0.375rem;

      @media (min-width: 897px) {
        margin-block-end: 0.8125rem;
      }
    }

    >.detail>.meta>time,
    >.detail>.meta>.category {
      color: var(--color-primary);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.41667;
    }

    >.detail>.meta>.category {
      position: relative;
      flex: 1;
      margin-inline-start: 0.75rem;
      padding-inline-start: 0.8125rem;

      @media (min-width: 897px) {
        margin-inline-start: 1.0625rem;
        padding-inline-start: 1rem;
      }

      &::before {
        position: absolute;
        top: 1px;
        left: 0;
        width: 1px;
        height: calc(100% - 1px);
        background-color: var(--color-gray-medium);
        content: "";
      }
    }

    >.detail>.text {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.75;
      transition: color var(--transition-duration) var(--transition-timing-function);

      @media (min-width: 897px) {
        font-size: 1.25rem;
      }
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        >figure>img {
          transform: scale(1.1);
        }

        >.detail>.text {
          color: var(--color-primary);
        }
      }
    }
  }

  /* ---------------------------------------------
  .blog-filter
------------------------------------------------ */
  .blog-filter {
    >.list-control {
      @media (max-width: 896px) {
        display: none;
      }
    }

    >.list-card-article {
      margin-block-start: 2.5625rem;

      @media (min-width: 897px) {
        margin-block-start: 3rem;
      }
    }

    >.list-card-article>li>.card-article {
      @media (hover: hover) and (pointer: fine) {
        &:hover {
          >.image>img {
            transform: scale(1.02);
          }
        }
      }
    }

    +.pagination {
      @media (min-width: 897px) {
        margin-block-start: 4.875rem;
      }
    }
  }

  /* ---------------------------------------------
  .blog-dropdown-filter
------------------------------------------------ */
  .blog-dropdown-filter {
    position: relative;

    @media (min-width: 897px) {
      display: none;
    }

    &::before,
    &::after {
      position: absolute;
      top: 50%;
      background-color: var(--color-primary);
      content: "";
    }

    &::before {
      right: 1rem;
      width: 1rem;
      height: 1px;
    }

    &::after {
      right: 1.5rem;
      width: 1px;
      height: 1rem;
      transform: translateY(-50%);
      transition: all var(--transition-duration) var(--transition-timing-function);
    }

    >select {
      display: block;
      width: 100%;
      height: 3rem;
      border: 2px solid var(--color-gray-medium);
      border-radius: 0.625rem;
      background-color: var(--color-white);
      cursor: pointer;
      font-size: 1rem;
      font-weight: 500;
      padding-inline: 0.875rem 2.375rem;
    }

    &[data-open="true"] {
      &::after {
        opacity: 0;
        transform: translateY(-50%) rotate(90deg);
      }
    }
  }

  /* ---------------------------------------------
  #blog-detail
------------------------------------------------ */
  #blog-detail {
    article>.hero-subpage>.meta {
      -moz-column-gap: 1.5rem;
      column-gap: 1.5rem;

      @media (max-width: 896px) {
        -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
      }
    }

    article>.content-cms-detail.editor-block {
      @media (min-width: 897px) {
        padding-block-start: 4.9375rem !important;
      }
    }

    article>.content-cms-detail.editor-block>p.wp-block-paragraph {
      margin-block-start: 2rem !important;
    }

    article>.content-cms-detail.editor-block>.wp-block-custom-icon-content+p.wp-block-paragraph {
      margin-block-start: 1.75rem !important;
    }

    article>.content-cms-detail.editor-block>h3.wp-block-heading {
      margin-block-start: 4.8125rem !important;

      @media (max-width: 896px) {
        margin-block: 4.75rem 1.4375rem !important;
      }
    }

    article>.content-cms-detail.editor-block>.wp-block-image {
      margin-block-end: 5.0625rem !important;

      @media (max-width: 896px) {
        margin-block-end: 2.1875rem !important;
      }
    }

    article>.content-cms-detail.editor-block>.wp-block-image+h3.wp-block-heading {
      @media (max-width: 896px) {
        margin-block-start: 5rem !important;
      }
    }

    article>.content-cms-detail.editor-block>.wp-block-image:has(+ p.wp-block-paragraph) {
      @media (min-width: 897px) {
        margin-block-end: 4.75rem !important;
      }
    }

    article>.social-share {
      margin-block-start: 4.5rem !important;

      @media (max-width: 896px) {
        margin-block: 4.5rem 2.5rem !important;
      }
    }

    article>.box-button-detail {
      @media (min-width: 897px) {
        padding-block: 5rem;
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  .policy-section
------------------------------------------------ */
  .policy-section {
    display: flex;
    flex-wrap: wrap;
    gap: 1.3125rem 2.5rem;

    @media (max-width: 896px) {
      flex-direction: column;
    }

    >.head {
      width: 100%;

      @media (min-width: 897px) {
        width: 30.77%;
      }
    }

    >.head>.title {
      font-size: 2rem;
      font-weight: 700;
      line-height: 1.5;
      margin-block-start: 1.375rem;

      @media (max-width: 896px) {
        font-size: 1.5rem;
        margin-block-start: 1.5rem;
      }
    }

    >.head>.title-english {
      font-family: var(--font-family-rockwell);
      font-size: 3rem;
      font-weight: 700;
      line-height: 1.16667;
      margin-block-start: 1.4375rem;
      word-break: break-all;

      @media (max-width: 896px) {
        font-size: 2rem;
        line-height: 1.15625;
        margin-block-start: 1.125rem;
      }
    }

    >.head>.text {
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.5;
      margin-block-start: 0.75rem;

      @media (max-width: 896px) {
        font-size: 1rem;
        margin-block-start: 0.6875rem;
      }
    }

    >.body,
    >.body-list {
      @media (min-width: 897px) {
        flex: 1;
        margin-block-start: 1.8125rem;
      }
    }

    >.body {
      @media (min-width: 897px) {
        margin-block-start: 7.875rem;
      }
    }

    >.body-list {
      @media (max-width: 896px) {
        margin-block-start: 1.1875rem;
      }
    }

    &+& {
      margin-block-start: 5rem;

      @media (min-width: 897px) {
        margin-block-start: 7.5rem;
      }
    }
  }

  /* ---------------------------------------------
  .policy-block
------------------------------------------------ */
  .policy-block {
    .box {
      display: block;
    }

    >.list {
      display: flex;
      flex-direction: column;
      counter-reset: custom-counter;
      gap: 1rem;

      @media (max-width: 896px) {
        gap: 0.5rem;
      }
    }

    >.list>li {
      position: relative;
      padding: 2rem 2.5rem 1.9375rem 5.8125rem;
      border-radius: 1.25rem;
      background-color: var(--color-gray-lighter);
      counter-increment: custom-counter;
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.5;

      @media (max-width: 896px) {
        padding: 1.5rem 1.5rem 1.4375rem 3.75rem;
        font-size: 1.125rem;
      }

      &::before {
        position: absolute;
        top: 2.625rem;
        left: 2.5rem;
        color: var(--color-gray);
        content: "0" counter(custom-counter);
        font-family: var(--font-family-montserrat);
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.25;

        @media (max-width: 896px) {
          top: 1.875rem;
          left: 1.5rem;
        }
      }
    }

    >.list>li>span {
      color: var(--color-primary);
    }

    >.box>.text {
      font-weight: 500;
      line-height: 2;

      @media (max-width: 896px) {
        line-height: 1.75;
      }

      &:not(:first-child) {
        margin-block-start: 2rem;

        @media (max-width: 896px) {
          margin-block-start: 1.75rem;
        }
      }
    }

    >.image {
      position: relative;
      display: block;
      overflow: hidden;
      border-radius: 2.5rem;
      margin-block-start: 2.25rem;

      @media (max-width: 896px) {
        border-radius: 1.25rem;
        margin-block-start: 2.375rem;
      }
    }

    >.image>img {
      width: 100%;
      height: auto;
    }

    >.list+.image {
      margin-block-start: 2.5rem;
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  #contact-thanks
------------------------------------------------ */
  #contact-thanks {
    .hero-heading {
      @media (min-width: 897px) {
        margin-block-end: 5.75rem;
        padding-block-end: 4.0625rem;
      }
    }
  }

  /* ---------------------------------------------
  .thanks-section
------------------------------------------------ */
  .thanks-section {
    text-align: center;

    >.heading {
      color: var(--color-gray-dark);
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.75;
      margin-block: 1.9375rem;

      @media (max-width: 896px) {
        font-size: 1.5rem;
        line-height: 1.5;
        margin-block-end: 1.3125rem;
      }

      &:first-child {
        margin-block-start: 0;
      }
    }

    >.text {
      color: var(--color-gray-dark);
      font-size: 1rem;
      font-weight: 500;
      line-height: 2;
      text-align: center;

      @media (max-width: 896px) {
        line-height: 1.75;
      }
    }

    >.gray-box {
      padding: 2.25rem 2.5rem;
      border-radius: 2.5rem;
      background-color: var(--color-gray-lighter);
      margin-block-start: 2.25rem;

      @media (max-width: 896px) {
        padding: 1.375rem 1.5rem;
        border-radius: 1.25rem;
        margin-block-start: 2.375rem;
        text-align: left;
      }
    }

    >.gray-box>.text {
      color: var(--color-primary);
      font-size: 1rem;
      font-weight: 500;
      line-height: 2;
      text-align: center;

      @media (max-width: 896px) {
        line-height: 1.75;
      }
    }

    >.button-area {
      margin-block-start: 2.5rem;
    }

    >.button-area>.button {
      margin: 0 auto;
    }

    >.button-area>.button>a {
      color: var(--color-white);
    }
  }
}

@layer pages {
  :root {
    --color-primary: #1f6fc6;
    --color-secondary: #024da1;
    --color-white: #fff;
    --color-black: #000;
    --color-gray-dark: #333;
    --color-gray: #6c7683;
    --color-gray-medium: #c9d3db;
    --color-gray-light: #e3e8ec;
    --color-gray-light-medium: #e4ebf3;
    --color-gray-lighter: #f1f5f9;
    --color-gray-darker: #030d19;
    --color-gray-light-dark: #0c2038;
    --color-gray-cool: #c8d3de;
    --color-gray-hover: #ccc;
    --color-checkbox-border: #a1b5cb;
    --color-button-accordian: #f8fafc;
    --color-button-secondary: #cbd9e7;
    --color-red: #d0021b;
    --color-blue-01: #1f8cc6;
    --color-blue-02: #1fa6c6;
    --color-blue-03: #f0f4f8;
    --color-blue-04: #a2cbe1;
    --color-blue-05: #1c69b9;
    --color-blue-06: #004da1;
    --color-green-01: #4abcbc;
    --color-green-02: #84c3ab;
    --color-green-03: #4bbcbc;
    --color-green-04: #1fa5c6;
    --gradient-footer-01: linear-gradient(#1e3b59 0%, #2c3239 100%);
    --gradient-footer-02: linear-gradient(#1f6fc6 0%, #134174 22.66%, #2b3238 100%);
  }
}

@layer pages {
  :root {
    --font-family: "Noto Sans JP", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    --font-family-inter: "Inter", "Helvetica Neue", arial, sans-serif;
    --font-family-montserrat: "Montserrat", "Helvetica Neue", arial, sans-serif;
    --font-family-rockwell: "Rockwell", serif;
    --font-size-base: 1rem;
  }
}

@layer pages {
  :root {
    --max-width-xxxl: 1600px;
    --max-width-xxl: 1440px;
    --max-width-xl: 1170px;
    --max-width-lg: 970px;
    --max-width-md: 870px;
    --desktop-content-width: 1210px;
    --desktop-content-width-narrow: 910px;
  }
}

@layer pages {
  :root {
    --transition-duration: 0.3s;
    --transition-timing-function: ease-out;
  }
}

@layer pages {

  /* ---------------------------------------------
  .cookie-policy
------------------------------------------------ */
  .cookie-policy {
    .table-scroll {
      margin-block: 2.5rem;

      @media (max-width: 896px) {
        margin-block-start: 1.5rem;
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  .history-intro
------------------------------------------------ */
  .history-intro {
    display: flex;
    border-top: 1px solid var(--color-gray-light);

    @media (min-width: 897px) {
      justify-content: space-between;
      padding-block-start: 5.4375rem;
    }

    @media (max-width: 896px) {
      flex-direction: column;
      gap: 1.4375rem;
      margin-block-start: -1.5rem;
      padding-block-start: 3.5625rem;
    }

    >.box-heading {
      @media (min-width: 897px) {
        width: min(37.19008vw, 28.125rem);
        flex: 0 0 auto;
        padding-block-start: 0.5rem;
      }
    }

    >.box-heading>*:not(span) {
      color: var(--color-gray-dark);
      font-size: 2rem;
      font-weight: 700;
      line-height: 1.5;

      @media (max-width: 896px) {
        font-size: 1.5rem;
        line-height: 1.5;
      }
    }

    >.content {
      @media (min-width: 897px) {
        width: min(55.3719vw, 41.875rem);
      }
    }

    >.content>p {
      color: var(--color-gray-dark);
      font-weight: 500;
      line-height: 2;

      @media (max-width: 896px) {
        line-height: 1.75;
      }
    }

    >.content>p+p {
      margin-block-start: 2rem;

      @media (max-width: 896px) {
        margin-block-start: 1.75rem;
      }
    }
  }

  /* ---------------------------------------------
  .history-timeline
------------------------------------------------ */
  .history-timeline {
    padding-block-start: 4.0625rem;

    @media (max-width: 896px) {
      padding-block-start: 2.6875rem;
    }

    >.main-image {
      display: block;
    }

    >.main-image img {
      width: 100%;
      height: auto;
      border-radius: 2.5rem;

      @media (max-width: 896px) {
        border-radius: 1.25rem;
      }
    }

    >.list {
      *+& {
        margin-block-start: 5.6875rem;

        @media (max-width: 896px) {
          margin-block-start: 4rem;
        }
      }
    }

    >.list>li {
      display: flex;

      @media (min-width: 897px) {
        justify-content: space-between;
        gap: min(4.13223vw, 3.125rem);
      }

      @media (max-width: 896px) {
        flex-direction: column;
        gap: 0.6875rem;
      }
    }

    >.list>li:not(:first-child) {
      border-top: 1px solid var(--color-gray-light);
      padding-block-start: 3.6875rem;

      @media (max-width: 896px) {
        padding-block-start: 2.5rem;
      }
    }

    >.list>li:not(:last-child) {
      padding-block-end: 4.0625rem;

      @media (max-width: 896px) {
        padding-block-end: 2.5rem;
      }
    }

    >.list>li>.heading {
      color: var(--color-primary);
      font-family: var(--font-family-montserrat);
      font-size: 3rem;
      font-weight: 500;
      line-height: 1.1;

      @media (min-width: 897px) {
        width: 12.5rem;
        flex: 0 0 auto;
        padding-block-start: 0.5rem;
      }

      @media (max-width: 896px) {
        font-size: 1.5rem;
        line-height: 1.20833;
      }
    }

    >.list>li>.content {
      @media (min-width: 897px) {
        width: 41.875rem;
      }

      @media (max-width: 896px) {
        padding-inline-start: 1.875rem;
      }
    }
  }

  /* ---------------------------------------------
  .history-timeline-card
------------------------------------------------ */
  .history-timeline-card {
    >.heading {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.5;

      @media (max-width: 896px) {
        font-size: 1.125rem;
        line-height: 1.5;
      }
    }

    >.text {
      font-weight: 500;
      line-height: 2;

      @media (max-width: 896px) {
        font-size: 0.875rem;
        line-height: 2;
      }

      *+& {
        margin-block-start: 1.1875rem;

        @media (max-width: 896px) {
          margin-block-start: 0.75rem;
        }
      }
    }

    >.list-icon {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1.875rem;

      @media (max-width: 896px) {
        gap: 0.9375rem;
      }

      *+& {
        margin-block-start: 2.5625rem;

        @media (max-width: 896px) {
          margin-block-start: 1.5625rem;
        }
      }
    }

    >.list-icon>li {
      display: flex;
      flex-wrap: wrap;
    }

    >.list-icon>li>img {
      height: auto;

      @media (max-width: 896px) {
        max-width: 7.5rem;
      }

      &[data-size-variant="large"] {
        @media (max-width: 896px) {
          max-width: 11.25rem;
        }
      }
    }

    &+& {
      border-top: 1px solid var(--color-gray-light);
      margin-block-start: 2.5rem;
      padding-block-start: 2.1875rem;

      @media (max-width: 896px) {
        margin-block-start: 1.5rem;
        padding-block-start: 1.1875rem;
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  #recruit-job
------------------------------------------------ */
  #recruit-job {
    >main>.hero-heading {
      @media (min-width: 897px) {
        margin-block-end: 5.5rem;
      }
    }
  }

  /* ---------------------------------------------
  .job-role
------------------------------------------------ */
  .job-role {
    >.container>.text {
      font-weight: 500;
      line-height: 2;
      margin-block-start: 1.25rem;

      @media (min-width: 897px) {
        margin-block-start: 1.75rem;
      }
    }

    >.container>.box {
      padding: 2rem 1.5rem;
      border-radius: 1.25rem;
      background-color: var(--color-gray-lighter);
      margin-block-start: 2.25rem;

      @media (min-width: 897px) {
        border-radius: 2.5rem;
        padding-block: 4rem;
      }
    }

    >.container>.box>picture {
      display: block;
      width: 100%;
      max-width: 18.5625rem;
      margin: 0 auto;

      @media (min-width: 897px) {
        max-width: 53.1875rem;
      }
    }

    >.container>.box>picture>img {
      width: 100%;
      height: auto;
    }
  }

  /* ---------------------------------------------
  .job-cards
------------------------------------------------ */
  .job-cards {
    margin-block-start: 5rem;
    padding-block-end: 5rem;

    @media (min-width: 897px) {
      margin-block-start: 7.5rem;
      padding-block-end: 10rem;
    }

    >.container {
      display: grid;
      row-gap: 5rem;

      @media (min-width: 897px) {
        row-gap: 7.5rem;
      }
    }

    >.container>.content>.list-card-thumbnail {
      @media (min-width: 897px) {
        row-gap: 2.5rem;
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  #recruit-message
------------------------------------------------ */
  #recruit-message {
    >main {
      @media (min-width: 897px) {
        position: relative;
      }
    }

    >main>.breadcrumb {
      @media (min-width: 897px) {
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    >main>.container {
      padding-block: 3.875rem 4.875rem;

      @media (min-width: 897px) {
        padding-block: 7.25rem 9.75rem;
      }
    }
  }

  /* ---------------------------------------------
  .message-hero
------------------------------------------------ */
  .message-hero {
    display: flex;
    flex-wrap: wrap;

    @media (min-width: 897px) {
      align-items: center;
      justify-content: space-between;
    }

    @media (max-width: 896px) {
      flex-direction: column;
      row-gap: 2.5rem;
    }

    >.detail {
      display: grid;
      padding: 2rem 0.9375rem 0;
      row-gap: 1rem;

      @media (min-width: 897px) {
        flex: 1;
        padding: 0 1.25rem 0 9.375dvw;
        row-gap: min(1.375rem, 1.52778dvw);
      }
    }

    >.detail>.heading {
      position: relative;
      display: grid;
      padding-block-end: 1.0625rem;

      @media (min-width: 897px) {
        padding-block-end: min(2.0625rem, 2.29167dvw);
      }

      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 4.375rem;
        height: 1px;
        background-color: var(--color-gray-cool);
        content: "";
      }
    }

    >.detail>.heading>h1 {
      color: var(--color-primary);
      font-family: var(--font-family-montserrat);
      font-size: 1.25rem;
      font-weight: 500;
      line-height: 1.2;

      @media (min-width: 897px) {
        font-size: min(2rem, 2.22222dvw);
        line-height: 1.21875;
      }
    }

    >.detail>.heading>p {
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.41667;

      @media (min-width: 897px) {
        font-size: min(1rem, 1.11111dvw);
        line-height: 1.5;
      }
    }

    >.detail>.body {
      display: grid;
      row-gap: 0.9375rem;

      @media (min-width: 897px) {
        row-gap: min(2.625rem, 2.91667dvw);
      }
    }

    >.detail>.body>.title {
      font-size: 1.5rem;
      font-weight: 700;

      @media (min-width: 897px) {
        font-size: min(2.25rem, 2.5dvw);
        line-height: 1.55556;
      }
    }

    >.detail>.body>.profile {
      color: var(--color-gray);
      font-weight: 500;
    }

    >.detail>.body>.profile>.position {
      font-size: 0.875rem;
      line-height: 1.429;

      @media (min-width: 897px) {
        font-size: min(1rem, 1.11111dvw);
        line-height: 1.5;
      }
    }

    >.detail>.body>.profile>.name {
      line-height: 1.5;

      @media (min-width: 897px) {
        font-size: min(1.25rem, 1.38889dvw);
        line-height: 1.45;
      }
    }

    >picture {
      display: block;
      width: 100%;

      @media (min-width: 897px) {
        width: 50%;
      }
    }

    >picture>img {
      width: 100%;
      height: auto;

      @media (min-width: 897px) {
        overflow: hidden;
        border-bottom-left-radius: 80px;
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  #news
------------------------------------------------ */
  #news {
    .hero-heading {
      @media (min-width: 897px) {
        padding-block: 5.9375rem 5rem;
      }
    }
  }

  /* ---------------------------------------------
  #news-detail
------------------------------------------------ */
  #news-detail {
    .content-cms-detail.editor-block {
      padding-block-start: 4.75rem !important;

      @media (max-width: 896px) {
        padding-block-start: 2.25rem !important;
      }

      >.wp-block-image {
        margin-block: 4.75rem !important;

        @media (max-width: 896px) {
          margin-block: 2.25rem !important;
        }
      }

      >.wp-block-image+h2.wp-block-heading {
        margin-block: 5.1875rem 2.3125rem !important;

        @media (max-width: 896px) {
          margin-block: 5.0625rem 1.3125rem !important;
        }
      }

      >h2.wp-block-heading {
        margin-block-end: 2.3125rem !important;

        @media (max-width: 896px) {
          margin-block: 4.875rem 1.3125rem !important;
        }
      }

      >h2.wp-block-heading+.wp-block-paragraph {
        @media (max-width: 896px) {
          margin-block-start: 1.3125rem !important;
        }
      }

      >.wp-block-paragraph,
      >p {
        margin-block-start: 2.3125rem !important;

        @media (max-width: 896px) {
          margin-block-start: 1.5rem !important;
        }

        &:first-child {
          margin-block-start: 0 !important;
        }
      }
    }

    article>.social-share {
      margin-block-start: 4.4375rem;

      @media (max-width: 896px) {
        margin-block-start: 4.5rem;
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  #oneaction
------------------------------------------------ */
  #oneaction {
    background-color: var(--color-gray-lighter);
  }

  /* ---------------------------------------------
  #oneaction-detail
------------------------------------------------ */
  #oneaction-detail {
    .content-cms-detail.editor-block {
      >.main-image {
        @media (max-width: 896px) {
          margin-block-end: 2.25rem !important;
        }
      }
    }

    article>.social-share {
      margin-block-start: 4.75rem;
    }
  }

  /* ---------------------------------------------
  .oneaction-hero
------------------------------------------------ */
  .oneaction-hero {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;

    @media (min-width: 897px) {
      margin-block-start: -11.5625rem;
    }

    @media (max-width: 896px) {
      height: 177.86667vw;
      margin-block-start: -3rem;
    }

    >.inner>.image {
      position: absolute;
      width: 100%;
      height: auto;
      inset: 0;

      @media (min-width: 897px) {
        overflow: hidden;
      }

      >img {
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
        -o-object-fit: cover;
        object-fit: cover;
      }
    }

    >.inner>.content {
      position: absolute;
      z-index: 5;
      top: 50%;
      left: 50%;
      width: 100%;
      box-sizing: border-box;
      padding: 0 1.25rem;
      color: var(--color-white);
      text-align: center;
      transform: translate(-50%, -50%);

      @media (min-width: 897px) {
        margin-block-start: 3.375rem;
      }

      @media (max-width: 896px) {
        max-width: 18rem;
        margin-block-start: 1.25rem;
        padding-inline: 0;
      }
    }

    >.inner>.content>.heading {
      color: var(--color-white);
      font-family: var(--font-family-rockwell);
      font-size: min(4.44444dvw, 4rem);
      font-weight: 700;
      line-height: 1.1875;

      @media (max-width: 896px) {
        font-size: 1.9375rem;
        line-height: 1.19355;
      }
    }

    >.inner>.content>.sub-heading {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: min(1.11111dvw, 1rem);
      font-weight: 500;
      gap: 1rem;
      line-height: 1.5;
      margin-block-start: 0.375rem;

      @media (max-width: 896px) {
        font-size: 0.75rem;
        line-height: 1.41667;
        margin-block-start: 0.125rem;
      }

      &::before,
      &::after {
        display: block;
        width: 2.5rem;
        height: 1px;
        background-color: var(--color-white);
        content: "";

        @media (max-width: 896px) {
          width: 1.5rem;
        }
      }
    }

    >.inner>.content>.lead-text {
      font-size: min(2.5dvw, 2.25rem);
      font-weight: 700;
      line-height: 1.5;
      margin-block-start: 2.4375rem;
      text-align: center;

      @media (max-width: 896px) {
        font-size: 1.5rem;
        margin-block-start: 1.5rem;
      }
    }

    >.inner>.content>.text {
      font-size: min(1.11111dvw, 1rem);
      font-weight: 500;
      line-height: 2;
      margin-block-start: 1.6875rem;
      text-align: center;

      @media (max-width: 896px) {
        font-size: 0.875rem;
        margin-block-start: 1.1875rem;
        padding-inline: 1px;
        text-align: left;
      }
    }

    >.inner>.content>.button {
      margin: min(2.5dvw, 2.25rem) auto 0;

      @media (max-width: 896px) {
        max-width: 13.75rem;
        margin-block-start: 2.25rem;
      }
    }
  }

  /* ---------------------------------------------
  .oneaction-interview
------------------------------------------------ */
  .oneaction-interview {
    overflow: hidden;
    background-color: var(--color-white);
    padding-block: 6rem 10rem;

    @media (max-width: 896px) {
      padding-block: 0 5rem;
    }
  }

  /* ---------------------------------------------
  .oneaction-filter
------------------------------------------------ */
  .oneaction-filter {
    margin-block-end: 5rem;

    @media (max-width: 896px) {
      margin: 0 -0.9375rem 4rem;
    }

    >.head {
      position: relative;
      display: flex;
      width: 100%;
      min-height: 5rem;
      align-items: center;
      justify-content: center;
      padding: 0.75rem 2.5rem 0.625rem;
      border-bottom: 1px solid var(--color-gray-light);
      background-color: var(--color-button-accordian);
      color: var(--color-gray-dark);
      font-size: 0.8125rem;
      font-weight: 700;
      line-height: 1.38462;
      text-align: center;
      transition: all var(--transition-duration) var(--transition-timing-function);

      @media (min-width: 897px) {
        display: none;
      }

      &::before,
      &::after {
        position: absolute;
        top: 50%;
        background-color: var(--color-primary);
        content: "";
      }

      &::before {
        right: 1rem;
        width: 1rem;
        height: 1px;
      }

      &::after {
        right: 1.5rem;
        width: 1px;
        height: 1rem;
        transform: translateY(-50%);
        transition: all var(--transition-duration) var(--transition-timing-function);
      }

      &[aria-expanded="true"] {
        @media (max-width: 896px) {
          border-bottom: 1px solid var(--color-gray-medium);
          background-color: var(--color-gray-lighter);
        }

        &::after {
          opacity: 0;
          transform: translateY(-50%) rotate(90deg);
        }

        +.body {
          @media (max-width: 896px) {
            opacity: 1;
          }
        }
      }
    }

    >.body {
      border-radius: 2.5rem;
      background-color: var(--color-gray-lighter);

      @media (max-width: 896px) {
        overflow: hidden;
        max-height: 0;
        border-radius: 0;
        opacity: 0;
        transition: max-height var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);
      }

      >.inner {
        padding: 2.1875rem 2.5rem;

        @media (max-width: 896px) {
          padding: 2rem 0.9375rem 2.4375rem;
        }
      }

      >.inner>.form {
        @media (min-width: 897px) {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
        }
      }

      >.inner>.form>.box {
        display: grid;
        border-bottom: 1px solid var(--color-gray-medium);
        padding-block-end: 2.625rem;
        row-gap: 2.625rem;

        @media (min-width: 897px) {
          flex: 1;
          border-right: 1px solid var(--color-gray-medium);
          border-bottom: none;
          padding-block-end: 0;
          padding-inline-end: 1.25rem;
          row-gap: 0.375rem;
        }
      }

      >.inner>.form>.box>fieldset {
        display: grid;
        -moz-column-gap: 1.875rem;
        column-gap: 1.875rem;
        grid-template-columns: 5.875rem 1fr;

        @media (max-width: 896px) {
          grid-template-columns: 1fr;
          row-gap: 1.125rem;
        }
      }

      >.inner>.form>.box>fieldset>.list {
        display: flex;
        flex-wrap: wrap;
        -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;

        @media (max-width: 896px) {
          display: grid;
          gap: 1.0625rem 0.9375rem;
          grid-template-columns: repeat(2, 1fr);
        }
      }

      >.inner>.form>.box>fieldset>.heading {
        color: var(--color-gray);
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 2.14286;

        @media (max-width: 896px) {
          line-height: 1.3;
        }
      }

      >.inner>.form>.reset {
        width: 14.375rem;
        padding-inline-start: 2.5rem;
        text-align: center;

        @media (max-width: 896px) {
          width: 100%;
          padding-block-start: 1.6875rem;
          padding-inline-start: 0;
        }
      }

      >.inner>.form>.reset>button {
        color: var(--color-secondary);
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 2.14286;
        text-align: center;
        text-decoration: underline;
        text-underline-offset: 3px;
        transition: opacity var(--transition-duration) var(--transition-timing-function);

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            text-decoration: none;
          }
        }
      }

      >.inner>.close {
        display: flex;
        justify-content: center;
        margin-block-start: 1.6875rem;

        @media (min-width: 897px) {
          display: none;
        }
      }
    }
  }

  /* ---------------------------------------------
  .oneaction-about
------------------------------------------------ */
  .oneaction-about {
    position: relative;
    overflow: hidden;
    background: var(--color-gray-lighter);

    @media (min-width: 897px) {
      padding-bottom: 23.4375rem;
      margin-bottom: -23.4375rem;
    }

    &::before {
      position: absolute;
      top: 0;
      right: -5.55556vw;
      width: 229.16667vw;
      height: 161.80556vw;
      background: url("/assets/images/oneaction/bg-about-oneaction-pc.svg") no-repeat;
      background-size: 229.16667vw 161.80556vw;
      content: "";
      mix-blend-mode: multiply;

      @media (max-width: 896px) {
        top: 0;
        right: -19.375rem;
        width: 103.125rem;
        height: 72.8125rem;
        background: url("/assets/images/oneaction/bg-about-oneaction-sp.svg") no-repeat;
        background-size: 103.125rem 72.8125rem;
      }
    }

    >.box-image-01 img,
    >.box-image-02 img,
    >.box-image-03 img,
    >.box-image-04 img {
      max-width: 100%;
      height: auto;
    }

    >.box-image-01 {
      position: absolute;
      top: min(14.16667dvw, 12.75rem);
      left: 0;
      overflow: hidden;
      width: min(22.22222dvw, 20rem);
      height: min(33.33333dvw, 30rem);
      border-radius: 2.5rem;

      @media (max-width: 896px) {
        top: min(23.46667dvw, 5.5rem);
        width: 21.33333dvw;
        height: 32dvw;
        border-radius: 0 1.875rem 1.875rem 0;
      }
    }

    >.box-image-02 {
      position: absolute;
      top: min(5.55556dvw, 5rem);
      right: min(8.33333dvw, 7.5rem);
      overflow: hidden;
      width: min(13.88889dvw, 12.5rem);
      height: min(22.22222dvw, 20rem);
      border-radius: 2.5rem;

      @media (max-width: 896px) {
        top: min(10.66667dvw, 2.5rem);
        right: min(4dvw, 0.9375rem);
        width: 26.66667dvw;
        height: 42.66667dvw;
        border-radius: 1.875rem;
      }
    }

    >.box-image-03 {
      position: absolute;
      top: min(35.69444dvw, 32.125rem);
      left: min(16.66667dvw, 15rem);
      overflow: hidden;
      width: min(11.11111dvw, 10rem);
      height: min(17.77778dvw, 16rem);
      border-radius: 2.5rem;

      @media (max-width: 896px) {
        top: min(134.13333dvw, 31.4375rem);
        left: min(4dvw, 0.9375rem);
        width: 23.46667dvw;
        height: 37.33333dvw;
        border-radius: 1.875rem;
      }
    }

    >.box-image-04 {
      position: absolute;
      top: min(44.02778dvw, 39.625rem);
      right: min(2.77778dvw, 2.5rem);
      overflow: hidden;
      width: min(27.77778dvw, 25rem);
      height: min(16.66667dvw, 15rem);
      border-radius: 2.5rem;

      @media (max-width: 896px) {
        top: min(145.86667dvw, 34.1875rem);
        right: min(-12.53333dvw, -2.9375rem);
        width: 70.93333dvw;
        height: 42.66667dvw;
        border-radius: 1.875rem;
      }
    }
  }

  /* ---------------------------------------------
  .oneaction-about-box
------------------------------------------------ */
  .oneaction-about-box {
    position: relative;
    padding-block: min(16.31944dvw, 14.6875rem) min(20.48611dvw, 18.4375rem);

    @media (max-width: 896px) {
      padding-block: min(51.73333dvw, 12.125rem) 61.06667dvw;
    }

    >.content {
      position: relative;
      z-index: 2;
      max-width: min(44.44444vw, 40rem);
      margin: 0 auto;
      padding-inline: 1.25rem;
      text-align: center;

      @media (max-width: 896px) {
        max-width: 17.8125rem;
        padding-inline: 0;
      }
    }

    >.content>.heading-box {
      color: var(--color-primary);
      text-align: center;
    }

    >.content>.heading-box>.sub {
      display: block;
      color: var(--color-primary);
      font-family: var(--font-family-montserrat);
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 1.20833;
      margin-block-end: 0.875rem;

      @media (max-width: 896px) {
        font-size: 1.5rem;
        margin-block-end: 0.75rem;
      }
    }

    >.content>.heading-box>.heading {
      position: relative;
      left: -1.375rem;
      display: block;
      color: var(--color-primary);
      font-family: var(--font-family-rockwell);
      font-size: min(6.66667vw, 6rem);
      font-weight: 700;
      line-height: 1;

      @media (max-width: 896px) {
        left: 0;
        font-size: 2.625rem;
      }
    }

    >.content>.lead-text {
      position: relative;
      display: inline-flex;
      color: var(--color-gray-dark);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.875;
      margin-block-start: 0.875rem;
      padding-inline: 3.4375rem;

      @media (max-width: 896px) {
        font-size: 0.75rem;
        margin-block-start: 0.3125rem;
        padding-inline: 2.5rem;
      }

      &::before,
      &::after {
        position: absolute;
        top: 50%;
        width: 2.5rem;
        height: 1px;
        background-color: var(--color-gray-dark);
        content: "";

        @media (max-width: 896px) {
          width: 1.5rem;
        }
      }

      &::before {
        left: 0;
      }

      &::after {
        right: 0;
      }
    }

    >.content>.text {
      color: var(--color-gray-dark);
      font-size: 1rem;
      font-weight: 500;
      line-height: 2;
      margin-block-start: 2.0625rem;

      @media (max-width: 896px) {
        font-size: 0.875rem;
        margin-block-start: 2rem;
        text-align: left;
      }
    }
  }

  /* ---------------------------------------------
  .oneaction-point-box
------------------------------------------------ */
  .oneaction-point-box {
    position: relative;
    z-index: 2;
    padding-block-start: 6.25rem;
    text-align: center;

    @media (max-width: 896px) {
      padding-block-start: 2.8125rem;
    }

    >.heading-box {
      display: inline-flex;
      flex-direction: column;
      padding-inline-end: 0;

      @media (max-width: 896px) {
        padding-inline-end: 0.8125rem;
      }
    }

    >.heading-box>.sub {
      display: block;
      font-family: var(--font-family-montserrat);
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 2;
      margin-block-end: 1px;
      padding-inline-start: 2.625rem;
      text-align: left;

      @media (max-width: 896px) {
        font-size: 0.875rem;
        line-height: 2.14286;
        margin-block-end: 0;
        padding-inline-start: 1.0625rem;
      }

      &::before,
      &::after {
        display: inline-block;
        width: 1.375rem;
        height: 1.375rem;
        content: "";

        @media (max-width: 896px) {
          width: 1.1875rem;
          height: 1.1875rem;
        }
      }

      &::before {
        background: url("/assets/images/oneaction/icon-deco-oneaction-01.svg") no-repeat;
      }

      &::after {
        background: url("/assets/images/oneaction/icon-deco-oneaction-02.svg") no-repeat;
      }
    }

    >.heading-box>.sub>.number {
      font-size: 1.75rem;
      font-weight: 400;
      line-height: 1.28571;

      @media (max-width: 896px) {
        font-size: 1.5rem;
        line-height: 1.25;
      }
    }

    >.heading-box>.heading {
      display: block;
      color: var(--color-gray-dark);
      font-family: var(--font-family-rockwell);
      font-size: 3rem;
      font-weight: 700;
      line-height: 1;

      @media (max-width: 896px) {
        position: relative;
        left: 0.5rem;
        font-size: 2rem;
      }
    }
  }

  /* ---------------------------------------------
  .oneaction-point-list
------------------------------------------------ */
  .oneaction-point-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.875rem;
    margin-block-start: 3rem;

    @media (max-width: 896px) {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      margin-block-start: 1.8125rem;
      row-gap: 0.5rem;
    }

    >li {
      width: calc(33.33333% - 1.25rem);
      padding: 2.5rem 1.875rem 2.4375rem;
      border-radius: 2.5rem;
      background-color: var(--color-white);
      text-align: center;

      @media (width < 1024px) {
        width: calc(50% - 0.9375rem);
      }

      @media (max-width: 896px) {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        padding: 1.5rem 1.5rem 1.4375rem;
        border-radius: 1.25rem;
        -moz-column-gap: 0.625rem;
        column-gap: 0.625rem;
        text-align: left;
      }
    }

    >li>.number {
      color: var(--color-gray);
      font-family: var(--font-family-montserrat);
      font-size: 0.75rem;
      font-weight: 700;
      line-height: 1.25;

      @media (max-width: 896px) {
        width: 1.625rem;
        flex: 0 0 auto;
        padding-block-start: 0.375rem;
      }
    }

    >li>.detail {
      margin-block-start: 1rem;

      @media (max-width: 896px) {
        flex: 1;
        margin-block-start: 0;
      }
    }

    >li>.detail>.title {
      color: var(--color-gray-dark);
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.5;

      @media (max-width: 896px) {
        font-size: 1.125rem;
      }
    }

    >li>.detail>.title>span {
      color: var(--color-primary);
    }

    >li>.detail>.text {
      color: var(--color-gray);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.5;
      margin-block-start: 0.5625rem;
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  .personnel-content
------------------------------------------------ */
  .personnel-content {
    padding-block: 3.75rem 5rem;
    row-gap: 3.625rem;

    @media (min-width: 897px) {
      padding-block: 5.75rem 10rem;
    }

    >.nav {
      @media (min-width: 897px) {
        padding-block-start: 0.5rem;
      }
    }

    >.content>.section {
      margin-block-start: 5rem;

      @media (min-width: 897px) {
        margin-block-start: 7.5rem;
      }

      &.personnel-approach {
        margin-block-start: 4.875rem;

        @media (min-width: 897px) {
          margin-block-start: 7.25rem;
        }
      }

      &.personnel-support {
        @media (max-width: 896px) {
          margin-block-start: 5.375rem;
        }
      }

      &.personnel-evaluation,
      &.personnel-career {
        margin-block-start: 4.9375rem;

        @media (min-width: 897px) {
          margin-block-start: 7.4375rem;
        }
      }
    }

    .text-primary {
      *+& {
        margin-block-start: 1.75rem;

        @media (min-width: 897px) {
          margin-block-start: 2rem;
        }
      }
    }

    >.content>.section>.heading-group-underline+.text-primary {
      margin-block-start: 1.375rem;

      @media (min-width: 897px) {
        margin-block-start: 1.75rem;
      }
    }

    >.content>.section>.image-box {
      padding: 2rem 1.5rem;
      border-radius: 1.25rem;
      background-color: var(--color-gray-lighter);
      margin-block-start: 2.375rem;
      text-align: center;

      @media (min-width: 897px) {
        border-radius: 2.5rem;
        margin-block-start: 2.25rem;
        padding-block: 4rem 4.5rem;
      }
    }

    >.content>.section>.image-box>picture {
      display: block;
      width: 100%;

      @media (min-width: 897px) {
        max-width: 44.375rem;
        margin: 0 auto;
      }
    }

    >.content>.section>.image-box>picture>img {
      width: 100%;
      height: auto;
    }

    >.content>.section>.tab-content {
      margin-block-start: 2.375rem;

      @media (min-width: 897px) {
        margin-block-start: 2.25rem;
      }
    }

    >.content>.section>.tab-content>.body {
      margin-block-start: 2.5rem;
    }
  }

  /* ---------------------------------------------
  .personnel-title
------------------------------------------------ */
  .personnel-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;

    @media (min-width: 897px) {
      font-size: 1.5rem;
    }

    &:not(:first-child) {
      margin-block-start: 1.5rem;

      @media (min-width: 897px) {
        margin-block-start: 2rem;
      }
    }

    +.text-primary {
      margin-block-start: 1.3125rem;

      @media (min-width: 897px) {
        margin-block-start: 1.6875rem;
      }
    }
  }

  /* ---------------------------------------------
  .personnel-support-list
------------------------------------------------ */
  .personnel-support-list {
    display: grid;
    margin-block-start: 2.375rem;
    row-gap: 1.75rem;

    @media (min-width: 897px) {
      margin-block-start: 2.25rem;
      row-gap: 2rem;
    }

    >li {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      padding: 1.1875rem 2.4375rem;
      border: 1px solid var(--color-gray-light);
      border-radius: 1.25rem;

      @media (min-width: 897px) {
        min-height: 4.625rem;
        align-items: center;
      }

      @media (max-width: 896px) {
        flex-direction: column;
        padding: 1.9375rem 1.4375rem 1.75rem;
        row-gap: 0.8125rem;
      }

      &:not(:last-child)::after {
        position: absolute;
        bottom: -1.3125rem;
        left: 50%;
        width: 0;
        height: 0;
        border-width: 12px 10px 0;
        border-color: var(--color-gray) transparent transparent transparent;
        content: "";
        transform: translateX(-50%);

        @media (min-width: 897px) {
          bottom: -1.4375rem;
        }
      }
    }

    >li>.title {
      width: 6.5rem;
      padding: 1px 0.625rem 0 0;
      color: var(--color-primary);
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.5;

      @media (max-width: 896px) {
        width: 100%;
        padding: 0;
        text-align: center;
      }
    }

    >li>.detail {
      color: var(--color-gray);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.76214;

      @media (min-width: 897px) {
        position: relative;
        flex: 1;
        line-height: 2;
        padding-inline-start: 2.0625rem;
      }

      &::before {
        @media (min-width: 897px) {
          position: absolute;
          top: 0.25rem;
          left: 0;
          width: 1px;
          height: calc(100% - 0.5rem);
          background-color: var(--color-gray-light);
          content: "";
        }
      }
    }
  }

  /* ---------------------------------------------
  .personnel-work-box
------------------------------------------------ */
  .personnel-work-box {
    display: grid;
    margin-block-start: 3.875rem;
    row-gap: 3.9375rem;

    @media (min-width: 897px) {
      margin-block-start: 4.75rem;
      row-gap: 4.9375rem;
    }

    >.item>.personnel-text-list {
      margin-block-start: 2.375rem;

      @media (min-width: 897px) {
        margin-block-start: 2.25rem;
      }
    }
  }

  /* ---------------------------------------------
  .personnel-text-list
------------------------------------------------ */
  .personnel-text-list {
    display: grid;
    row-gap: 1.1875rem;

    @media (min-width: 897px) {
      gap: 1.8125rem 1.875rem;
      grid-template-columns: repeat(2, 1fr);
    }

    >li {
      position: relative;
      padding-inline-start: 1.0625rem;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: calc(100% - 1px);
        background-color: var(--color-primary);
        content: "";
      }
    }

    >li>.title {
      color: var(--color-primary);
      font-weight: 700;
      line-height: 1.5;

      @media (min-width: 897px) {
        font-size: 1.125rem;
        line-height: 1.445;
      }
    }

    >li>.text {
      color: var(--color-gray);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.5;

      &:not(:first-child) {
        margin-block-start: 0.25rem;

        @media (min-width: 897px) {
          margin-block-start: 0.5rem;
        }
      }
    }
  }

  /* ---------------------------------------------
  .personnel-evaluation-box
------------------------------------------------ */
  .personnel-evaluation-box {
    display: grid;
    margin-block-start: 2.375rem;
    row-gap: 2.4375rem;

    @media (min-width: 897px) {
      margin-block-start: 2.25rem;
    }

    >.item>.title {
      padding: 0.5rem 1.0625rem 0.4375rem;
      border-radius: 0.625rem;
      background-color: var(--color-gray);
      color: var(--color-white);
      font-weight: 700;
      line-height: 1.5;
      margin-block-end: 1.5rem;

      @media (min-width: 897px) {
        margin-block-end: 1.5rem;
      }
    }
  }

  /* ---------------------------------------------
  .personnel-career-box
------------------------------------------------ */
  .personnel-career-box {
    padding: 1.9375rem 1.4375rem 2.75rem;
    border: 1px solid var(--color-gray-light);
    border-radius: 1.25rem;

    @media (min-width: 897px) {
      border-radius: 2.5rem;
      padding-block: 3.4375rem 4rem;
    }

    >.inner {
      width: 100%;

      @media (min-width: 897px) {
        max-width: 47.375rem;
        margin: 0 auto;
      }
    }

    >.inner>.lead {
      color: var(--color-primary);
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.429;
      margin-block-end: 0.5rem;
    }

    >.inner>.title {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.5;
      margin-block-end: 0.4375rem;

      @media (min-width: 897px) {
        font-size: 1.5rem;
      }
    }

    >.inner>.sub {
      color: var(--color-gray);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.41667;
      margin-block-end: 2rem;

      @media (min-width: 897px) {
        margin-block-end: 2.5rem;
      }
    }
  }

  /* ---------------------------------------------
  .personnel-career-list
------------------------------------------------ */
  .personnel-career-list {
    >li {
      display: flex;
      flex-wrap: wrap;
      -moz-column-gap: 0.9375rem;
      column-gap: 0.9375rem;

      @media (min-width: 897px) {
        -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
      }

      &:first-child {
        >.label>.year {
          padding-inline-start: 1rem;
        }

        >.content {
          padding-block: 0.8125rem 1.3125rem;
        }
      }

      &:last-child {
        >.content {
          border-bottom: none;
        }
      }

      &[data-color-variant="green"] {
        >.label {
          background-color: var(--color-green-03);
        }

        >.label::before {
          background-color: var(--color-green-04);
        }

        >.label::after {
          border-color: var(--color-green-03) transparent transparent transparent;
        }

        >.content>.heading>.tag {
          border-color: var(--color-green-03);
          color: var(--color-green-03);
        }

        >.content>.heading>.title {
          color: var(--color-green-03);
        }
      }

      &[data-color-variant="cyan"] {
        >.label {
          background-color: var(--color-green-04);
        }

        >.label::before {
          background-color: var(--color-blue-01);
        }

        >.label::after {
          border-color: var(--color-green-04) transparent transparent transparent;
        }

        >.content>.heading>.tag {
          border-color: var(--color-green-04);
          color: var(--color-green-04);
        }

        >.content>.heading>.title {
          color: var(--color-green-04);
        }
      }

      &[data-color-variant="medium-blue"] {
        >.label {
          background-color: var(--color-blue-01);
        }

        >.label::before {
          background-color: var(--color-primary);
        }

        >.label::after {
          border-color: var(--color-blue-01) transparent transparent transparent;
        }

        >.content>.heading>.tag {
          border-color: var(--color-blue-01);
          color: var(--color-blue-01);
        }

        >.content>.heading>.title {
          color: var(--color-blue-01);
        }
      }
    }

    >li>.label {
      position: relative;
      display: flex;
      width: 2rem;
      flex-direction: column;
      align-items: center;
      background-color: var(--color-primary);
      color: var(--color-white);
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.429;

      @media (min-width: 897px) {
        width: 2.5rem;
        font-size: 1rem;
        line-height: 1.5;
      }

      &::before,
      &::after {
        position: absolute;
        left: 0;
        content: "";
      }

      &::before {
        bottom: -0.75rem;
        width: 100%;
        height: 0.8125rem;
        background-color: var(--color-white);

        @media (min-width: 897px) {
          bottom: -0.5rem;
          height: 1rem;
        }
      }

      &::after {
        z-index: 1;
        bottom: -0.75rem;
        width: 0;
        height: 0;
        border-width: 13px 16px 0;
        border-color: var(--color-primary) transparent transparent transparent;

        @media (min-width: 897px) {
          bottom: -0.5rem;
          border-width: 16px 20px 0;
        }
      }
    }

    >li>.label>.year {
      position: relative;
      z-index: 1;
      padding-inline-start: 1.5rem;
      writing-mode: sideways-rl;

      @media (min-width: 897px) {
        padding-block-end: 0.125rem;
      }
    }

    >li>.label>.year>span {
      font-size: 0.625rem;
      margin-inline-start: 0.5rem;

      @media (min-width: 897px) {
        font-size: 0.75rem;
        margin-inline-start: 0.4375rem;
      }
    }

    >li>.content {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      align-items: flex-start;
      border-bottom: 1px solid var(--color-gray-light);
      gap: 0.8125rem 1rem;
      padding-block: 1.3125rem 1.375rem;

      @media (max-width: 896px) {
        flex-direction: column;
      }
    }

    >li>.content>.heading {
      width: 100%;

      @media (min-width: 897px) {
        width: 25.938%;
      }
    }

    >li>.content>.heading>.tag {
      display: inline-block;
      padding: 0.125rem 0.1875rem;
      border: 1px solid var(--color-primary);
      border-radius: 0.25rem;
      color: var(--color-primary);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.334;
      margin-block-end: 0.25rem;
      text-align: center;
    }

    >li>.content>.heading>.title {
      color: var(--color-primary);
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.5;
    }

    >li>.content>.detail {
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.75;

      @media (min-width: 897px) {
        flex: 1;
        padding-block-start: 1.6875rem;
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  #recruit-product-development
------------------------------------------------ */
  #recruit-product-development {
    >main>.hero-heading {
      @media (max-width: 896px) {
        padding-block-end: 2.5rem;
      }
    }
  }

  /* ---------------------------------------------
  .product-development-overview
------------------------------------------------ */
  .product-development-overview {
    >.hero>picture {
      @media (max-width: 896px) {
        display: block;
        margin: 0 -0.9375rem;
      }
    }

    >.hero>picture>img {
      width: 100%;
      height: auto;

      @media (min-width: 897px) {
        border-radius: 5rem;
      }
    }

    >.hero>.detail {
      padding-left: 1rem;
      border-left: 1px solid var(--color-primary);
      color: var(--color-gray);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.5;

      *+& {
        margin-block-start: 1.5rem;

        @media (max-width: 896px) {
          margin-block-start: 1.75rem;
        }
      }
    }

    >.box-message {
      display: flex;
      align-items: center;
      padding: 2rem 2.5rem 2.75rem;
      border-radius: 2.5rem;
      background-color: var(--color-gray-lighter);
      gap: 2.5rem;

      @media (max-width: 896px) {
        flex-direction: column;
        padding: 1rem 1.5rem 2.125rem;
        border-radius: 1.25rem;
        gap: 0.125rem;
      }

      *+& {
        margin-block-start: 2.5rem;
      }
    }

    >.box-message>.icon {
      width: 7.5rem;

      @media (min-width: 897px) {
        position: relative;
        top: -0.3125rem;
        width: 10.625rem;
        flex: 0 0 auto;
      }
    }

    >.box-message>.icon img {
      width: 100%;
      height: auto;
    }

    >.box-message>.content {
      color: var(--color-primary);
      font-weight: 500;
      line-height: 1.75;

      @media (max-width: 896px) {
        font-size: 0.875rem;
        line-height: 1.75;
      }
    }
  }

  /* ---------------------------------------------
  .product-development-interview
------------------------------------------------ */
  .product-development-interview {
    padding-block: 7.5rem 10.0625rem;

    @media (max-width: 896px) {
      padding-block: 4.5625rem 5.1875rem;
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  .qa-hero
------------------------------------------------ */
  .qa-hero {
    position: relative;

    @media (min-width: 897px) {
      display: grid;
      align-items: center;
      grid-template-columns: 35.06944dvw 1fr;
      padding-block-end: 5rem;
    }

    @media (max-width: 896px) {
      display: flex;
      flex-direction: column;
      background-color: var(--color-gray-lighter);
    }

    &::before {
      @media (min-width: 897px) {
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 50%;
        background-color: var(--color-gray-lighter);
        content: "";
      }
    }

    >.info {
      position: relative;
      z-index: 1;
      display: flex;
      padding: 1.38889dvw 2.77778dvw 1.38889dvw 9.375dvw;
      background-color: var(--color-white);

      @media (min-width: 897px) {
        min-height: 33.33333dvw;
        flex-direction: column;
        justify-content: center;
        border-radius: 0 5.55556dvw 5.55556dvw 0;
        gap: 1.66667dvw;
      }

      @media (max-width: 896px) {
        width: calc(100% - 1.875rem);
        padding: 1.25rem 1.5rem 1.5625rem;
        border-radius: 1.25rem;
        margin: 0 auto;
        transform: translateY(-50%);
      }
    }

    >.info>.heading {
      position: relative;

      @media (min-width: 897px) {
        padding-block-end: 2.08333dvw;
      }

      @media (max-width: 896px) {
        min-width: 6.0625rem;
        flex: 0 0 auto;
        border-right: 1px solid var(--color-gray-light);
        padding-block-start: 0.3125rem;
        padding-inline-end: 0.9375rem;
      }

      &::before {
        @media (min-width: 897px) {
          position: absolute;
          bottom: 0;
          left: 0;
          display: block;
          width: 4.375rem;
          height: 1px;
          background-color: var(--color-gray-light);
          content: "";
        }
      }
    }

    >.info>.heading>.title {
      color: var(--color-primary);
      font-family: var(--font-family-montserrat);
      font-size: 2.22222dvw;
      font-weight: 500;
      line-height: 1.15;

      @media (max-width: 896px) {
        font-size: 1.25rem;
      }
    }

    >.info>.heading>.subtitle {
      font-size: 1.11111dvw;
      font-weight: 500;
      line-height: 1.7;

      @media (max-width: 896px) {
        font-size: 0.75rem;
      }
    }

    >.info>.profile {
      @media (max-width: 896px) {
        padding-block-start: 0.25rem;
        padding-inline-start: 1.5rem;
      }
    }

    >.info>.profile>.department {
      font-size: 1.38889dvw;
      font-weight: 700;
      line-height: 1.5;

      @media (max-width: 896px) {
        font-size: 1rem;
      }
    }

    >.info>.profile>.date {
      font-size: 1.11111dvw;
      font-weight: 500;
      line-height: 2;

      @media (max-width: 896px) {
        font-size: 0.75rem;
        margin-block-start: 0.25rem;
      }

      *+& {
        margin-block-start: 0.69444dvw;

        @media (max-width: 896px) {
          margin-block-start: 0.3125rem;
        }
      }
    }

    >.info>.profile>.name {
      font-size: 1.66667dvw;
      font-weight: 500;
      line-height: 1.2;

      @media (max-width: 896px) {
        font-size: 1rem;
      }
    }

    >.image {
      position: relative;
      z-index: 0;

      @media (min-width: 897px) {
        margin-inline-start: -8.40278dvw;
      }

      @media (max-width: 896px) {
        order: -1;
      }
    }

    >.image>picture>img,
    >.image>img {
      display: block;
      width: 100%;
      height: auto;

      @media (min-width: 897px) {
        border-radius: 5.55556dvw 0 0 5.55556dvw;
      }
    }
  }

  /* ---------------------------------------------
  .qa-faq
------------------------------------------------ */
  .qa-faq {
    >.container {
      padding-block: 7.5rem 10rem;

      @media (max-width: 896px) {
        padding-block: 4rem 4.9375rem;
      }
    }

    >.container>.inner>.list-faq {
      display: flex;
      flex-direction: column;
      gap: 4.75rem;
    }

    >.container>.inner>.list-faq>li>.card {
      display: flex;
      flex-direction: column;
      gap: 2.1875rem;

      @media (max-width: 896px) {
        gap: 1.1875rem;
      }
    }

    >.container>.inner>.list-faq>li>.card>.heading {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    >.container>.inner>.list-faq>li>.card>.heading>.icon {
      display: flex;
      width: 2.5rem;
      height: 2.5rem;
      flex: 0 0 2.5rem;
      align-items: center;
      justify-content: center;
      background-image: url("/assets/images/common/bg-faq-q.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      color: var(--color-white);
      font-family: var(--font-family-montserrat);
      font-weight: 600;
      line-height: 1;
    }

    >.container>.inner>.list-faq>li>.card>.heading>.icon>.number {
      font-size: 1.25rem;
    }

    >.container>.inner>.list-faq>li>.card>.heading>.icon>.question>span {
      font-size: 0.75rem;
    }

    >.container>.inner>.list-faq>li>.card>.heading>.text {
      color: var(--color-primary);
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.33333;

      @media (max-width: 896px) {
        font-size: 1.125rem;
        line-height: 1.5;
      }
    }

    >.container>.inner>.list-faq>li>.card>.content>.text {
      font-weight: 500;
      line-height: 2;
    }

    >.container>.inner>.list-faq>li>.card>.content>picture,
    >.container>.inner>.list-faq>li>.card>.content>figure {
      display: block;
      text-align: center;
    }

    >.container>.inner>.list-faq>li>.card>.content>picture>img,
    >.container>.inner>.list-faq>li>.card>.content>figure>img {
      max-width: 100%;
      height: auto;
      border-radius: 5rem;

      @media (max-width: 896px) {
        border-radius: 2.5rem;
      }
    }

    >.container>.inner>.list-faq>li>.card>.content>*+picture,
    >.container>.inner>.list-faq>li>.card>.content>*+figure {
      margin-block: 4.8125rem 0.25rem;

      @media (max-width: 896px) {
        margin-block-start: 4.75rem;
      }
    }

    >.container>.inner>.box-button {
      display: flex;
      justify-content: center;
      border-top: 1px solid var(--color-gray-light);
      border-bottom: 1px solid var(--color-gray-light);
      padding-block: 5rem;

      @media (max-width: 896px) {
        padding: 2.5625rem 0.9375rem 2.5rem;
        margin-inline: -0.9375rem;
      }

      *+& {
        margin-block-start: 9.75rem;

        @media (max-width: 896px) {
          margin-block-start: 4.75rem;
        }
      }
    }

    >.container>.inner>.box-button>.button {
      @media (max-width: 896px) {
        max-width: 13.75rem;
      }
    }
  }

  /* ---------------------------------------------
  .qa-employee
------------------------------------------------ */
  .qa-employee {
    padding-block: 4.75rem 10rem;

    @media (max-width: 896px) {
      padding-block: 2.25rem 5rem;
    }

    >.container {
      @media (min-width: 897px) {
        max-width: 77.375rem;
      }
    }

    >.container>.lead {
      font-weight: 500;
      line-height: 2;

      @media (min-width: 897px) {
        text-align: center;
      }
    }

    >.container>.list {
      display: grid;
      gap: 0.375rem 1.875rem;
      grid-template-columns: repeat(3, 1fr);
      padding-inline: 0.875rem;

      @media (max-width: 896px) {
        gap: 1rem;
        grid-template-columns: repeat(1, 1fr);
        padding-inline: 0;
      }

      *+& {
        margin-block-start: 4.375rem;

        @media (max-width: 896px) {
          margin-block-start: 4.75rem;
        }
      }
    }

    >.container>.list>li {
      @media (min-width: 897px) {
        position: relative;
      }

      &:nth-child(6n + 1),
      &:nth-child(6n + 2),
      &:nth-child(6n + 3) {
        @media (min-width: 897px) {
          left: 0.875rem;
        }
      }

      &:nth-child(3n + 2) {
        @media (min-width: 897px) {
          margin-block-start: 2.5rem;
        }
      }

      &:nth-child(3n + 1) {
        @media (min-width: 897px) {
          margin-block-start: 5rem;
        }
      }
    }

    >.container>.list>li>.card {
      position: relative;
      display: block;
      overflow: hidden;
      border-radius: 2.5rem;

      &::before {
        position: absolute;
        z-index: 1;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: min(19.83471vw, 15rem);
        border-radius: 0 0 2.5rem 2.5rem;
        background: linear-gradient(rgb(12 32 56 / 0%) 0%, #0c2038 100%);
        content: "";

        @media (max-width: 896px) {
          height: 32vw;
          background: linear-gradient(rgb(0 0 0 / 0%) 0%, #0c2038 100%);
        }
      }

      @media (hover: hover) and (pointer: fine) {
        transition: all var(--transition-duration) var(--transition-timing-function);

        &:hover {
          >picture>img {
            transform: scale(1.07);
          }

          >.detail>.arrow::before {
            transform: scale(1.2);
          }

          >.detail>.arrow>i::before {
            opacity: 1;
            transform: translateX(0);
          }

          >.detail>.arrow>i::after {
            opacity: 0;
            transform: translateX(20px);
          }
        }
      }
    }

    >.container>.list>li>.card>picture {
      display: block;
      overflow: hidden;
      width: 100%;

      @media (min-width: 897px) {
        aspect-ratio: 370 / 480;
      }
    }

    >.container>.list>li>.card>picture>img {
      display: block;
      width: 100%;
      height: 100%;

      @media (min-width: 897px) {
        -o-object-fit: cover;
        object-fit: cover;
      }

      @media (hover: hover) and (pointer: fine) {
        transition: transform var(--transition-duration) var(--transition-timing-function);
      }
    }

    >.container>.list>li>.card>.detail {
      position: absolute;
      z-index: 2;
      bottom: 0;
      left: 0;
      display: grid;
      width: 100%;
      align-items: flex-end;
      justify-content: space-between;
      padding: min(2.64463vw, 2rem);
      border-radius: 0 0 2.5rem 2.5rem;
      background: linear-gradient(to top, rgb(0 0 0 / 60%) 0%, transparent 100%);
      color: var(--color-white);
      grid-template-columns: auto 3rem;

      @media (max-width: 896px) {
        padding: 1.5rem;
      }
    }

    >.container>.list>li>.card>.detail>.profile>.department {
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.33333;

      @media (max-width: 896px) {
        font-size: 1rem;
      }
    }

    >.container>.list>li>.card>.detail>.profile>.date {
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.334;
    }

    >.container>.list>li>.card>.detail>.profile>*+.date {
      margin-block-start: 0.625rem;
    }

    >.container>.list>li>.card>.detail>.profile>.name {
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.5;
    }

    >.container>.list>li>.card>.detail>.arrow {
      position: relative;
      width: 3rem;
      height: 3rem;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 3rem;
        height: 3rem;
        border-radius: 3rem;
        background-color: var(--color-white);
        content: "";
        transition: transform var(--transition-duration) var(--transition-timing-function);
      }
    }

    >.container>.list>li>.card>.detail>.arrow>i {
      position: absolute;
      top: 50%;
      left: 50%;
      overflow: hidden;
      width: 0.75rem;
      height: 0.75rem;
      transform: translate(-50%, -50%);

      &::before,
      &::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("/assets/images/common/icon-arrow-right-03.svg") no-repeat left top / contain;
        content: "";
        transition: all var(--transition-duration) var(--transition-timing-function);
      }

      &::before {
        opacity: 0;
        transform: translateX(-20px);
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  .overview-content
------------------------------------------------ */
  .overview-content {
    width: 100%;
    padding: 2.25rem 0.9375rem 4.875rem;

    @media (min-width: 897px) {
      max-width: calc(var(--max-width-xl) + 2.5rem);
      padding: 4.75rem 1.25rem 7.75rem;
      margin: 0 auto;
    }

    >.lead {
      font-weight: 500;
      line-height: 2;
      margin-block-end: 4.75rem;

      @media (min-width: 897px) {
        margin-block-end: 7.25rem;
        text-align: center;
      }
    }
  }

  /* ---------------------------------------------
  .overview-section
------------------------------------------------ */
  .overview-section {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;

    @media (max-width: 896px) {
      flex-direction: column;
    }

    >.head {
      width: 100%;

      @media (min-width: 897px) {
        width: 30.77%;
      }
    }

    >.body {
      @media (min-width: 897px) {
        flex: 1;
      }
    }

    >.body>.group>.heading-box {
      position: relative;
      padding: 2.375rem 1.5rem;
      border-radius: 1.25rem;
      background-color: var(--color-primary);
      color: var(--color-white);
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.75;
      text-align: center;

      @media (min-width: 897px) {
        font-size: 1.125rem;
        line-height: 2;
        padding-block: 2.6875rem;
      }

      &::before,
      &::after {
        position: absolute;
        width: 0.8125rem;
        height: 0.75rem;
        background: url("/assets/images/recruit/about/icon-quote-01.svg") no-repeat left top / contain;
        content: "";
      }

      &::before {
        top: 1rem;
        left: 1rem;

        @media (min-width: 897px) {
          top: 1.5rem;
          left: 1.5rem;
        }
      }

      &::after {
        right: 1rem;
        bottom: 1.0625rem;
        transform: rotate(180deg);

        @media (min-width: 897px) {
          right: 1.5rem;
          bottom: 1.5625rem;
        }
      }
    }

    >.body>.group {
      &:last-of-type {
        >.overview-box {
          @media (max-width: 896px) {
            padding-block-end: 0.125rem;
          }
        }

        >.overview-box>.detail {
          @media (min-width: 897px) {
            padding-block-end: 0;
          }
        }
      }

      &+& {
        margin-block-start: 3rem;

        @media (min-width: 897px) {
          margin-block-start: 3.5rem;
        }
      }
    }

    >.body>.group>.row {
      margin-block-start: 2.5rem;

      &+& {
        margin-block-start: 2.375rem;

        @media (min-width: 897px) {
          margin-block-start: 2.25rem;
        }
      }
    }

    >.body>.group>.row>.heading-border-left+.text-primary {
      margin-block-start: 0.875rem;

      @media (min-width: 897px) {
        margin-block-start: 0.75rem;
      }
    }

    >.body>.group>.date {
      color: var(--color-gray);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.41667;
      margin-block-start: 1rem;
      text-align: right;
    }

    >.body>.group>.date+.text-primary {
      margin-block-start: 2.375rem;

      @media (min-width: 897px) {
        margin-block-start: 2.25rem;
      }
    }

    &+& {
      margin-block-start: 4.875rem;

      @media (min-width: 897px) {
        margin-block-start: 7.25rem;
      }
    }
  }

  /* ---------------------------------------------
  .overview-business-list
------------------------------------------------ */
  .overview-business-list {
    display: grid;
    margin-block-start: 2.5rem;
    padding-block-end: 0.125rem;
    row-gap: 2.4375rem;

    @media (min-width: 897px) {
      padding-block-end: 0.25rem;
      row-gap: 2.5rem;
    }

    >li {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      -moz-column-gap: 0.9375rem;
      column-gap: 0.9375rem;

      @media (min-width: 897px) {
        -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
      }
    }

    >li>figure {
      position: relative;
      overflow: hidden;
      width: 4.6875rem;
      height: 4.6875rem;
      border-radius: 0.625rem;
      aspect-ratio: 1 / 1;

      @media (min-width: 897px) {
        width: 6rem;
        height: 6rem;
      }

      &::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 1px solid var(--color-gray-light);
        border-radius: 0.625rem;
        content: "";
      }
    }

    >li>figure>img {
      width: 100%;
      height: auto;
    }

    >li>.detail {
      flex: 1;

      @media (min-width: 897px) {
        padding-block-start: 0.3125rem;
      }
    }

    >li>.detail>.link {
      border-bottom: 1px solid var(--color-gray-light);
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.429;
      margin-block-end: 0.5rem;
      padding-block-end: 0.5rem;

      @media (min-width: 897px) {
        font-size: 1rem;
        line-height: 1.5;
      }
    }

    >li>.detail>.link>a {
      color: var(--color-primary);

      @media (hover: hover) and (pointer: fine) {
        transition: opacity var(--transition-duration) var(--transition-timing-function);

        &:hover {
          opacity: 0.7;
        }
      }
    }

    >li>.detail>.lead {
      color: var(--color-gray);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.5;
      margin-block-end: 0.1875rem;
    }

    >li>.detail>.text {
      font-weight: 700;
      line-height: 1.5;

      @media (max-width: 896px) {
        font-size: 0.875rem;
      }
    }
  }

  /* ---------------------------------------------
  .overview-people-list
------------------------------------------------ */
  .overview-people-list {
    display: grid;
    margin-block-start: 1.5rem;
    row-gap: 1rem;

    @media (min-width: 897px) {
      gap: 1.875rem;
      grid-template-columns: repeat(2, 1fr);
      margin-block-start: 2.5rem;
    }

    >li {
      overflow: hidden;
      min-height: 11.0625rem;
      padding: 1.4375rem min(1.1875rem, 5.06667dvw) 1rem;
      border: 1px solid var(--color-primary);
      border-radius: 1.25rem;

      @media (min-width: 897px) {
        padding-inline: min(1.1875rem, 1.57025dvw);
      }

      &:nth-child(2) {
        >.title {
          margin-block-end: 1.0625rem;
        }
      }

      &:nth-child(4) {
        >.title {
          margin-block-end: 1.0625rem;
        }
      }

      &:nth-child(5) {
        padding-block-end: 1.9375rem;

        >.title {
          margin-block-end: 1.5rem;
        }

        >figure>img {
          max-height: 24.6875rem;
        }
      }

      &:nth-child(6) {
        padding-block-end: 1.9375rem;

        >.title {
          margin-block-end: 1.5rem;
        }

        >figure>img {
          max-height: 19.625rem;
        }
      }
    }

    >li>.title {
      color: var(--color-primary);
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.5;
      margin-block-end: 1.0625rem;
      text-align: center;
    }

    >li>figure {
      text-align: center;
    }

    >li>figure>img {
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: 7.25rem;
    }
  }

  /* ---------------------------------------------
  .overview-people-box-01
------------------------------------------------ */
  .overview-people-box-01 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(1rem, 1.32231dvw);

    @media (max-width: 896px) {
      gap: min(1rem, 4.26667dvw);
    }

    >figure {
      max-width: min(4.9375rem, 6.52893dvw);

      @media (max-width: 896px) {
        max-width: min(4.9375rem, 21.06667dvw);
      }
    }

    >figure>img {
      width: 100%;
      height: auto;
    }

    >.wrap {
      display: flex;
      align-items: baseline;
      line-height: 1;
      margin-block-start: max(-0.4375rem, -0.57851dvw);

      @media (max-width: 896px) {
        margin-block-start: max(-0.375rem, -1.6dvw);
      }
    }

    >.wrap>.number {
      color: var(--color-primary);
      font-size: min(5rem, 6.61157dvw);
      font-weight: bold;
      line-height: 1;

      @media (max-width: 896px) {
        font-size: min(5rem, 21.33333dvw);
      }
    }

    >.wrap>.unit {
      position: relative;
      top: -0.125rem;
      color: var(--color-primary);
      font-size: min(2rem, 2.64463dvw);
      font-weight: bold;
      line-height: 1;
      margin-inline-start: -1px;

      @media (max-width: 896px) {
        font-size: min(2rem, 8.53333dvw);
      }
    }
  }

  /* ---------------------------------------------
  .overview-people-box-02
------------------------------------------------ */
  .overview-people-box-02 {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: min(1rem, 1.32231dvw);

    @media (max-width: 896px) {
      gap: min(1rem, 4.26667dvw);
    }

    >figure {
      max-width: min(4.75rem, 6.28099dvw);

      @media (max-width: 896px) {
        max-width: min(4.75rem, 20.26667dvw);
      }
    }

    >figure>img {
      width: 100%;
      height: auto;
    }

    >.wrap {
      display: flex;
      align-items: flex-start;
      gap: min(1rem, 1.32231dvw);
      padding-block-end: 0.125rem;

      @media (max-width: 896px) {
        gap: min(1rem, 4.26667dvw);
      }
    }

    >.wrap>.item {
      display: grid;
      row-gap: min(0.875rem, 1.15702dvw);

      @media (max-width: 896px) {
        row-gap: min(0.875rem, 3.73333dvw);
      }
    }

    >.wrap>.item>.box {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
    }

    >.wrap>.item>.box>.title {
      display: table-cell;
      color: var(--color-primary);
      font-size: min(0.875rem, 1.15702dvw);
      font-weight: bold;
      line-height: 1;
      padding-inline-end: 0.5rem;

      @media (max-width: 896px) {
        font-size: min(0.875rem, 3.73333dvw);
      }
    }

    >.wrap>.item>.box>.right>.number {
      position: relative;
      top: 1px;
      display: table-cell;
      color: var(--color-primary);
      font-size: min(2rem, 2.64463dvw);
      font-weight: bold;
      line-height: 1;
      text-align: right;

      @media (max-width: 896px) {
        font-size: min(2rem, 8.53333dvw);
      }
    }

    >.wrap>.item>.box>.right>.unit {
      display: table-cell;
      color: var(--color-primary);
      font-size: min(1rem, 1.32231dvw);
      font-weight: bold;
      line-height: 1;

      @media (max-width: 896px) {
        font-size: min(1rem, 4.26667dvw);
      }
    }
  }

  /* ---------------------------------------------
  .overview-people-box-03
------------------------------------------------ */
  .overview-people-box-03 {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: min(1rem, 1.32231dvw);

    @media (max-width: 896px) {
      gap: min(1rem, 4.26667dvw);
    }

    >figure {
      max-width: min(2.5rem, 3.30579dvw);

      @media (max-width: 896px) {
        max-width: min(2.5rem, 10.66667dvw);
      }

      &:first-of-type {
        max-width: min(1.75rem, 2.31405dvw);

        @media (max-width: 896px) {
          max-width: min(1.75rem, 7.46667dvw);
        }
      }
    }

    >figure>img {
      width: 100%;
      height: auto;
    }

    >.wrap {
      display: flex;
      align-items: baseline;
      line-height: 1;
      padding-block-end: min(0.25rem, 0.33058dvw);

      @media (max-width: 896px) {
        padding-block-end: min(0.25rem, 1.06667dvw);
      }
    }

    >.wrap>.number {
      color: var(--color-primary);
      font-size: min(3.5rem, 4.6281dvw);
      font-weight: bold;
      line-height: 1;

      @media (max-width: 896px) {
        font-size: 3.5rem;
      }

      @media (width < 375px) {
        font-size: 2.125rem;
      }
    }

    >.wrap>.unit {
      position: relative;
      top: -0.125rem;
      color: var(--color-primary);
      font-size: min(1.75rem, 2.31405dvw);
      font-weight: bold;
      line-height: 1;

      @media (max-width: 896px) {
        font-size: 1.75rem;
      }

      @media (width < 375px) {
        font-size: 1rem;
      }
    }
  }

  /* ---------------------------------------------
  .overview-people-box-04
------------------------------------------------ */
  .overview-people-box-04 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(1rem, 1.32231dvw);

    @media (max-width: 896px) {
      gap: min(1rem, 4.26667dvw);
    }

    >figure {
      max-width: min(4.375rem, 5.78512dvw);

      @media (max-width: 896px) {
        max-width: min(4.375rem, 18.66667dvw);
      }
    }

    >figure>img {
      width: 100%;
      height: auto;
    }

    >.wrap {
      display: flex;
      align-items: baseline;
      line-height: 1;
      margin-block-start: max(-0.375rem, -0.49587dvw);

      @media (max-width: 896px) {
        margin-block-start: max(-0.375rem, -1.6dvw);
      }
    }

    >.wrap>.number {
      color: var(--color-primary);
      font-size: min(5rem, 6.61157dvw);
      font-weight: bold;
      line-height: 1;

      @media (max-width: 896px) {
        font-size: min(5rem, 21.33333dvw);
      }
    }

    >.wrap>.unit {
      position: relative;
      top: -0.125rem;
      color: var(--color-primary);
      font-size: min(2rem, 2.64463dvw);
      font-weight: bold;
      line-height: 1;

      @media (max-width: 896px) {
        font-size: min(2rem, 8.53333dvw);
      }
    }

    >.wrap>.sub {
      position: relative;
      top: -0.125rem;
      color: var(--color-primary);
      font-size: min(1rem, 1.32231dvw);
      font-weight: 500;
      line-height: 1;
      padding-inline-start: min(1.25rem, 1.65289dvw);

      @media (max-width: 896px) {
        font-size: min(1rem, 4.26667dvw);
        padding-inline-start: min(1.25rem, 5.33333dvw);
      }

      &::before {
        position: absolute;
        top: -0.3125rem;
        left: 0.5625rem;
        width: 1px;
        height: 1.5rem;
        background-color: var(--color-primary);
        content: "";
        transform: rotate(25deg);
      }
    }
  }

  /* ---------------------------------------------
  .overview-box
------------------------------------------------ */
  .overview-box {
    display: flex;
    flex-wrap: wrap;
    gap: 1.375rem 1.875rem;
    margin-block-start: 2.25rem;

    @media (max-width: 896px) {
      flex-direction: column;
      margin-block-start: 1.375rem;
    }

    >.detail {
      font-weight: 500;
      line-height: 1.75;

      @media (min-width: 897px) {
        flex: 1;
        line-height: 2;
        padding-block-end: 0.25rem;
      }
    }

    >.image {
      width: 100%;
      text-align: center;

      @media (min-width: 897px) {
        width: 35.066%;
        padding-block-start: 0.25rem;
      }

      &[data-image-variant="shifted-right"] {
        padding-inline-start: min(2.875rem, 12.26667dvw);

        @media (min-width: 897px) {
          padding-inline: 0 min(1.4375rem, 1.90083dvw);
          text-align: right;
        }
      }
    }

    >.image>img {
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: 7.5rem;

      @media (min-width: 897px) {
        max-height: 10rem;
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  .recruit-hero
------------------------------------------------ */
  .recruit-hero {
    position: relative;
    min-height: 100svh;
    margin-block-start: -3rem;

    @media (min-width: 897px) {
      margin-block-start: -11.5625rem;
    }

    >.image>img {
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }

    >.content {
      position: absolute;
      z-index: 2;
      bottom: 2.4375rem;
      left: 0;
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;

      @media (min-width: 897px) {
        right: 4rem;
        bottom: 8.75rem;
        left: auto;
        width: auto;
        align-items: flex-start;
      }

      @media (width > 1440px) {
        right: 5rem;
        bottom: 13.1875rem;
      }
    }

    >.content>.heading {
      width: 21.5625rem;
      margin-block-end: max(2.0625rem, 8.8vw);
      margin-inline: auto;

      @media (min-width: 897px) {
        width: min(46.3125rem, 51.45833vw);
        margin-block-end: max(2rem, 2.22222vw);
      }

      @media (width > 1440px) {
        width: min(61.6875rem, 51.40625vw);
        margin-block-end: max(2.625rem, 2.1875vw);
      }
    }

    >.content>.heading>img {
      display: block;
      width: 100%;
      height: auto;
    }

    >.content .text {
      display: flex;
      flex-direction: column;
      padding-right: 1.25rem;
      color: var(--color-white);
      font-size: 0.875rem;
      font-weight: 700;
      gap: 0.125rem;
      letter-spacing: 0.1em;
      line-height: 1.5;

      @media (min-width: 897px) {
        padding-right: 0;
        font-size: 1rem;
        gap: 0.25rem;
        line-height: 1.5;
      }

      @media (width > 1440px) {
        font-size: clamp(1rem, 1.04167vw, 1.25rem);
        gap: 0.5rem;
        line-height: 1.45;
      }

      span {
        @media (max-width: 896px) {
          position: relative;
          display: block;
        }
      }

      > :first-child {
        text-indent: 60px;

        @media (min-width: 897px) {
          text-indent: 40px;
        }

        @media (width > 1440px) {
          text-indent: 53px;
        }

        span {
          @media (max-width: 896px) {
            text-indent: 51px;
          }
        }
      }

      > :nth-child(2) {
        text-indent: 41px;

        @media (min-width: 897px) {
          text-indent: 20px;
        }

        @media (width > 1440px) {
          text-indent: 27px;
        }

        span {
          @media (max-width: 896px) {
            text-indent: 33px;
          }
        }
      }

      > :nth-child(3) {
        text-indent: 20px;

        @media (min-width: 897px) {
          text-indent: 0;
        }

        @media (width > 1440px) {
          text-indent: 0;
        }
      }

      > :nth-child(4) {
        text-indent: 10px;

        @media (min-width: 897px) {
          text-indent: 20px;
        }

        @media (width > 1440px) {
          text-indent: 26px;
        }
      }
    }
  }

  /* ---------------------------------------------
  .recruit-top-section
------------------------------------------------ */
  .recruit-top-section {
    position: relative;
    overflow: hidden;
    padding-block: 5rem;

    @media (min-width: 897px) {
      padding-block: 10rem;
    }

    &::before {
      position: absolute;
      z-index: 0;
      top: 2.5rem;
      right: 0;
      left: 0;
      aspect-ratio: 1 / 1;
      background-color: var(--color-gray-lighter);
      clip-path: polygon(100% 0, 100% 100%, 0 100%);
      content: "";

      @media (min-width: 897px) {
        inset: 0 50% 0 auto;
        transform: translateX(492px);
      }

      @media (width > 1440px) {
        transform: translateX(555px);
      }
    }

    &::after {
      position: absolute;
      background-color: var(--color-gray-lighter);
      content: "";
      inset: calc(100vw + 2.5rem) 0 0;

      @media (min-width: 897px) {
        top: 0;
        left: 50%;
        transform: translateX(491px);
        /* -1px to prevent sub-pixel rendering issues */
      }

      @media (width > 1440px) {
        transform: translateX(554px);
      }
    }

    >.hero-heading {
      position: relative;
      z-index: 1;
      padding-block: 0 2.5rem;

      @media (min-width: 897px) {
        max-width: calc(var(--max-width-xl) + 5rem);
        padding-inline: 2.5rem;
      }
    }

    >.container {
      position: relative;
      z-index: 1;

      @media (min-width: 897px) {
        max-width: calc(var(--max-width-xxxl) + 5rem);
        padding-inline: 2.5rem;
      }
    }

    &[data-section="company"] {
      @media (max-width: 896px) {
        padding-block-start: 4rem;
      }

      >.hero-heading {
        @media (min-width: 897px) {
          padding-block-end: 0;
        }
      }
    }

    &[data-section="work"] {
      padding-bottom: 2.5rem;
      background-color: var(--color-primary);

      &::before,
      &::after {
        background-color: var(--color-secondary);
      }

      >.box-marquee {
        position: relative;
        z-index: 1;
        margin-block-start: 3rem;
        pointer-events: none;

        @media (min-width: 897px) {
          margin-block-start: 5rem;
        }
      }

      >.box-marquee>.item {
        opacity: 0.1;
      }

      >.box-marquee>.item>img {
        display: block;
        width: auto;
        height: 6rem;

        @media (min-width: 897px) {
          height: 9.75rem;
        }
      }
    }

    &[data-section="people"] {
      padding-bottom: 2.5rem;

      &::before,
      &::after {
        background-color: var(--color-gray-light-medium);
      }

      >.box-marquee {
        position: relative;
        z-index: 1;
        margin-block-start: 3rem;
        pointer-events: none;

        @media (min-width: 897px) {
          margin-block-start: 5rem;
        }
      }

      >.box-marquee>.item {
        opacity: 0.05;
      }

      >.box-marquee>.item>img {
        display: block;
        width: auto;
        height: 4.5rem;

        @media (min-width: 897px) {
          height: 7.6875rem;
        }
      }
    }

    &[data-section="culture"] {
      margin-block-end: -23.4375rem;
      padding-block-end: 23.4375rem;

      >.hero-heading {
        @media (min-width: 897px) {
          padding-block-end: 0;
        }
      }
    }
  }

  /* ---------------------------------------------
  .recruit-top-box-job
------------------------------------------------ */
  .recruit-top-box-job {
    padding: 2.5rem 1.5rem 2rem;
    border-radius: 1.25rem;
    background-color: var(--color-white);

    @media (min-width: 897px) {
      padding: 6rem 5.9375rem 2.5rem;
      border-radius: 2.5rem;
    }

    >.inner {
      max-width: 73.125rem;
      margin-inline: auto;

      @media (min-width: 897px) {
        display: flex;
        justify-content: space-between;
      }
    }

    >.inner>.heading>.title-sub {
      color: var(--color-primary);
      font-family: var(--font-family-montserrat);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.1875;
    }

    >.inner>.heading>.title-main {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.45;
      margin-block-start: 0.25rem;

      @media (min-width: 897px) {
        font-size: 1.5rem;
        line-height: 1.45833;
        margin-block-start: 0.5rem;
      }
    }

    >.inner>.content {
      margin-block-start: 1.5rem;

      @media (min-width: 897px) {
        max-width: 29.375rem;
        flex: 1;
        margin-block-start: -0.3125rem;
      }
    }

    >.inner>.content>.text {
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.75;

      @media (min-width: 897px) {
        font-size: 1rem;
        line-height: 2;
      }
    }

    >.inner>.content>.button {
      max-width: 14.1875rem;
      margin-block-start: 2.5rem;

      @media (min-width: 897px) {
        max-width: 16.875rem;
        margin-block-start: 2.1875rem;
      }
    }
  }

  /* ---------------------------------------------
  .recruit-top-work-slider
------------------------------------------------ */
  .recruit-top-work-slider {
    margin-block-start: 3.5rem;

    @media (min-width: 897px) {
      margin-block-start: 4rem;
    }

    >.swiper {
      overflow: visible;
    }

    >.swiper>.swiper-wrapper {
      transition-timing-function: linear;
    }

    >.swiper>.swiper-wrapper>.swiper-slide {
      width: 22.5rem;

      @media (min-width: 897px) {
        width: 40rem;
      }
    }

    >.swiper>.swiper-wrapper>.swiper-slide>img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 1.25rem;
    }
  }

  /* ---------------------------------------------
  .recruit-top-box-story
------------------------------------------------ */
  .recruit-top-box-story {
    max-width: 73.125rem;
    margin-block-start: 4rem;
    margin-inline: auto;

    @media (min-width: 897px) {
      display: flex;
      gap: min(6.25rem, 8vw);
      margin-block-start: 7.5rem;
    }

    >.image {
      @media (min-width: 897px) {
        max-width: 35.625rem;
        flex: 1;
      }
    }

    .image>img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 2.5rem;
    }

    >.content {
      color: var(--color-white);
      margin-block-start: 1rem;

      @media (min-width: 897px) {
        width: min(31.25rem, 40vw);
        align-self: center;
        margin-block-start: 0;
      }
    }

    >.content>.heading-sub {
      font-family: var(--font-family-montserrat);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.1875;
    }

    >.content>.heading-main {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.45;
      margin-block-start: 0.5rem;

      @media (min-width: 897px) {
        font-size: 1.5rem;
        line-height: 1.45833;
      }
    }

    >.content>.text {
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.75;
      margin-block-start: 1.5625rem;

      @media (min-width: 897px) {
        font-size: 1rem;
        line-height: 2;
        margin-block-start: 2.1875rem;
      }
    }

    >.content>.button {
      max-width: 14.1875rem;
      margin-block-start: 2.5rem;
      white-space: nowrap;

      @media (min-width: 897px) {
        max-width: 16.875rem;
        margin-block-start: 2.1875rem;
        white-space: normal;
      }
    }

    &[data-type="people"] {
      @media (min-width: 897px) {
        flex-direction: row-reverse;
        margin-block-start: 6rem;
      }

      >.content {
        color: var(--color-gray-dark);
        margin-block-start: 1.5rem;

        @media (min-width: 897px) {
          /* width: 500px; */
          margin-block-start: 0;
        }
      }

      >.content>.heading-hash {
        display: block;
        width: auto;
        height: 1.9375rem;

        @media (min-width: 897px) {
          height: 2.5rem;
        }
      }

      >.content>.heading-line {
        position: relative;
        display: inline-block;
        padding: 0 2.5rem;
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.41667;
        margin-block-start: 0.125rem;
        vertical-align: top;

        @media (min-width: 897px) {
          padding: 0 3.5rem;
          font-size: 1rem;
          line-height: 1.5;
          margin-block-start: 0;
        }

        &::before,
        &::after {
          position: absolute;
          top: 50%;
          left: 0;
          width: 1.5rem;
          height: 1px;
          background-color: var(--color-gray-dark);
          content: "";
          transform: translateY(-50%);

          @media (min-width: 897px) {
            width: 2.5rem;
          }
        }

        &::after {
          right: 0;
          left: auto;
        }
      }
    }
  }

  /* ---------------------------------------------
  .recruit-top-people-banner
------------------------------------------------ */
  .recruit-top-people-banner {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 2.5rem;

    &:hover {
      @media (hover: hover) and (pointer: fine) {
        >.image>img {
          transform: scale(1.07);
        }

        >.arrow::before {
          transform: scale(1.2);
        }

        >.arrow>i::before {
          opacity: 1;
          transform: translateX(0);
        }

        >.arrow>i::after {
          opacity: 0;
          transform: translateX(20px);
        }
      }
    }

    &::after {
      position: absolute;
      z-index: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 10.8125rem;
      border-radius: 0 0 2.5rem 2.5rem;
      background: linear-gradient(rgb(31 111 198 / 0%) 0%, var(--color-gray-light-dark) 100%, var(--color-primary) 100%);
      content: "";

      @media (min-width: 897px) {
        height: 17.5rem;
      }

      @media (width > 1440px) {
        height: 23.5625rem;
      }
    }

    >.image {
      display: block;
    }

    >.image>img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 2.5rem;
      transition: transform var(--transition-duration) var(--transition-timing-function);
    }

    >.content {
      position: absolute;
      z-index: 1;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 1.5rem 5rem 1.5rem 1.5rem;
      color: var(--color-white);

      @media (min-width: 897px) {
        padding: 2.5rem 6.25rem 2.5rem 2.5rem;
      }
    }

    >.content>.title-sub {
      font-family: var(--font-family-montserrat);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.25;

      @media (min-width: 897px) {
        font-size: 1rem;
        line-height: 1.1875;
      }
    }

    >.content>.title-main {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.45;
      margin-block-start: 0.25rem;

      @media (min-width: 897px) {
        font-size: 1.5rem;
        line-height: 1.33333;
        margin-block-start: 0.5rem;
      }
    }

    >.arrow {
      position: absolute;
      z-index: 1;
      right: 1.5rem;
      bottom: 1.5rem;
      display: block;
      width: 3rem;
      height: 3rem;

      @media (min-width: 897px) {
        right: 2.5rem;
        bottom: 2.5rem;
      }

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 3rem;
        height: 3rem;
        border-radius: 3rem;
        background-color: var(--color-white);
        content: "";
        transition: transform var(--transition-duration) var(--transition-timing-function);
      }
    }

    >.arrow>i {
      position: absolute;
      top: 50%;
      left: 50%;
      overflow: hidden;
      width: 0.75rem;
      height: 0.75rem;
      transform: translate(-50%, -50%);

      &::before,
      &::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("/assets/images/common/icon-arrow-right-03.svg") no-repeat left top / contain;
        content: "";
        transition: all var(--transition-duration) var(--transition-timing-function);
      }

      &::before {
        opacity: 0;
        transform: translateX(-20px);
      }
    }
  }

  /* ---------------------------------------------
  .recruit-top-box-join
------------------------------------------------ */
  .recruit-top-box-join {
    max-width: 73.125rem;
    padding: 1.5rem 1.5rem 2rem;
    border-radius: 1.25rem;
    background-color: var(--color-gray-light-medium);
    margin-block-start: 5rem;
    margin-inline: auto;

    @media (min-width: 897px) {
      padding: 2.5rem 2.5rem 4rem;
      border-radius: 2.5rem;
      margin-block-start: 7.5rem;
    }

    >.title {
      color: var(--color-primary);
      font-family: var(--font-family-montserrat);
      font-size: 1.0625rem;
      font-weight: 500;
      line-height: 1.17647;
      text-align: center;

      @media (min-width: 897px) {
        font-size: 1.5625rem;
        line-height: 1.2;
      }
    }

    >.title>span {
      --line-size: 20px;

      position: relative;
      display: inline-block;
      padding: 0 1.625rem;

      @media (min-width: 897px) {
        --line-size: 30px;

        padding: 0 2.375rem;
      }

      &::before {
        position: absolute;
        top: 0.625rem;
        left: -0.25rem;
        width: calc(var(--line-size)/cos(45deg));
        height: 1px;
        background-color: var(--color-primary);
        content: "";
        transform: rotate(45deg);

        @media (min-width: 897px) {
          top: 0.8125rem;
          left: -0.375rem;
        }
      }

      &::after {
        position: absolute;
        top: 0.625rem;
        right: -0.25rem;
        width: calc(var(--line-size)/cos(45deg));
        height: 1px;
        background-color: var(--color-primary);
        content: "";
        transform: rotate(-45deg);

        @media (min-width: 897px) {
          top: 0.8125rem;
          right: -0.5rem;
        }
      }
    }

    >.button {
      margin: 0.5rem auto 0;

      @media (max-width: 896px) {
        max-width: 18.5625rem;
      }

      @media (min-width: 897px) {
        max-width: 16.875rem;
        margin-block-start: 0.625rem;
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  #recruit-sales
------------------------------------------------ */
  #recruit-sales {
    /* > main {
    @media (--sm) {
      padding-block-end: 215px;
    }
  } */

    .hero-heading {
      @media (max-width: 896px) {
        padding-block-end: 2.5rem;
      }
    }
  }

  /* ---------------------------------------------
  .sales-overview
------------------------------------------------ */
  .sales-overview {
    display: block;

    >.container {
      padding-block: 1.5rem 7.5rem;

      @media (max-width: 896px) {
        padding-block: 0 2.75rem;
      }
    }

    >.container>.overview {
      display: grid;
      gap: 4rem 1.875rem;
      grid-template-columns: 1fr 1fr;

      @media (max-width: 896px) {
        grid-template-columns: 1fr;
      }
    }

    >.container>.overview>.detail {
      @media (max-width: 896px) {
        order: 2;
      }
    }

    >.container>.overview>.detail>p {
      font-weight: 500;
      line-height: 2;
      margin-block-start: 1.25rem;

      @media (min-width: 897px) {
        margin-block-start: 1.75rem;
        padding-inline-end: min(3.47222vw, 3.125rem);
      }
    }

    >.container>.overview>picture {
      display: block;

      @media (max-width: 896px) {
        order: 1;
        margin-inline: -0.9375rem;
      }
    }

    >.container>.overview>picture>img {
      width: 100%;
      height: auto;

      @media (min-width: 897px) {
        overflow: hidden;
        border-radius: 2.5rem;
      }
    }
  }

  /* ---------------------------------------------
  .sales-roles
------------------------------------------------ */
  .sales-roles {
    display: block;
    background-color: var(--color-gray-lighter);
    padding-block: 7.5rem;

    @media (max-width: 896px) {
      padding-block: 5rem;
    }

    >.container>.list {
      display: grid;
      margin-block-start: 2rem;
      row-gap: 1.5rem;

      @media (max-width: 896px) {
        margin-block-start: 1.5rem;
        row-gap: 1rem;
      }
    }

    >.container>.list>li {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      padding: 3.5rem 3.5rem 3.25rem 4.4375rem;
      border-radius: 2.5rem;
      background-color: var(--color-white);
      -moz-column-gap: 4.4375rem;
      column-gap: 4.4375rem;

      @media (max-width: 896px) {
        flex-direction: column;
        padding: 2.5rem 1.5rem 1.8125rem;
        border-radius: 1.25rem;
        grid-template-columns: 1fr;
        row-gap: 1.5rem;
      }
    }

    >.container>.list>li>figure {
      width: 24.737%;

      @media (max-width: 896px) {
        width: 100%;
        max-width: 11.75rem;
        margin: 0 auto;
      }
    }

    >.container>.list>li>figure>img {
      width: 100%;
      height: auto;
    }

    >.container>.list>li>.detail {
      display: grid;
      row-gap: 0.8125rem;

      @media (min-width: 897px) {
        flex: 1;
        row-gap: 0.6875rem;
      }
    }

    >.container>.list>li>.detail>.title {
      color: var(--color-primary);
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.5;

      @media (max-width: 896px) {
        font-size: 1.125rem;
        text-align: center;
      }
    }

    >.container>.list>li>.detail>.text {
      font-size: 1rem;
      font-weight: 500;
      line-height: 2;

      @media (max-width: 896px) {
        font-size: 0.875rem;
        line-height: 1.75;
      }
    }
  }

  /* ---------------------------------------------
  .sales-work
------------------------------------------------ */
  .sales-work {
    padding-block: 7.5rem;

    @media (max-width: 896px) {
      padding-block: 5rem;
    }

    >.container>.list-card-features {
      margin-block-start: 2rem;

      @media (max-width: 896px) {
        margin-block-start: 1.5rem;
      }
    }
  }

  /* ---------------------------------------------
  .sales-teamwork
------------------------------------------------ */
  .sales-teamwork {
    background-color: var(--color-gray-lighter);
    padding-block: 7.5rem;

    @media (max-width: 896px) {
      padding-block: 5rem;
    }

    >.container {
      display: grid;

      @media (width >=1101px) {
        align-items: flex-start;
        -moz-column-gap: 1.875rem;
        column-gap: 1.875rem;
        grid-template-columns: repeat(2, 1fr);

        &:not(:has(> .image)) {
          grid-template-columns: 1fr;
        }
      }
    }

    >.container>.box,
    >.container>.image {
      @media (width < 1101px) {
        display: contents;
      }
    }

    >.container>.box:first-child {
      @media (min-width: 897px) {
        padding-inline-end: min(3.47222vw, 3.125rem);
      }
    }

    >.container>.box>.heading-group-underline {
      @media (width < 1101px) {
        order: 1;
      }
    }

    >.container>.box>.body {
      margin-block-start: 1.75rem;

      @media (width < 1101px) {
        order: 2;
      }

      @media (max-width: 896px) {
        margin-block-start: 1.25rem;
      }
    }

    >.container>.box>.body>.text {
      font-size: 1rem;
      font-weight: 500;
      line-height: 2;

      @media (width < 1101px) {
        order: 3;
      }
    }

    >.container>.box>.bottom {
      position: relative;
      justify-content: flex-start;
      padding: 0;
      border: 0;
      margin-block-start: 4.75rem;

      @media (width < 1101px) {
        order: 4;
      }

      @media (max-width: 896px) {
        margin-block-start: 1.25rem;
      }
    }

    >.container>.image {
      display: block;
      overflow: hidden;
      padding: 4.75rem 1.5rem 4.6875rem;
      border-radius: 5rem;
      background-color: var(--color-white);
      text-align: center;

      @media (width < 1101px) {
        order: 3;
        margin-block-start: 2.25rem;
      }

      @media (max-width: 896px) {
        padding: 2rem 1.5rem;
        border-radius: 1.25rem;
        margin-block: 2.25rem;
      }
    }

    >.container>.image>img {
      width: 100%;
      height: auto;

      @media (min-width: 897px) {
        max-width: 23.625rem;
        margin: 0 auto;
      }
    }
  }

  /* ---------------------------------------------
  .button-teamwork
------------------------------------------------ */
  .button-teamwork {
    position: relative;
    display: block;
    padding: 1rem 1rem 1.5rem;
    border-radius: 1.25rem;
    background-color: var(--color-button-secondary);

    @media (max-width: 896px) {
      padding-block-end: 1.4375rem;
    }

    >.label {
      margin-block: -2rem 1rem;
    }

    >.label>p {
      display: inline-block;
      padding: 0.3125rem 1rem 0.3125rem 0.5rem;
      border-radius: 6.25rem;
      background-color: var(--color-primary);
      color: var(--color-white);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.57143;
      text-align: center;

      @media (max-width: 896px) {
        padding-inline: 1.1875rem;
      }
    }

    >.detail {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      -moz-column-gap: 0.9375rem;
      column-gap: 0.9375rem;

      @media (min-width: 897px) {
        -moz-column-gap: 1rem;
        column-gap: 1rem;
        padding-inline: 0.5rem 3.125rem;
      }

      &::after {
        @media (min-width: 897px) {
          position: absolute;
          top: 50%;
          right: 2.6875rem;
          width: 1px;
          height: calc(100% - 1px);
          background-color: oklch(from var(--color-primary) l c h / 20%);
          content: "";
          transform: translateY(-50%);
        }
      }
    }

    >.detail>figure {
      width: 27.908%;

      @media (max-width: 896px) {
        width: 38.34%;
      }
    }

    >.detail>figure>img {
      overflow: hidden;
      width: 100%;
      height: auto;
      border-radius: 0.625rem;
    }

    >.detail>p {
      flex: 1;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.75;

      @media (max-width: 896px) {
        font-size: 0.875rem;
        line-height: 1.5;
        padding-block-start: 1px;
      }
    }

    >i {
      position: absolute;
      top: calc(50% + 0.25rem);
      right: 1.5rem;
      overflow: hidden;
      width: 0.75rem;
      height: 0.75rem;
      transform: translateY(-50%);

      @media (max-width: 896px) {
        display: none;
      }

      &::before,
      &::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: left top;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        transition: all var(--transition-duration) var(--transition-timing-function);
      }

      &::before {
        background-image: url("/assets/images/common/icon-arrow-right-02.svg");
        opacity: 0;
        transform: translateX(-20px);
      }

      &::after {
        background-image: url("/assets/images/common/icon-arrow-right-03.svg");
      }
    }

    @media (hover: hover) and (pointer: fine) {
      transition: all var(--transition-duration) var(--transition-timing-function);

      &:hover {
        background-color: var(--color-secondary);
        color: var(--color-white);

        >.detail::after {
          background-color: oklch(from var(--color-white) l c h / 20%);
        }

        >i::before {
          opacity: 1;
          transform: translateX(0);
        }

        >i::after {
          opacity: 0;
          transform: translateX(20px);
        }
      }
    }
  }

  /* ---------------------------------------------
  .sales-heading
------------------------------------------------ */
  .sales-heading {
    display: grid;
    gap: 1.25rem;

    @media (min-width: 897px) {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
    }

    >.heading-group-underline {
      @media (min-width: 897px) {
        width: 32.479%;
      }
    }

    >.text {
      font-weight: 500;
      line-height: 2;

      @media (min-width: 897px) {
        flex: 1;
        padding-block-start: 0.5625rem;
      }
    }
  }

  /* ---------------------------------------------
  .sales-schedule
------------------------------------------------ */
  .sales-schedule {
    display: block;
    padding-block: 7.5rem;

    @media (max-width: 896px) {
      overflow: hidden;
      padding-block: 5rem;
    }

    >.container>.box-message {
      display: grid;
      padding: 2.5rem 1.5rem 2rem;
      border-radius: 1.25rem;
      background-color: var(--color-gray-lighter);
      gap: 0.625rem 2.5rem;
      margin-block-start: 2.25rem;

      @media (min-width: 897px) {
        display: flex;
        flex-wrap: wrap;
        padding: 3.5rem min(6.94444vw, 6.25rem);
        border-radius: 2.5rem;
        margin-block-start: 2rem;
      }
    }

    >.container>.box-message>figure {
      width: 20.619%;
      max-width: 12.5rem;

      @media (max-width: 896px) {
        width: 100%;
        margin: 0 auto;
      }
    }

    >.container>.box-message>figure>img {
      overflow: hidden;
      width: 100%;
      height: auto;
      border-radius: 50%;
    }

    >.container>.box-message>.detail {
      text-align: center;

      @media (min-width: 897px) {
        flex: 1;
        padding-block-start: 0.125rem;
        text-align: left;
      }
    }

    >.container>.box-message>.detail>.profile {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      -moz-column-gap: 1rem;
      column-gap: 1rem;
      margin-block-end: 1.0625rem;

      @media (max-width: 896px) {
        display: inline-flex;
        margin-block-end: 2.0625rem;
      }
    }

    >.container>.box-message>.detail>.profile>.name {
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 1.33333;
    }

    >.container>.box-message>.detail>.profile>.experience {
      position: relative;
      bottom: 1px;
      flex: 1;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.42857;
    }

    >.container>.box-message>.detail>.message {
      position: relative;
      padding: 1.375rem 1.5rem;
      border-radius: 1.25rem;
      background-color: var(--color-primary);
      color: var(--color-white);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.75;
      text-align: left;

      @media (max-width: 896px) {
        padding: 1.375rem 1rem;
        font-size: 0.875rem;
      }
    }

    >.container>.box-message>.detail>.message::before {
      position: absolute;
      top: 2.25rem;
      left: -1rem;
      width: 0;
      height: 0;
      border-width: 0 16px 16px 0;
      border-style: solid;
      border-color: transparent var(--color-primary) transparent transparent;
      content: "";

      @media (max-width: 896px) {
        top: -1rem;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
      }
    }

    >.container>.schedule-calendar {
      margin-block-start: 4rem;
      /* margin-inline-end: -20px; */

      @media (max-width: 896px) {
        margin-block-start: 2.5rem;
        /* margin-inline-end: -15px; */
      }
    }

    >.container>.schedule-calendar>.box-hint {
      position: relative;
      display: flex;
      justify-content: center;
      padding: 0.6875rem 1rem;
      border: 1px solid var(--color-gray-medium);
      border-radius: 0.625rem;
      color: var(--color-gray);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.5;

      @media (min-width: 897px) {
        display: none;
      }
    }

    >.container>.schedule-calendar>.box-hint::before {
      position: absolute;
      z-index: 1;
      bottom: -0.6875rem;
      left: 50%;
      width: 0;
      height: 0;
      border-top: 12px solid var(--color-white);
      border-right: 6px solid transparent;
      border-left: 6px solid transparent;
      content: "";
      transform: translateX(-50%);
    }

    >.container>.schedule-calendar>.box-hint::after {
      position: absolute;
      bottom: -0.75rem;
      left: 50%;
      width: 0;
      height: 0;
      border-top: 12px solid var(--color-gray);
      border-right: 6px solid transparent;
      border-left: 6px solid transparent;
      content: "";
      transform: translateX(-50%);
    }

    >.container>.schedule-calendar>.box-hint>.hint {
      display: flex;
      align-items: center;
      justify-content: center;
      -moz-column-gap: 0.5rem;
      column-gap: 0.5rem;
    }

    >.container>.schedule-calendar>.box-hint>.hint>.icon {
      display: block;
      width: 2rem;
      height: 2rem;
    }

    >.container>.schedule-calendar>.box-hint>.hint>.text {
      flex: 1;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.42857;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll {
      overflow: auto hidden;
      -webkit-overflow-scrolling: touch;

      @media (max-width: 896px) {
        width: calc(100% + 0.9375rem);
        margin-block-start: 1.625rem;
        margin-inline-end: -0.9375rem;
        padding-inline-end: 0.9375rem;
      }
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board {
      display: grid;
      min-width: 73.125rem;
      background-color: var(--color-white);
      -moz-column-gap: 0.375rem;
      column-gap: 0.375rem;
      grid-auto-rows: minmax(40px, auto);
      grid-template-columns: 5rem repeat(5, 1fr);

      @media (max-width: 896px) {
        margin-top: 0;
      }
    }

    /* Headers */
    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .calendar-head-spacer {
      grid-column: 1;
      grid-row: 1;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .calendar-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-bottom: 1.5625rem;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .calendar-head .ja {
      color: var(--color-gray-dark);
      font-size: 1.25rem;
      font-weight: 500;
      line-height: 1.4;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .calendar-head .en {
      color: var(--color-primary);
      font-family: var(--font-family-montserrat);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.2;
    }

    /* Grid Background Lines and Labels */
    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .calendar-line-h {
      z-index: 1;
      border-top: 1px solid var(--color-gray-light);
      grid-column: 1 / 7;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .calendar-line-h-sub {
      z-index: 1;
      border-top: 1px solid var(--color-gray-light);
      grid-column: 1 / 7;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .calendar-col-bg {
      z-index: 0;
      border-radius: 0.5rem;
      margin: -0.5rem 0;
      background-color: var(--color-button-accordian);
      grid-row: 2 / 23;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .calendar-time {
      z-index: 2;
      display: flex;
      align-items: center;
      grid-column: 1;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .calendar-time span {
      display: flex;
      min-width: 2.625rem;
      justify-content: flex-end;
      color: var(--color-gray);
      font-family: var(--font-family-montserrat);
      font-size: 1rem;
      font-weight: 500;
      line-height: 2;
    }

    /* Events */
    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .calendar-event {
      position: relative;
      z-index: 10;
      display: flex;
      box-sizing: border-box;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0.4375rem 0.5rem;
      border-radius: 0.3125rem;
      margin: 0.25rem 0.25rem 0.3125rem;
      font-size: 0.6875rem;
      font-weight: 700;
      line-height: 1.54545;
      text-align: left;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board button.calendar-event {
      cursor: pointer;
      transition: opacity 0.3s ease;
    }

    @media (hover: hover) {
      >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board button.calendar-event:hover {
        opacity: 0.7;
      }
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .calendar-event span {
      display: block;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .calendar-event[data-variant-background="blue"] {
      background-color: var(--color-blue-04);
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .calendar-event[data-variant-background="green"] {
      background-color: var(--color-green-02);
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .calendar-event[data-variant-background="dark"] {
      background-color: var(--color-gray);
      color: var(--color-white);
    }

    /* Plus Icon */
    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .icon-plus {
      position: absolute;
      right: 0.5rem;
      bottom: 0.5rem;
      width: 1rem;
      height: 1rem;
      box-sizing: border-box;
      border-radius: 50%;
      background-color: var(--color-white);
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .icon-plus::before,
    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .icon-plus::after {
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: var(--color-primary);
      content: "";
      transform: translate(-50%, -50%);
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .icon-plus::before {
      width: 0.625rem;
      height: 1px;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board .icon-plus::after {
      width: 1px;
      height: 0.625rem;
    }

    /* Grid Positional Utilities */
    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="1"] {
      grid-row-start: 1;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="2"] {
      grid-row-start: 2;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="3"] {
      grid-row-start: 3;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="4"] {
      grid-row-start: 4;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="5"] {
      grid-row-start: 5;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="6"] {
      grid-row-start: 6;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="7"] {
      grid-row-start: 7;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="8"] {
      grid-row-start: 8;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="9"] {
      grid-row-start: 9;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="10"] {
      grid-row-start: 10;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="11"] {
      grid-row-start: 11;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="12"] {
      grid-row-start: 12;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="13"] {
      grid-row-start: 13;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="14"] {
      grid-row-start: 14;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="15"] {
      grid-row-start: 15;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="16"] {
      grid-row-start: 16;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="17"] {
      grid-row-start: 17;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="18"] {
      grid-row-start: 18;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="19"] {
      grid-row-start: 19;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="20"] {
      grid-row-start: 20;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="21"] {
      grid-row-start: 21;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="22"] {
      grid-row-start: 22;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="23"] {
      grid-row-start: 23;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="24"] {
      grid-row-start: 24;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="25"] {
      grid-row-start: 25;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="26"] {
      grid-row-start: 26;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="27"] {
      grid-row-start: 27;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="28"] {
      grid-row-start: 28;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="29"] {
      grid-row-start: 29;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="30"] {
      grid-row-start: 30;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="31"] {
      grid-row-start: 31;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="32"] {
      grid-row-start: 32;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="33"] {
      grid-row-start: 33;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="34"] {
      grid-row-start: 34;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="35"] {
      grid-row-start: 35;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="36"] {
      grid-row-start: 36;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="37"] {
      grid-row-start: 37;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="38"] {
      grid-row-start: 38;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="39"] {
      grid-row-start: 39;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="40"] {
      grid-row-start: 40;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="41"] {
      grid-row-start: 41;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="42"] {
      grid-row-start: 42;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="43"] {
      grid-row-start: 43;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="44"] {
      grid-row-start: 44;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="45"] {
      grid-row-start: 45;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="46"] {
      grid-row-start: 46;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="47"] {
      grid-row-start: 47;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-row="48"] {
      grid-row-start: 48;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-col="2"] {
      grid-column: 2;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-col="3"] {
      grid-column: 3;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-col="4"] {
      grid-column: 4;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-col="5"] {
      grid-column: 5;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-col="6"] {
      grid-column: 6;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="1"] {
      grid-row-end: span 1;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="2"] {
      grid-row-end: span 2;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="3"] {
      grid-row-end: span 3;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="4"] {
      grid-row-end: span 4;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="5"] {
      grid-row-end: span 5;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="6"] {
      grid-row-end: span 6;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="7"] {
      grid-row-end: span 7;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="8"] {
      grid-row-end: span 8;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="9"] {
      grid-row-end: span 9;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="10"] {
      grid-row-end: span 10;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="11"] {
      grid-row-end: span 11;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="12"] {
      grid-row-end: span 12;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="13"] {
      grid-row-end: span 13;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="14"] {
      grid-row-end: span 14;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="15"] {
      grid-row-end: span 15;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="16"] {
      grid-row-end: span 16;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="17"] {
      grid-row-end: span 17;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="18"] {
      grid-row-end: span 18;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="19"] {
      grid-row-end: span 19;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="20"] {
      grid-row-end: span 20;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="21"] {
      grid-row-end: span 21;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="22"] {
      grid-row-end: span 22;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="23"] {
      grid-row-end: span 23;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="24"] {
      grid-row-end: span 24;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="25"] {
      grid-row-end: span 25;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="26"] {
      grid-row-end: span 26;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="27"] {
      grid-row-end: span 27;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="28"] {
      grid-row-end: span 28;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="29"] {
      grid-row-end: span 29;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="30"] {
      grid-row-end: span 30;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="31"] {
      grid-row-end: span 31;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="32"] {
      grid-row-end: span 32;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="33"] {
      grid-row-end: span 33;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="34"] {
      grid-row-end: span 34;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="35"] {
      grid-row-end: span 35;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="36"] {
      grid-row-end: span 36;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="37"] {
      grid-row-end: span 37;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="38"] {
      grid-row-end: span 38;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="39"] {
      grid-row-end: span 39;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="40"] {
      grid-row-end: span 40;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="41"] {
      grid-row-end: span 41;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="42"] {
      grid-row-end: span 42;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="43"] {
      grid-row-end: span 43;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="44"] {
      grid-row-end: span 44;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="45"] {
      grid-row-end: span 45;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="46"] {
      grid-row-end: span 46;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="47"] {
      grid-row-end: span 47;
    }

    >.container>.schedule-calendar>.calendar-wrapper-scroll>.calendar-board [data-variant-span="48"] {
      grid-row-end: span 48;
    }

  }

  /* ---------------------------------------------
  .sales-member
------------------------------------------------ */
  .sales-member {
    display: block;
    border-top: 1px solid var(--color-gray-light);
    padding-block: 7.5rem 10rem;

    @media (max-width: 896px) {
      padding-block: 5rem;
    }

    >.container>.sales-heading>.text {
      @media (min-width: 897px) {
        padding-block-start: 1.5625rem;
      }
    }

    >.container>.list-card-article,
    >.container>.coming-soon {
      margin-block-start: 2rem;

      @media (max-width: 896px) {
        margin-block-start: 2.25rem;
      }
    }

    >.container>.more {
      margin-block-start: 3.5rem;

      @media (max-width: 896px) {
        margin-block-start: 2.5rem;
      }
    }

    >.container>.button-top {
      margin-block-start: 7.5rem;

      @media (max-width: 896px) {
        margin-block-start: 5rem;
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  .selection-information-job
------------------------------------------------ */
  .selection-information-job {
    padding-block-start: 7.25rem;

    @media (max-width: 896px) {
      padding-block-start: 3.125rem;
    }

    >hgroup {
      margin-block-end: 2rem;

      @media (max-width: 896px) {
        margin-block-end: 1.5rem;
      }
    }

    >ul {
      display: grid;
      gap: 0.5rem;

      @media (min-width: 897px) {
        gap: 1.875rem;
        grid-template-columns: repeat(2, 1fr);
      }
    }

    >ul>li>a {
      max-width: 100%;
      min-height: 7.5rem;
      border-radius: 1.25rem;
      color: var(--color-gray-dark);
      padding-inline-start: min(3.26389dvw, 2.9375rem);

      @media (max-width: 896px) {
        min-height: 5rem;
        padding-inline-start: 1.4375rem;
      }

      &::before {
        @media (min-width: 897px) {
          right: 3.625rem;
          height: calc(100% - 2.875rem);
        }
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          color: var(--color-white);
        }
      }
    }

    >ul>li>a>i {
      @media (min-width: 897px) {
        right: 1.4375rem;
      }
    }
  }

  /* ---------------------------------------------
  .selection-information-flow
------------------------------------------------ */
  .selection-information-flow {
    padding-block-start: 7.5rem;

    @media (max-width: 896px) {
      padding-block-start: 5rem;
    }

    >hgroup {
      margin-block-end: 2rem;

      @media (max-width: 896px) {
        margin-block-end: 1.5rem;
      }
    }

    >.image {
      &+* {
        margin-block-start: 4rem;

        @media (max-width: 896px) {
          margin-block-start: 2.5rem;
        }
      }
    }

    >.image>img {
      width: 100%;
      height: auto;
    }

    >.list-flow {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    >.list-flow>li>.card {
      display: flex;
      flex-direction: column;
      padding: 2.4375rem 1.4375rem 1.4375rem;
      border: 1px solid var(--color-gray-light);
      border-radius: 1.25rem;
      background-color: var(--color-white);
      gap: 1.5rem;

      @media (min-width: 897px) {
        flex-flow: row wrap;
        align-items: flex-start;
        padding: 1.4375rem;
        border-radius: 2.5rem;
      }

      &[href] {
        @media (min-width: 897px) {
          transition: opacity var(--transition-duration) var(--transition-timing-function);

          &:hover {
            opacity: 0.7;
          }
        }
      }
    }

    >.list-flow>li>.card>i {
      display: block;
      overflow: hidden;
      width: 7.5rem;
      border-radius: 50%;

      @media (max-width: 896px) {
        margin-inline: auto;
      }
    }

    >.list-flow>li>.card>i>img {
      width: 100%;
      height: auto;
    }

    >.list-flow>li>.card>.content {
      @media (min-width: 897px) {
        display: flex;
        min-height: 7.5rem;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        padding-block-start: 0.3125rem;
      }

      @media (max-width: 896px) {
        width: 100%;
      }
    }

    >.list-flow>li>.card>.content:has(> .reference) {
      @media (min-width: 897px) {
        padding-block-start: 1.125rem;
      }
    }

    >.list-flow>li>.card>.content>.heading {
      color: var(--color-primary);
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.5;

      @media (max-width: 896px) {
        font-size: 1.125rem;
        text-align: center;
      }
    }

    >.list-flow>li>.card>.content>.text {
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 2;

      @media (max-width: 896px) {
        line-height: 1.75;
      }

      *+& {
        margin-block-start: 0.1875rem;

        @media (max-width: 896px) {
          margin-block-start: 0.8125rem;
        }
      }

      &:last-child {
        @media (max-width: 896px) {
          padding-block-end: 0.375rem;
        }
      }
    }

    >.list-flow>li>.card>.content>.reference {
      position: relative;
      padding: 2rem 1.5rem 1.4375rem;
      border-radius: 1.25rem;
      background: var(--color-gray-lighter);
      margin-block-start: 2.25rem;

      @media (max-width: 896px) {
        padding: 1.5rem 1rem 0.9375rem;
        border-radius: 0.625rem;
        margin-block-start: 2.375rem;
      }
    }

    >.list-flow>li>.card>.content>.reference>.heading {
      position: absolute;
      top: -1rem;
      left: 1.5rem;
      display: inline-block;
      overflow: hidden;
      max-width: 13.375rem;
      padding: 0.5625rem 1rem;
      border-radius: 1rem;
      background: var(--color-primary);
      color: var(--color-white);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;

      @media (max-width: 896px) {
        left: 1rem;
      }
    }

    >.list-flow>li>.card>.content>.reference>.text {
      color: var(--color-gray);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.5;
    }
  }

  /* ---------------------------------------------
  .selection-information-faq
------------------------------------------------ */
  .selection-information-faq {
    padding-block: 7.5rem 10rem;

    @media (max-width: 896px) {
      padding-block: 5rem;
    }

    >hgroup {
      margin-block-end: 3rem;

      @media (max-width: 896px) {
        margin-block-end: 2rem;
      }
    }

    >.list-faq {
      display: flex;
      flex-direction: column;
    }

    >.list-faq>li {
      padding-block: 2rem 1.875rem;

      @media (max-width: 896px) {
        padding-block: 1.5rem 1.3125rem;
      }
    }

    >.list-faq>li:first-child {
      padding-block-start: 0;
    }

    >.list-faq>li:not(:first-child) {
      border-top: 1px solid var(--color-gray-light);
    }

    >.list-faq>li>.card {
      display: flex;
      flex-direction: column;
      row-gap: 1rem;
    }

    >.list-faq>li>.card>.heading,
    >.list-faq>li>.card>.content {
      display: flex;
      align-items: flex-start;
      gap: 1.5rem;

      @media (max-width: 896px) {
        gap: 1rem;
      }
    }

    >.list-faq>li>.card>.heading {
      align-items: center;
    }

    >.list-faq>li>.card>.heading>.icon,
    >.list-faq>li>.card>.content>.icon {
      display: flex;
      width: 2.5rem;
      height: 2.5rem;
      flex: 0 0 2.5rem;
      align-items: center;
      justify-content: center;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      font-family: var(--font-family-montserrat);
      font-weight: 600;
      line-height: 1;
    }

    >.list-faq>li>.card>.heading>.icon {
      background-image: url("/assets/images/common/bg-faq-q.svg");
      color: var(--color-white);

      @media (max-width: 896px) {
        position: relative;
      }
    }

    >.list-faq>li>.card>.content>.icon {
      background-image: url("/assets/images/common/bg-faq-a.svg");
      color: var(--color-primary);
    }

    >.list-faq>li>.card>.heading>.text {
      color: var(--color-gray-dark);
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.55;

      @media (max-width: 896px) {
        font-size: 1rem;
        line-height: 1.5;
      }
    }

    >.list-faq>li>.card>.content>.text {
      color: var(--color-gray);
      font-weight: 500;
      line-height: 1.75;
      padding-block-start: 0.375rem;

      @media (max-width: 896px) {
        font-size: 0.875rem;
      }
    }

    >.list-faq+.button {
      margin-block-start: 1.5rem;

      @media (max-width: 896px) {
        margin-block-start: 1.0625rem;
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  .service-tab-consumer
------------------------------------------------ */
  .service-tab-consumer {
    margin-block-end: -23.4375rem;
    padding-block-end: 23.4375rem;

    @media (max-width: 896px) {
      margin-block-end: -15rem;
      padding-block-end: 15rem;
    }

    &:has(> .service-section:last-child:nth-child(even)) {
      background-color: var(--color-gray-lighter);
    }

    >.service-section:nth-child(even) {
      background-color: var(--color-gray-lighter);
    }

    >.service-section:first-child {
      padding-block-start: 5rem;

      @media (max-width: 896px) {
        padding-block-start: 2.5rem;
      }
    }

    >.service-section:last-child {
      padding-block-end: 0;
    }
  }

  /* ---------------------------------------------
  .service-section
------------------------------------------------ */
  .service-section {
    background-color: var(--color-white);
    padding-block: 7.5rem;

    @media (max-width: 896px) {
      padding-block: 5rem;
    }
  }

  /* ---------------------------------------------
  .service-consumer
------------------------------------------------ */
  .service-consumer {
    display: grid;
    align-items: flex-start;
    gap: 0 min(3.30579vw, 2.5rem);
    grid-template-columns: min(13.22314vw, 10rem) 1fr min(22.31405vw,
        16.875rem);

    @media (max-width: 896px) {
      grid-template-columns: 1fr;
      text-align: center;
    }

    >.logo {
      overflow: hidden;
      width: min(13.22314vw, 10rem);
      height: min(13.22314vw, 10rem);
      border: 1px solid var(--color-gray-light);
      border-radius: 1.25rem;

      @media (max-width: 896px) {
        width: 7.5rem;
        height: 7.5rem;
        margin: 0 auto;
      }
    }

    >.logo>img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }

    >.content {
      *+& {
        @media (max-width: 896px) {
          margin-block-start: 1rem;
        }
      }
    }

    >.content>.box-heading {
      display: flex;
      align-items: baseline;
      border-bottom: 1px solid var(--color-gray-light);
      gap: 1rem;
      margin-block-end: 2.125rem;
      padding-block: 0.25rem 0.75rem;

      @media (max-width: 896px) {
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin-block-end: 1.25rem;
        padding-block: 0 0.375rem;
      }
    }

    >.content>.box-heading>.heading {
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.14286;

      @media (max-width: 896px) {
        font-size: 1.375rem;
        line-height: 1.5;
      }
    }

    >.content>.box-heading>.sub-heading {
      color: var(--color-gray);
      font-size: 0.75rem;
      font-weight: 500;
    }

    >.content>.text-lead {
      color: var(--color-gray);
      font-size: 1rem;
      font-weight: 700;

      @media (max-width: 896px) {
        font-size: 0.875rem;
        line-height: 1.5;
      }
    }

    >.content>.tagline {
      color: var(--color-primary);
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.5;

      @media (max-width: 896px) {
        font-size: 1.375rem;
        line-height: 1.5;
        text-align: center;
      }

      *+& {
        margin-block-start: 0.3125rem;

        @media (max-width: 896px) {
          margin-block-start: 0.25rem;
        }
      }
    }

    >.content>.text {
      color: var(--color-gray);
      font-weight: 500;
      line-height: 2;

      @media (max-width: 896px) {
        line-height: 1.75;
        text-align: left;
      }

      *+& {
        margin-block-start: 1.25rem;

        @media (max-width: 896px) {
          margin-block-start: 1.4375rem;
        }
      }
    }

    >.content>.button {
      @media (max-width: 896px) {
        margin: 0 auto;
      }

      *+& {
        margin-block-start: 2.6875rem;
      }
    }

    >.image {
      @media (min-width: 897px) {
        padding-inline-start: min(2.47934vw, 1.875rem);
      }

      *+& {
        @media (max-width: 896px) {
          margin-block-start: 2.5rem;
        }
      }
    }

    >.image>picture>img {
      width: 100%;
      height: auto;

      @media (max-width: 896px) {
        display: block;
        width: 100%;
        max-width: 15rem;
        margin-inline: auto;
      }
    }
  }

  /* ---------------------------------------------
  .service-store-intro
------------------------------------------------ */
  .service-store-intro {
    padding-block: 4.6875rem 7.5rem;

    @media (max-width: 896px) {
      padding-block: 2.5rem 5rem;
    }

    >.heading {
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.75;
      margin-block-end: 2.1875rem;
      text-align: center;

      @media (max-width: 896px) {
        font-size: 1.125rem;
        line-height: 1.5;
        margin-block-end: 1.4375rem;
      }
    }

    >.heading>span {
      color: var(--color-primary);
    }

    >.list-anchor {
      display: grid;
      gap: 0.5rem;

      @media (min-width: 897px) {
        gap: min(2.47934vw, 1.875rem);
        grid-template-columns: repeat(3, 1fr);
      }
    }

    >.list-anchor>li>.card {
      display: flex;
      align-items: center;
      padding: min(0.90909vw, 0.6875rem) min(4.54545vw, 3.4375rem) min(1.57025vw, 1.1875rem) min(1.32231vw, 1rem);
      border: 1px solid var(--color-gray-light);
      border-radius: 1.25rem;
      gap: min(1.32231vw, 1rem);

      @media (min-width: 897px) {
        height: 100%;
      }

      @media (max-width: 896px) {
        padding: 0.9375rem 4.0625rem 1.25rem 0.9375rem;
        gap: 0.5rem;
      }

      @media (hover: hover) and (pointer: fine) {
        transition: opacity var(--transition-duration) var(--transition-timing-function);

        &:hover {
          opacity: 0.7;
        }
      }
    }

    >.list-anchor>li>.card>.icon {
      position: relative;
      top: min(0.33058vw, 0.25rem);
      width: min(6.61157vw, 5rem);
      height: min(6.61157vw, 5rem);
      flex: 1 0 auto;

      @media (max-width: 896px) {
        top: 0.125rem;
        width: 3.5rem;
        height: 3.5rem;
      }
    }

    >.list-anchor>li>.card>.icon>img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }

    >.list-anchor>li>.card>.content {
      position: relative;
      width: 100%;

      &::before {
        position: absolute;
        top: 0;
        right: max(-0.99174vw, -0.75rem);
        width: 1px;
        height: 100%;
        background-color: var(--color-gray-light);
        content: "";

        @media (max-width: 896px) {
          top: 1px;
          right: -1.4375rem;
          height: calc(100% + 0.3125rem);
        }
      }

      &::after {
        position: absolute;
        top: 50%;
        right: max(-3.22314vw, -2.4375rem);
        width: 0;
        height: 0;
        border-width: 6px 5px 0;
        border-style: solid;
        border-color: var(--color-primary) transparent transparent transparent;
        content: "";
        transform: translateY(-50%);

        @media (max-width: 896px) {
          top: calc(50% + 0.125rem);
          right: -3.0625rem;
        }
      }
    }

    >.list-anchor>li>.card>.content>.title {
      color: var(--color-primary);
      font-size: min(1.32231vw, 1rem);
      font-weight: 700;
      line-height: 2;

      @media (max-width: 896px) {
        font-size: 0.875rem;
        line-height: 1.45;
      }
    }

    >.list-anchor>li>.card>.content>.text {
      color: var(--color-gray);
      font-size: min(1.15702vw, 0.875rem);
      font-weight: 500;
      line-height: 1.5;

      @media (max-width: 896px) {
        font-size: 0.8125rem;
        line-height: 1.5;
      }
    }
  }

  /* ---------------------------------------------
  .service-heading
------------------------------------------------ */
  .service-heading {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    gap: 2.5rem;
    line-height: 1.4;
    text-align: center;

    @media (max-width: 896px) {
      font-size: 1.5rem;
      gap: 1.5rem;
      line-height: 1.5;
    }

    &::before {
      width: 4rem;
      height: 0.25rem;
      border-radius: 0.125rem;
      background-color: var(--color-primary);
      content: "";
    }

    &[data-gap-variant="narrow"] {
      gap: 1.5625rem;

      @media (max-width: 896px) {
        gap: 1.5rem;
      }
    }

    &+.service-text-lead {
      margin-block-start: 1.9375rem;

      @media (max-width: 896px) {
        margin-block-start: 1rem;
      }
    }

    &+*:not(.service-text-lead) {
      margin-block-start: 2.5rem;

      @media (max-width: 896px) {
        margin-block-start: 1.4375rem;
      }
    }
  }

  /* ---------------------------------------------
  .service-text-lead
------------------------------------------------ */
  .service-text-lead {
    font-weight: 500;
    line-height: 2;

    @media (min-width: 897px) {
      text-align: center;
    }

    @media (max-width: 896px) {
      line-height: 1.75;
    }

    &+* {
      margin-block-start: 3.5625rem;

      @media (max-width: 896px) {
        margin-block-start: 2.6875rem;
      }
    }

    &+.box-button {
      margin-block-start: 2.5625rem;

      @media (max-width: 896px) {
        margin-block-start: 2.6875rem;
      }
    }
  }

  /* ---------------------------------------------
  .service-main-image
------------------------------------------------ */
  .service-main-image {
    position: relative;

    &::before {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--color-gray-light-dark);
      content: "";
      opacity: 0.5;
    }
  }

  .service-main-image>picture>img {
    display: block;
    width: 100%;
    height: auto;
  }

  .service-main-image>h2 {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: block;
    transform: translate(-50%, -50%);
  }

  .service-main-image>h2>.icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;

    @media (max-width: 896px) {
      gap: 0.875rem;
    }
  }

  .service-main-image>h2>.icon>img {
    width: auto;
    height: 12.25rem;

    @media (max-width: 896px) {
      height: 6rem;
    }
  }

  .service-main-image>h2>.icon>figcaption {
    position: relative;
    display: block;
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.875;

    @media (max-width: 896px) {
      font-size: 0.75rem;
    }

    &::before,
    &::after {
      position: absolute;
      top: calc(50% + 0.125rem);
      width: 2.5rem;
      height: 1px;
      background-color: var(--color-white);
      content: "";
      transform: translateY(-50%);

      @media (max-width: 896px) {
        top: 50%;
        width: 1.5rem;
      }
    }

    &::before {
      left: -3.5rem;

      @media (max-width: 896px) {
        left: -2.4375rem;
      }
    }

    &::after {
      right: -3.5rem;

      @media (max-width: 896px) {
        right: -2.4375rem;
      }
    }
  }

  /* ---------------------------------------------
  .service-mw-intro
------------------------------------------------ */
  .service-mw-intro {
    padding-block-start: 6.125rem;

    @media (max-width: 896px) {
      padding-block-start: 2.5rem;
    }

    >.box {
      padding: min(6.61157vw, 5rem);
      border-radius: 2.5rem;
      background-color: var(--color-gray-lighter);

      @media (max-width: 896px) {
        padding: 2rem 1rem 1.5rem;
        border-radius: 1.25rem;
      }
    }

    >.box>picture>img {
      width: 100%;
      height: auto;
    }

    >.box>.list {
      display: grid;
      gap: min(2.47934vw, 1.875rem);
      margin-block-start: 2.625rem;

      @media (min-width: 897px) {
        grid-template-columns: repeat(2, 1fr);
      }

      @media (max-width: 896px) {
        gap: 0.5rem;
        margin-block-start: 2.5rem;
        padding-inline: 0.5rem;
      }
    }

    >.box>.list>li>.card {
      display: flex;
      height: 100%;
      align-items: flex-start;
      padding: min(2.06612vw, 1.5625rem) min(1.98347vw, 1.5rem) min(2.14876vw, 1.625rem);
      border-radius: 1.25rem;
      background-color: var(--color-gray-light-medium);
      gap: min(1.32231vw, 1rem);

      @media (max-width: 896px) {
        padding: 1rem 1rem 1.1875rem;
        border-radius: 0.625rem;
        gap: 0.5rem;
      }
    }

    >.box>.list>li>.card>.icon {
      width: 4rem;
      height: 4rem;
      flex: 0 0 auto;

      @media (max-width: 896px) {
        width: 2.5rem;
        height: 2.5rem;
      }
    }

    >.box>.list>li>.card>.icon img {
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }

    >.box>.list>li>.card>.content>.title {
      color: var(--color-primary);
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.55556;

      @media (max-width: 896px) {
        font-size: 1rem;
      }
    }

    >.box>.list>li>.card>.content>.text {
      color: var(--color-gray);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.75;

      @media (max-width: 896px) {
        font-size: 0.875rem;
        line-height: 1.5;
      }

      *+& {
        margin-block-start: 0.25rem;
      }
    }
  }

  /* ---------------------------------------------
  .service-mw-concern
------------------------------------------------ */
  .service-mw-concern {
    padding-block-start: 7.5rem;

    @media (max-width: 896px) {
      padding-block-start: 5rem;
    }

    >.box {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: min(6.61157vw, 5rem);
      border-radius: 2.5rem;
      background-color: var(--color-gray-lighter);
      gap: min(1.98347vw, 1.5rem) min(1.32231vw, 1rem);


      @media (max-width: 896px) {
        padding: 2rem 1.5rem 2.5rem;
        border-radius: 1.25rem;
        gap: 1.5rem;
        grid-template-columns: 1fr;
      }
    }

    >.box>.card {
      position: relative;
      display: flex;
      width: min(22.63889vw, 20.375rem);
      align-items: center;
      justify-content: center;
      padding: min(1.98347vw, 1.5rem) min(1.98347vw, 1.5rem) min(2.64463vw, 2rem);
      border-radius: 1.25rem;
      background-color: var(--color-white);
      block-size: min(9.51389vw, 137px);
      text-align: center;

      &::after {
        position: absolute;
        bottom: -1rem;
        left: 50%;
        width: 0;
        height: 0;
        border-width: 16px 0 0 16px;
        border-style: solid;
        border-color: var(--color-white) transparent transparent transparent;
        content: "";
        transform: translateX(-50%);
      }

      @media (max-width: 896px) {
        width: 100%;
        justify-content: center;
        padding: 0.5625rem 1rem 1.1875rem;
        border-radius: 1.25rem;
        block-size: min(22.4vw, 84px);
        text-align: center;
      }
    }

    >.box>.card>p {
      color: var(--color-gray);
      font-size: min(1.4876vw, 1.125rem);
      font-weight: 700;
      line-height: 1.5;

      @media (max-width: 896px) {
        font-size: 1rem;
        line-height: 1.75;
      }
    }

    >.box>.card>p>span {
      color: var(--color-primary);
    }
  }

  /* ---------------------------------------------
  .service-mw-achieve
------------------------------------------------ */
  .service-mw-achieve {
    padding-block-start: 7.5rem;

    @media (max-width: 896px) {
      padding-block-start: 5rem;
    }

    >.list {
      display: grid;

      @media (min-width: 897px) {
        grid-template-columns: min(31.07438vw, 23.5rem) 1fr min(31.07438vw,
            23.5rem);
      }
    }

    >.list>li {
      @media (max-width: 896px) {
        border-top: 1px solid var(--color-gray-light);
      }

      &:nth-child(3n + 1) {
        @media (min-width: 897px) {
          padding-inline-end: min(3.30579vw, 2.5rem);
        }
      }

      &:nth-child(3n + 2) {
        @media (min-width: 897px) {
          border-right: 1px solid var(--color-gray-light);
          border-left: 1px solid var(--color-gray-light);
          padding-inline: min(3.30579vw, 2.5rem);
        }
      }

      &:nth-child(3n + 3) {
        @media (min-width: 897px) {
          padding-inline-start: min(3.30579vw, 2.5rem);
        }
      }

      &:last-child {
        >.card {
          @media (max-width: 896px) {
            padding-block-end: 0;
          }
        }
      }
    }

    >.list>li>.card>figure {
      text-align: center;
    }

    >.list>li>.card>figure>img {
      width: auto;
      height: 10rem;

      @media (max-width: 896px) {
        height: 7.5rem;
      }
    }

    >.list>li>.card {
      display: flex;
      flex-direction: column;
      gap: 1.4375rem;

      @media (max-width: 896px) {
        gap: 0.875rem;
        padding-block: 2rem 2.1875rem;
      }
    }

    >.list>li>.card>.content {
      display: flex;
      flex-direction: column;
      gap: 1.3125rem;

      @media (max-width: 896px) {
        gap: 1.25rem;
      }
    }

    >.list>li>.card>.content>.box-heading {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.125rem;
    }

    >.list>li>.card>.content>.box-heading>.sub-heading {
      font-weight: 700;
      line-height: 1.75;
    }

    >.list>li>.card>.content>.box-heading>.heading {
      color: var(--color-primary);
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.16667;
    }

    >.list>li>.card>.content>.text {
      font-size: 0.875rem;
      font-weight: bold;
      line-height: 1.75;

      @media (max-width: 896px) {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.75;
      }
    }

    >.box-benefit {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 2.5rem;
      background-color: var(--color-gray-lighter);
      margin-block-start: min(4.79339vw, 3.625rem);
      padding-block: 2.625rem 3.75rem;

      @media (max-width: 896px) {
        padding: 2rem 1.5rem 2.125rem;
        border-radius: 1.25rem;
        gap: 1rem;
        margin-block-start: 2.6875rem;
      }
    }

    >.box-benefit>.content {
      display: flex;
      align-items: center;
      gap: min(1.32231vw, 1rem);

      @media (max-width: 896px) {
        width: 100%;
        flex-direction: column;
        gap: 0.4375rem;
      }
    }

    >.box-benefit>.content>.title {
      display: flex;
      width: min(15.20661vw, 11.5rem);
      align-items: center;
      padding: min(1.65289vw, 1.25rem) min(2.64463vw, 2rem) min(1.32231vw, 1rem) min(1.98347vw, 1.5rem);
      background-color: var(--color-primary);
      clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%);
      color: var(--color-white);
      font-size: min(1.65289vw, 1.25rem);
      font-weight: 700;
      line-height: 1.5;

      @media (max-width: 896px) {
        width: 100%;
        height: auto;
        justify-content: center;
        padding: 0.875rem 1rem 2rem;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
        font-size: 1.125rem;
        line-height: 1.5;
        text-align: center;
      }
    }

    >.box-benefit>.content>.detail {
      display: flex;
      align-items: center;
      gap: min(1.32231vw, 1rem);

      @media (max-width: 896px) {
        gap: 0.5rem;
      }
    }

    >.box-benefit>.content>.detail>.box-fee {
      display: flex;
      gap: 0.5rem;

      @media (max-width: 896px) {
        gap: 0.3125rem;
      }
    }

    >.box-benefit>.content>.detail>.box-fee>p {
      display: flex;
      width: min(7.93388vw, 6rem);
      min-height: min(7.93388vw, 6rem);
      align-items: center;
      justify-content: center;
      padding: min(1.65289vw, 1.25rem) min(1.32231vw, 1rem);
      border-radius: 50%;
      background-color: var(--color-white);
      color: var(--color-primary);
      font-size: min(1.32231vw, 1rem);
      font-weight: 700;
      line-height: 1.5;
      text-align: center;

      @media (max-width: 896px) {
        width: 4.5rem;
        height: 4.5rem;
        font-size: 0.875rem;
        line-height: 1.5;
      }
    }

    >.box-benefit>.content>.detail>.box-money {
      position: relative;
      top: max(-0.16529vw, -0.125rem);
      display: flex;
      align-items: baseline;
      gap: 0.25rem;

      @media (max-width: 896px) {
        top: 1px;
        gap: 0.3125rem;
      }
    }

    >.box-benefit>.content>.detail>.box-money>.number {
      color: var(--color-primary);
      font-family: var(--font-family-montserrat);
      font-size: min(13.22314vw, 10rem);
      font-weight: 500;
      line-height: 1;

      @media (max-width: 896px) {
        font-size: 6rem;
      }
    }

    >.box-benefit>.content>.detail>.box-money>.unit {
      position: relative;
      top: max(-0.33058vw, -0.25rem);
      color: var(--color-primary);
      font-size: min(3.55372vw, 2.6875rem);
      font-weight: 700;
      line-height: 1;

      @media (max-width: 896px) {
        top: -0.3125rem;
        font-size: 2.25rem;
      }
    }

    >.box-benefit>.description {
      color: var(--color-gray);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.75;
      margin-block-start: max(-0.57851vw, -0.4375rem);
      text-align: center;

      @media (max-width: 896px) {
        margin-block-start: -0.625rem;
        text-align: left;
      }
    }
  }

  /* ---------------------------------------------
  .service-mw-case
------------------------------------------------ */
  .service-mw-case {
    padding-block-start: 7.1875rem;

    @media (max-width: 896px) {
      padding-block-start: 4.6875rem;
    }

    >.list {
      display: grid;
      gap: min(3.22314vw, 2.4375rem);
      grid-template-columns: repeat(5, 1fr);
      padding-inline: min(1.32231vw, 1rem);

      @media (max-width: 896px) {
        gap: 1.25rem 2.4375rem;
        grid-template-columns: repeat(2, 1fr);
        padding-inline: 0.625rem;
      }
    }

    >.list>li>.card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.875rem;

      @media (max-width: 896px) {
        gap: 0.375rem;
      }
    }

    >.list>li>.card img {
      width: 100%;
      height: auto;
      border-radius: 50%;
    }

    >.list>li>.card>p {
      color: var(--color-gray);
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.75;

      @media (max-width: 896px) {
        font-size: 1rem;
      }
    }
  }

  /* ---------------------------------------------
  .service-mw-process
------------------------------------------------ */
  .service-mw-process {
    padding-block: 7.375rem 10rem;

    @media (max-width: 896px) {
      padding-block: 4.75rem 5rem;
    }

    >.text {
      font-weight: 500;
      line-height: 2;
      text-align: center;

      @media (max-width: 896px) {
        line-height: 1.75;
        text-align: left;
      }

      *+& {
        margin-top: 2.9375rem;

        @media (max-width: 896px) {
          margin-top: 2.0625rem;
        }
      }
    }

    >.list {
      display: grid;
      gap: min(2.47934vw, 1.875rem);
      grid-template-columns: repeat(4, 1fr);

      @media (max-width: 896px) {
        gap: 1.75rem;
        grid-template-columns: 1fr;
      }
    }

    >.list>li {
      &:not(:first-child)>.card>.content::before {
        @media (min-width: 897px) {
          position: absolute;
          top: 50%;
          left: max(-1.65289vw, -1.25rem);
          width: min(0.99174vw, 0.75rem);
          height: min(1.65289vw, 1.25rem);
          background: url("/assets/images/service/icon-arrow-01.png") no-repeat left top / contain;
          content: "";
          transform: translateY(-50%);
        }
      }

      &:not(:first-child)>.card {
        position: relative;

        &::before {
          @media (max-width: 896px) {
            position: absolute;
            top: -1.5rem;
            left: 50%;
            width: 0.75rem;
            height: 1.25rem;
            background: url("/assets/images/service/icon-arrow-01.png") no-repeat left top / contain;
            content: "";
            transform: translateX(-50%) rotate(90deg);
          }
        }
      }
    }

    >.list>li>.card {
      display: flex;
      height: 100%;
      flex-direction: column;
      align-items: center;
      border-radius: 1.25rem;
      background-color: var(--color-gray-lighter);

      &[data-color-variant="light-blue"] {
        >.title {
          background-color: var(--color-blue-01);
        }

        >.content>.text {
          color: var(--color-blue-01);
        }
      }

      &[data-color-variant="light-green"] {
        >.title {
          background-color: var(--color-blue-02);
        }

        >.content>.text {
          color: var(--color-blue-02);
        }
      }

      &[data-color-variant="green"] {
        >.title {
          background-color: var(--color-green-01);
        }

        >.content>.text {
          color: var(--color-green-01);
        }
      }
    }

    >.list>li>.card>.title {
      width: 100%;
      padding: 0.3125rem 1rem 0.375rem;
      border-radius: 1.25rem 1.25rem 0 0;
      background-color: var(--color-primary);
      color: var(--color-white);
      font-size: min(1.4876vw, 1.125rem);
      font-weight: 700;
      line-height: 1.55556;
      text-align: center;

      @media (max-width: 896px) {
        padding: 0.375rem 1rem;
        font-size: 1rem;
        line-height: 1.75;
      }
    }

    >.list>li>.card>.content {
      position: relative;
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
      padding: 1.5rem 1rem 1.9375rem;
      gap: 0.9375rem;

      @media (max-width: 896px) {
        padding: 1rem 1rem 1.9375rem;
        gap: 0.4375rem;
      }
    }

    >.list>li>.card>.content>.icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    >.list>li>.card>.content>.icon>img {
      width: auto;
      height: 4rem;
      -o-object-fit: contain;
      object-fit: contain;
    }

    >.list>li>.card>.content>.text {
      color: var(--color-primary);
      font-size: min(1.4876vw, 1.125rem);
      font-weight: 700;
      line-height: 1.55556;
      text-align: center;

      @media (max-width: 896px) {
        font-size: 1.125rem;
        font-weight: 700;
      }
    }
  }

  /* ---------------------------------------------
  .service-sfp-intro
------------------------------------------------ */
  .service-sfp-intro {
    padding-block: 5.9375rem 10rem;

    @media (max-width: 896px) {
      padding-block: 2.5rem 4.5625rem;
    }
  }

  /* ---------------------------------------------
  .service-subsclamp-intro
------------------------------------------------ */
  .service-subsclamp-intro {
    padding-block-start: 5.9375rem;

    @media (max-width: 896px) {
      padding-block-start: 2.5rem;
    }

    >.box-button {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  #sitemap
------------------------------------------------ */
  #sitemap {
    .hero-heading {
      @media (max-width: 896px) {
        margin-block-end: 2.5rem;
      }
    }
  }

  /* ---------------------------------------------
  .sitemap-list
------------------------------------------------ */
  .sitemap-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.875rem;

    @media (max-width: 896px) {
      flex-direction: column;
      gap: 1rem;
    }

    >li {
      @media (min-width: 897px) {
        width: calc(50% - 0.9375rem);
      }

      &[data-list-variant="full"] {
        @media (min-width: 897px) {
          width: 100%;
        }
      }
    }

    >li>.button {
      width: 100%;
      max-width: 100%;
    }

    >li>.body {
      padding: 1rem 1rem 0.875rem;

      @media (min-width: 897px) {
        padding: 1.5rem 1.5rem 0.625rem;
      }
    }
  }

  /* ---------------------------------------------
  .sitemap-sub-list
------------------------------------------------ */
  .sitemap-sub-list {
    display: grid;
    row-gap: 0.625rem;

    @media (min-width: 897px) {
      gap: 1.5rem 0.125rem;
      grid-template-columns: repeat(3, 1fr);
    }

    >li>ul {
      display: grid;
      margin-block-start: 1rem;
      row-gap: 0.625rem;

      @media (min-width: 897px) {
        row-gap: 0.5rem;
      }
    }

    &[data-sub-variant="two-column"] {
      padding-block: 0.5rem 0.625rem;
      row-gap: 2.5rem;

      @media (min-width: 897px) {
        gap: 2.5rem 1.875rem;
        grid-template-columns: repeat(2, 1fr);
        padding-block: 0;
      }
    }
  }
}

@layer pages {

  .storefront-quotations {
    background: url("/assets/images/recruit/storefront_quotations/bg-pc.jpg") repeat top -119px center;
    background-size: 90rem auto;
    padding-block-end: 10rem;

    @media (min-width: 897px) {
      margin-block-start: -4.0625rem;
    }

    @media (max-width: 896px) {
      background: url("/assets/images/recruit/storefront_quotations/bg-sp.jpg") repeat top -48px center;
      background-size: 23.4375rem auto;
      padding-block-end: 5rem;
    }
  }

  /* ---------------------------------------------
  .storefront-quotations-intro
------------------------------------------------ */
  .storefront-quotations-intro {
    padding-block: 10.3125rem 7.8125rem;

    @media (max-width: 896px) {
      padding-block: 10rem 13.375rem;
    }

    @media (min-width: 897px) {
      overflow: hidden;
    }

    >.box {
      position: relative;
      width: 100%;
      max-width: 51.875rem;
      border-radius: 5rem;
      margin: 0 auto;
      background-color: var(--color-primary);

      @media (max-width: 896px) {
        border-radius: 2.5rem;
      }

      &::before {
        position: absolute;
        bottom: -2.5rem;
        left: 9.375rem;
        width: 0;
        height: 0;
        border-width: 56px 56px 0 0;
        border-style: solid;
        border-color: var(--color-primary) transparent transparent transparent;
        content: "";

        @media (max-width: 896px) {
          bottom: -1.375rem;
          left: 2.8125rem;
          border-width: 24px 24px 0 0;
        }
      }
    }

    >.box>.inner {
      position: relative;
      padding: 6.125rem 1.875rem 5.9375rem;

      @media (max-width: 896px) {
        padding: 3.1875rem 1.875rem;
      }

      &::before {
        position: absolute;
        top: -3.5rem;
        left: -6.6875rem;
        width: 15.5rem;
        height: 12.25rem;
        background-image: url("/assets/images/recruit/storefront_quotations/bg-intro-01-pc.png");
        background-repeat: no-repeat;
        background-size: contain;
        content: "";

        @media (max-width: 896px) {
          top: -1.75rem;
          left: -3.1875rem;
          width: 8.5rem;
          height: 6.25rem;
          background-image: url("/assets/images/recruit/storefront_quotations/bg-intro-01-sp.png");
        }
      }

      &::after {
        position: absolute;
        right: -6.3125rem;
        bottom: -1.875rem;
        width: 13.9375rem;
        height: 10.625rem;
        background-image: url("/assets/images/recruit/storefront_quotations/bg-intro-02-pc.png");
        background-repeat: no-repeat;
        background-size: contain;
        content: "";

        @media (max-width: 896px) {
          right: -1.6875rem;
          bottom: -2.125rem;
          width: 6.9375rem;
          height: 5.3125rem;
          background-image: url("/assets/images/recruit/storefront_quotations/bg-intro-02-sp.png");
        }
      }
    }

    >.box>.inner>h1 {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    >.box>.inner>h1 img {
      height: auto;
      border-bottom: 4px solid var(--color-white);
      padding-block-end: 1rem;

      @media (max-width: 896px) {
        max-width: 17.8125rem;
        border-width: 0 0 2px;
      }
    }

    >.box>.inner>.text {
      position: relative;
      z-index: 1;
      color: var(--color-white);
      font-weight: 500;
      line-height: 2;
      text-align: center;

      @media (max-width: 896px) {
        font-size: 0.875rem;
        line-height: 1.75;
        text-align: left;
      }

      *+& {
        margin-block-start: 1.1875rem;
      }
    }
  }

  /* ---------------------------------------------
  .storefront-quotations-content
------------------------------------------------ */
  .storefront-quotations-content {
    padding: 7.5rem 1.875rem;
    border-radius: 5rem;
    background-color: var(--color-white);

    @media (max-width: 896px) {
      padding: 2.5rem 1.5rem;
      border-radius: 1.25rem;
    }

    >.inner {
      width: 100%;
      max-width: 60.625rem;
      margin: 0 auto;
    }

    >.inner>ul>li:last-child .storefront-quotations-card {
      padding-block-end: 0;
    }
  }

  /* ---------------------------------------------
  .storefront-quotations-card
------------------------------------------------ */
  .storefront-quotations-card {
    padding-block-end: 7.5rem;

    @media (max-width: 896px) {
      padding-block-end: 5rem;
    }

    &[data-background-variant="square"] {
      >.box-number::before {
        top: calc(50% - 0.25rem);

        @media (max-width: 896px) {
          top: calc(50% - 0.125rem);
        }
      }

      >.box-number>.number {
        width: 6rem;
        height: 5rem;
        background-image: url("/assets/images/recruit/storefront_quotations/bg-no-square.png");
        background-size: 6rem 5rem;
        padding-block-start: 0.6875rem;

        @media (max-width: 896px) {
          position: relative;
          left: -1px;
          width: 3rem;
          height: 2.5rem;
          background-size: 3rem 2.5rem;
          padding-block-start: 0.25rem;
          padding-inline-start: 0.1875rem;
        }
      }
    }

    &[data-background-variant="hexagon"] {
      >.box-number::before {
        top: calc(50% - 0.125rem);
      }

      >.box-number>.number {
        position: relative;
        left: 0.125rem;
        width: 6.25rem;
        height: 5rem;
        background-image: url("/assets/images/recruit/storefront_quotations/bg-no-hexagon.png");
        background-size: 6.25rem 5rem;
        padding-block-start: 0.8125rem;
        padding-inline-end: 0.1875rem;

        @media (max-width: 896px) {
          left: 0;
          width: 3.125rem;
          height: 2.5rem;
          background-size: 3.125rem 2.5rem;
          padding-block-start: 0.25rem;
          padding-inline-start: 0.1875rem;
        }
      }
    }

    &[data-background-variant="flower"] {
      >.box-number::before {
        top: 50%;

        @media (max-width: 896px) {
          top: calc(50% - 0.125rem);
        }
      }

      >.box-number>.number {
        width: 5.9375rem;
        height: 5rem;
        background-image: url("/assets/images/recruit/storefront_quotations/bg-no-flower.png");
        background-size: 5.9375rem 5rem;
        padding-block-start: 0.9375rem;

        @media (max-width: 896px) {
          width: 2.9375rem;
          height: 2.5rem;
          background-size: 2.9375rem 2.5rem;
          padding-block-start: 0.25rem;
          padding-inline-start: 1px;
        }
      }
    }

    &[data-background-variant="oval"] {
      >.box-number::before {
        top: calc(50% - 0.25rem);

        @media (max-width: 896px) {
          top: calc(50% - 0.125rem);
        }
      }

      >.box-number>.number {
        width: 6rem;
        height: 5rem;
        padding: 0.6875rem 0.3125rem 0;
        background-image: url("/assets/images/recruit/storefront_quotations/bg-no-oval.png");
        background-size: 6rem 5rem;

        @media (max-width: 896px) {
          width: 3rem;
          height: 2.5rem;
          background-size: 3rem 2.5rem;
          padding-block-start: 0.25rem;
          padding-inline-start: 0.375rem;
        }
      }
    }

    &[data-background-variant="cloud"] {
      >.box-number::before {
        top: calc(50% + 1px);

        @media (max-width: 896px) {
          top: 50%;
        }
      }

      >.box-number>.number {
        position: relative;
        left: -0.1875rem;
        width: 6.125rem;
        height: 5rem;
        background-image: url("/assets/images/recruit/storefront_quotations/bg-no-cloud.png");
        background-size: 6.125rem 5rem;
        padding-block-start: 1rem;
        padding-inline-start: 0.4375rem;

        @media (max-width: 896px) {
          left: -0.125rem;
          width: 3.0625rem;
          height: 2.5rem;
          background-size: 3.0625rem 2.5rem;
          padding-block-start: 0.375rem;
          padding-inline-start: 0.375rem;
        }
      }

      *+.sub-heading {
        margin-block-start: 2.625rem;

        @media (max-width: 896px) {
          margin-block-start: 1.3125rem;
        }
      }
    }

    >.box-number {
      position: relative;
      width: 100%;

      &::before {
        position: absolute;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--color-gray-light);
        content: "";
      }
    }

    >.box-number>.number {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 auto;
      color: var(--color-white);

      @media (min-width: 897px) {
        gap: 1px;
      }
    }

    >.box-number>.number>span {
      font-size: 0.75rem;
      font-weight: 700;
      line-height: 1;

      @media (max-width: 896px) {
        font-size: 0.625rem;
      }
    }

    >.box-number>.number>p {
      font-family: var(--font-family-montserrat);
      font-size: 2.25rem;
      font-weight: 600;
      line-height: 1;

      @media (max-width: 896px) {
        font-size: 1.25rem;
      }
    }

    >.sub-heading {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-primary);
      font-size: 1rem;
      font-weight: 700;
      gap: 0.75rem;
      line-height: 1.5;
      text-align: center;

      @media (max-width: 896px) {
        font-size: 0.75rem;
        gap: 0.25rem;
        line-height: 1.5;
      }

      &:has(br) {
        gap: 0.375rem;

        @media (max-width: 896px) {
          gap: 1px;
        }

        &::before,
        &::after {
          width: 4rem;

          @media (max-width: 896px) {
            width: 3rem;
          }
        }
      }

      &:has(br ~ br) {
        @media (max-width: 896px) {
          gap: 0;
        }

        &::before,
        &::after {
          @media (max-width: 896px) {
            width: 4.5rem;
          }
        }
      }

      &::before,
      &::after {
        display: block;
        width: 2rem;
        height: 1px;
        background-color: var(--color-primary);
        content: "";

        @media (max-width: 896px) {
          width: 1.5rem;
        }
      }

      &::before {
        transform: rotate(45deg);
      }

      &::after {
        transform: rotate(-45deg);
      }

      *+& {
        margin-block-start: 2.3125rem;

        @media (max-width: 896px) {
          margin-block-start: 1.1875rem;
        }
      }
    }

    >.heading {
      font-size: 4rem;
      font-weight: 700;
      line-height: 1.25;
      text-align: center;

      @media (max-width: 896px) {
        font-size: 1.75rem;
        line-height: 1.25;
      }

      *+& {
        margin-block-start: 0.875rem;

        @media (max-width: 896px) {
          margin-block-start: 0.5rem;
        }
      }
    }

    >.content {
      @media (min-width: 897px) {
        display: grid;
        align-items: start;
        gap: 1.875rem;
        grid-template-columns: 1fr 1fr;
      }

      *+& {
        margin-block-start: 3.75rem;

        @media (max-width: 896px) {
          margin-block-start: 1.6875rem;
        }
      }
    }

    >.content>.box-text {
      font-weight: 500;
      line-height: 2;

      @media (max-width: 896px) {
        font-size: 0.875rem;
        line-height: 1.75;
      }
    }

    >.content>.box-quote {
      display: flex;
      align-items: flex-start;
      padding: 1.5rem;
      border-radius: 1.25rem;
      background-color: var(--color-gray-lighter);
      gap: 1.5rem;
      margin-block-start: 0.625rem;

      @media (max-width: 896px) {
        flex-direction: column;
        padding: 1rem;
        border-radius: 1.25rem;
        gap: 1rem;
      }

      *+& {
        @media (max-width: 896px) {
          margin-block-start: 1.5625rem;
        }
      }
    }

    >.content>.box-quote>.quote {
      position: relative;
      padding: 0.75rem 1rem 1.1875rem;
      border-radius: 1.25rem;
      background-color: var(--color-gray-light-medium);
      color: var(--color-gray);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.5;

      @media (max-width: 896px) {
        order: 1;
        border-radius: 0.625rem;
      }

      &::before {
        position: absolute;
        width: 0;
        height: 0;
        border-width: 16px 0 0 16px;
        border-style: solid;
        border-color: var(--color-gray-light-medium) transparent transparent transparent;
        content: "";

        @media (min-width: 897px) {
          top: 1.8125rem;
          left: -1rem;
        }

        @media (max-width: 896px) {
          bottom: -0.5rem;
          left: 50%;
          margin-left: -0.5rem;
          transform: rotate(270deg) translateX(-50%);
        }
      }
    }

    >.content>.box-quote>.profile {
      display: flex;
      align-items: center;
      gap: 0.25rem;

      @media (min-width: 897px) {
        flex: 0 0 4rem;
        flex-direction: column;
      }

      @media (max-width: 896px) {
        order: 2;
        border-radius: 0.625rem;
        margin: 0 auto;
        gap: 0.5rem;
      }
    }

    >.content>.box-quote>.profile>.department {
      color: var(--color-primary);
      font-size: 0.75rem;
      font-weight: 700;

      @media (min-width: 897px) {
        margin-inline: -1.25rem;
        text-align: center;
      }
    }

    >.content>.box-quote>.profile>.image {
      overflow: hidden;
      width: 4rem;
      height: 4rem;
      border-radius: 50%;

      @media (max-width: 896px) {
        width: 2.5rem;
        height: 2.5rem;
      }
    }

    >.content>.box-quote>.profile>.image>img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  #top
------------------------------------------------ */
  #top {
    >main {
      overflow-x: clip;
    }
  }

  /* ---------------------------------------------
  .top-mv
------------------------------------------------ */
  .top-mv {
    position: relative;
    display: flex;
    min-height: 100svh;
    align-items: center;
    justify-content: center;
    margin-block-start: -7.5rem;

    @media (max-width: 896px) {
      margin-block-start: -3rem;
    }

    >.video-box {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: oklch(from var(--color-gray-light-dark) l c h / 20%);
        content: "";
      }
    }

    >.video-box>video {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }

    >.content {
      position: relative;
      z-index: 1;
      width: 100%;
      padding: min(12.8dvw, 3rem) 1.25rem 0;

      @media (min-width: 897px) {
        padding-block-start: min(8.33333dvw, 7.5rem);
      }
    }

    >.content>h1 {
      width: 100%;
      max-width: min(84dvw, 19.6875rem);
      margin: 0 auto 0.875rem;

      @media (min-width: 897px) {
        max-width: 40rem;
        margin-block-end: 1.5rem;
      }
    }

    >.content>h1>picture {
      display: block;
    }

    >.content>h1>picture>img {
      width: 100%;
      height: auto;
    }

    >.content>.text {
      color: var(--color-white);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.75;
      margin-block-end: 1.375rem;
      text-align: center;

      @media (min-width: 897px) {
        font-size: 1.125rem;
        line-height: 1.445;
        margin-block-end: 1.5rem;
      }
    }

    >.content>.button {
      margin: 0 auto;
    }
  }

  /* ---------------------------------------------
  .top-service
------------------------------------------------ */
  .top-service {
    background-color: var(--color-button-accordian);
    background-repeat: no-repeat;
    padding-block: 10rem;

    @media (min-width: 897px) {
      background-image: url("/assets/images/top/bg-service-pc.png");
      background-position: top right -636px;
    }

    @media (max-width: 896px) {
      background-image: url("/assets/images/top/bg-service-sp.png");
      background-position: top left;
      background-size: 100% auto;
      padding-block: 5.625rem 4.8125rem;
    }

    &[data-bg-fixed="true"] {
      background-attachment: fixed;
    }

    >.container {
      @media (min-width: 897px) {
        justify-content: space-between;
      }

      @media (max-width: 896px) {
        gap: 2.5rem;
      }
    }

    >.container>.nav {
      @media (min-width: 897px) {
        width: 18.75rem;
        flex: 0 0 auto;
        padding-inline-end: min(2.08333dvw, 1.875rem);
      }
    }

    &[data-bg-fixed="true"]>.container>.nav {
      @media (min-width: 897px) {
        position: sticky;
        top: 10rem;
        align-self: flex-start;
      }
    }

    >.container>.content {
      @media (min-width: 897px) {
        max-width: 50rem;
      }
    }

    >.container>.nav>.hero-heading {
      padding: 0;
      margin-block-end: 4.75rem;

      @media (max-width: 896px) {
        margin-block-end: 2.5rem;
      }
    }

    >.container>.nav>.button {
      *+& {
        margin-block-start: 4.8125rem;
      }
    }

    >.container>.content>.list {
      display: flex;
      flex-direction: column;
      gap: 1.875rem;

      @media (max-width: 896px) {
        gap: 1rem;
      }
    }

    >.container>.content>.list>li>.card {
      position: relative;
      display: flex;
      overflow: hidden;
      min-height: 20rem;
      align-items: flex-start;
      padding: 2.3125rem 2.5rem 7.25rem;
      border-radius: 2.5rem;
      background-color: var(--color-white);
      -moz-column-gap: 2rem;
      column-gap: 2rem;

      @media (min-width: 897px) {
        max-width: 48.125rem;
        margin-inline-start: auto;
        transition: max-width var(--transition-duration) var(--transition-timing-function);
      }

      @media (max-width: 896px) {
        min-height: 0;
        flex-direction: column;
        padding: 1.75rem 1.5rem 1.5rem;
        border: 1px solid var(--color-gray-light);
        border-radius: 1.25rem;
        gap: 0.9375rem;
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          max-width: 50rem;

          >.image {
            opacity: 1;
            visibility: visible;
          }

          >.logo {
            border-color: var(--color-white);
          }

          >.detail>.tag,
          >.detail>.tag[data-color-variant="primary"] {
            border-color: var(--color-white);
            color: var(--color-white);
          }

          >.detail>.sub-title,
          >.detail>.title,
          >.detail>.type {
            color: var(--color-white);
          }

          >.detail>.box-arrow>.arrow {
            background-color: var(--color-white);
          }

          >.detail>.box-arrow>.arrow::before {
            transform: scale(1.25);
          }
        }
      }
    }

    >.container>.content>.list>li>.card>.image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition:
        opacity var(--transition-duration) var(--transition-timing-function),
        visibility var(--transition-duration) var(--transition-timing-function);
      visibility: hidden;
    }

    >.container>.content>.list>li>.card>.image img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }

    >.container>.content>.list>li>.card>.logo {
      position: relative;
      top: 0.25rem;
      overflow: hidden;
      width: 6rem;
      height: 6rem;
      flex-shrink: 0;
      border: 1px solid var(--color-gray-light);
      border-radius: 0.625rem;
      background-color: var(--color-white);

      @media (max-width: 896px) {
        top: 0;
        width: 5rem;
        height: 5rem;
        order: 3;
      }
    }

    >.container>.content>.list>li>.card>.logo>img {
      width: 100%;
      height: auto;
    }

    >.container>.content>.list>li>.card>.detail {
      z-index: 1;

      @media (min-width: 897px) {
        flex: 1;
      }

      @media (max-width: 896px) {
        order: 1;
      }
    }

    >.container>.content>.list>li>.card>.detail>.tag {
      display: inline-block;
      padding: 0.25rem 0.4375rem;
      border: 1px solid var(--color-red);
      border-radius: 0.25rem;
      color: var(--color-red);
      font-size: 0.6875rem;
      font-weight: 500;
      line-height: 1;
      margin-block-end: 0.8125rem;
      transition:
        color var(--transition-duration) var(--transition-timing-function),
        border-color var(--transition-duration) var(--transition-timing-function);

      @media (max-width: 896px) {
        margin-block-end: 0.875rem;
      }

      &[data-color-variant="primary"] {
        border-color: var(--color-primary);
        color: var(--color-primary);
      }
    }

    >.container>.content>.list>li>.card>.detail>.sub-title {
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.5;
      transition: color var(--transition-duration) var(--transition-timing-function);

      @media (max-width: 896px) {
        font-size: 0.6875rem;
        line-height: 1.5;
      }
    }

    >.container>.content>.list>li>.card>.detail>.title {
      color: var(--color-gray-dark);
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.5;
      transition: color var(--transition-duration) var(--transition-timing-function);

      @media (max-width: 896px) {
        font-size: 1.0625rem;
        line-height: 1.5;
      }

      *+& {
        margin-block-start: 0.5rem;

        @media (max-width: 896px) {
          margin-block-start: 0.75rem;
        }
      }
    }

    >.container>.content>.list>li>.card>.detail>.type {
      color: var(--color-gray);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.5;
      transition: color var(--transition-duration) var(--transition-timing-function);

      @media (max-width: 896px) {
        font-size: 0.625rem;
      }

      *+& {
        margin-block-start: 0.6875rem;

        @media (max-width: 896px) {
          margin-block-start: 0.625rem;
        }
      }
    }

    >.container>.content>.list>li>.card>.detail>.box-arrow {
      position: absolute;
      right: 2.5rem;
      bottom: 2.5rem;

      @media (max-width: 896px) {
        right: 1.5rem;
        bottom: 1.5rem;
      }
    }

    >.container>.content>.list>li>.card>.detail>.box-arrow>.arrow {
      position: relative;
      display: block;
      width: 4rem;
      height: 4rem;
      border-radius: 4rem;

      @media (max-width: 896px) {
        width: 3rem;
        height: 3rem;
      }

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 4rem;
        height: 4rem;
        border-radius: 4rem;
        background-color: var(--color-gray-lighter);
        content: "";
        transition: transform var(--transition-duration) var(--transition-timing-function), background-color var(--transition-duration) var(--transition-timing-function);

        @media (max-width: 896px) {
          width: 3rem;
          height: 3rem;
          border-radius: 3rem;
        }
      }
    }

    >.container>.content>.list>li>.card>.detail>.box-arrow>.arrow>i {
      position: absolute;
      top: 50%;
      left: 50%;
      overflow: hidden;
      width: 0.75rem;
      height: 0.75rem;
      transform: translate(-50%, -50%);

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("/assets/images/common/icon-arrow-right-03.svg") no-repeat left top / contain;
        content: "";
        transition: all var(--transition-duration) var(--transition-timing-function);
      }
    }

    >.container>.content>.list>li>.card[target="_blank"]>.detail>.box-arrow>.arrow>i {
      &::before {
        background-image: url("/assets/images/common/icon-new-window-02.svg");
      }
    }

    >.container>.content>.button {
      @media (max-width: 896px) {
        margin: 2rem auto 0;
      }
    }
  }

  /* ---------------------------------------------
  .top-oneaction
------------------------------------------------ */
  .top-oneaction {
    position: relative;
    overflow: hidden;
    background: url("/assets/images/top/bg-oneaction-sp.jpg") no-repeat fixed center / cover;
    padding-block: 4.625rem 5rem;

    @media (min-width: 897px) {
      background-image: url("/assets/images/top/bg-oneaction-pc.jpg");
      padding-block: 9.1875rem 10rem;
    }

    @supports (-webkit-touch-callout: none) {
      background: none;
      clip-path: inset(0);

      &::before {
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("/assets/images/top/bg-oneaction-sp.jpg") no-repeat center / cover;
        content: "";
        pointer-events: none;
        will-change: transform;

        @media (min-width: 897px) {
          background-image: url("/assets/images/top/bg-oneaction-pc.jpg");
        }
      }
    }

    >.container>.heading {
      font-size: 0;
      margin-block-end: 2.375rem;

      @media (min-width: 897px) {
        margin-block-end: 3rem;
      }
    }

    >.container>.heading>h2 {
      color: var(--color-white);
      font-family: var(--font-family-rockwell);
      font-size: 1.9375rem;
      font-weight: 700;
      line-height: 1.1613;

      @media (min-width: 897px) {
        font-size: 4rem;
        line-height: 1.1875;
      }
    }

    >.container>.heading>p {
      position: relative;
      display: inline-block;
      color: var(--color-white);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.41667;
      margin-block-start: 0.1875rem;
      padding-inline: 2.5rem;

      @media (min-width: 897px) {
        font-size: 1rem;
        line-height: 1.5;
        margin-block-start: 0.375rem;
        padding-inline: 3.5rem;
      }

      &::before,
      &::after {
        position: absolute;
        top: calc(50% - 1px);
        width: 1.5rem;
        height: 1px;
        background-color: var(--color-white);
        content: "";

        @media (min-width: 897px) {
          top: 50%;
          width: 2.5rem;
        }
      }

      &::before {
        left: 0;
      }

      &::after {
        right: 0;
      }
    }

    >.container>.content {
      margin-block-end: 3rem;

      @media (min-width: 897px) {
        margin-block-end: 3.5rem;
      }
    }

    >.container>.content>.top {
      margin-block-end: 3.8125rem;

      @media (min-width: 897px) {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
        margin-block-end: 3.75rem;
      }
    }

    >.container>.content>.top>.text {
      color: var(--color-white);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.75;

      @media (min-width: 897px) {
        flex: 1;
        font-size: 1rem;
        line-height: 2;
        padding-block-start: 0.25rem;
      }
    }

    >.container>.content>.top>.controller {
      display: flex;
      -moz-column-gap: 1rem;
      column-gap: 1rem;

      @media (max-width: 896px) {
        display: none;
      }
    }

    >.container>.content>.top>.controller>.button-previous,
    >.container>.content>.top>.controller>.button-next {
      border: none;

      &[aria-disabled="true"] {
        opacity: 0.3;
      }
    }

    >.container>.button {
      @media (max-width: 896px) {
        margin: 0 auto;
      }
    }
  }

  /* ---------------------------------------------
  .oneaction-slider
------------------------------------------------ */
  .oneaction-slider {
    width: calc(100dvw + 1.25rem);

    @media (min-width: 897px) {
      width: calc(100dvw - 50% + 35.3125rem);
    }

    >.slider>.list>.item {
      width: calc(80.48938% - 0.18291rem);
      height: auto;

      @media (min-width: 897px) {
        width: calc(55.17241% - 0.84049rem);
      }
    }

    >.slider>.list>.item>.card-article {
      @media (min-width: 897px) {
        row-gap: 1.875rem;
      }
    }

    >.slider>.list>.item>.card-article>.detail {
      @media (min-width: 897px) {
        padding-inline-end: 3.125rem;
      }
    }

    >.slider>.list>.item>.card-article>.detail>.meta {
      @media (min-width: 897px) {
        margin-block-end: 0.5rem;
      }
    }

    >.slider>.list>.item>.card-article>.detail>.title {
      @media (min-width: 897px) {
        font-size: 1.5rem;
        line-height: 1.5;
      }
    }

    >.slider>.list>.item>.card-article>.detail>.tags {
      @media (min-width: 897px) {
        margin-block-start: 0.9375rem;
      }
    }
  }

  /* ---------------------------------------------
  .top-blog
------------------------------------------------ */
  .top-blog {
    position: relative;
    padding-block: 5.625rem 5rem;

    @media (min-width: 897px) {
      padding-block: 9.125rem 10rem;
    }

    >.container {
      position: relative;
      z-index: 1;
    }

    >.container>.heading-box {
      display: flex;
      flex-direction: column;
      gap: 1.4375rem 1.875rem;
      margin-block-end: 3.8125rem;

      @media (min-width: 897px) {
        flex-flow: row wrap;
        align-items: flex-end;
        justify-content: space-between;
        margin-block-end: 4rem;
      }
    }

    >.container>.heading-box>.heading {
      font-size: 0;
    }

    >.container>.heading-box>.heading>.title {
      width: 100%;
      max-width: 17.1875rem;

      @media (min-width: 897px) {
        max-width: 24.3125rem;
      }
    }

    >.container>.heading-box>.heading>.title>picture {
      display: block;
    }

    >.container>.heading-box>.heading>.title>picture>img {
      width: 100%;
      height: auto;
    }

    >.container>.heading-box>.heading>p {
      position: relative;
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.41667;
      margin-block-start: 0.75rem;
      padding-inline: 2.5rem;

      @media (min-width: 897px) {
        font-size: 1rem;
        line-height: 1.5;
        margin-block-start: -0.3125rem;
        padding-inline: 3.5rem;
      }

      &::before,
      &::after {
        position: absolute;
        top: 50%;
        width: 1.5rem;
        height: 1px;
        background-color: var(--color-gray-dark);
        content: "";

        @media (min-width: 897px) {
          width: 2.5rem;
        }
      }

      &::before {
        left: 0;
      }

      &::after {
        right: 0;
      }
    }

    >.container>.heading-box>.text {
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.786;

      @media (min-width: 897px) {
        flex: 1;
        font-size: 1rem;
        line-height: 2;
        margin-block-end: -0.25rem;
        text-align: right;
      }
    }

    >.container>.list-card-article {
      margin-block-end: 2.9375rem;

      @media (min-width: 897px) {
        margin-block-end: 3.375rem;
      }
    }

    >.container>.list-card-article>li:last-child {
      @media (max-width: 896px) {
        border-bottom: none;
        padding-block-end: 0;
      }
    }

    >.container>.button {
      @media (max-width: 896px) {
        margin: 0 auto;
      }
    }
  }

  /* ---------------------------------------------
  .rectangle-box
------------------------------------------------ */
  .rectangle-box {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 9.86667dvw;
    width: 35.8125rem;
    height: 70.875rem;
    min-height: 100svh;
    transform: skewX(-45deg);

    @media (min-width: 897px) {
      right: 51.04167dvw;
      width: 60.625rem;
      height: 120rem;
    }

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--color-blue-03);
      content: "";

      @media (max-width: 896px) {
        opacity: 0.5;
      }
    }

    &[data-position="fixed"] {
      position: fixed;
    }
  }

  /* ---------------------------------------------
  .top-recruit
------------------------------------------------ */
  .top-recruit {
    position: relative;
    z-index: 1;
    overflow: hidden;

    &::before,
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: "";
      pointer-events: none;
    }

    &::before {
      background: url("/assets/images/top/bg-gradient-01-sp.png") no-repeat right bottom / 100% auto;

      @media (min-width: 897px) {
        /* background-image: url("/src/images/top/bg-gradient-01-pc.png"); */
        display: none;
      }
    }

    &::after {
      background-color: oklch(from var(--color-gray-light-dark) l c h / 15%);
    }

    >picture {
      display: block;
    }

    >picture>img {
      width: 100%;
      height: auto;
    }

    >.inner {
      position: absolute;
      z-index: 2;
      bottom: min(21.33333dvw, 5rem);
      left: 0;
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
      padding-inline: 1.875rem;

      @media (min-width: 897px) {
        bottom: min(10.41667dvw, 9.375rem);
        align-items: flex-start;
        padding-inline: min(44.23611dvw, 39.8125rem) 1.25rem;
      }

      @media (width < 375px) {
        padding-inline: 1.25rem;
      }
    }

    >.inner>.title {
      width: 100%;
      max-width: min(76dvw, 17.8125rem);
      margin: 0 auto -1px;
      margin-block-end: min(7.2dvw, 1.6875rem);

      @media (min-width: 897px) {
        max-width: min(51.45833dvw, 46.3125rem);
        margin: 0;
        margin-block-end: min(2.08333dvw, 1.875rem);
      }
    }

    >.inner>.title>img {
      width: 100%;
      height: auto;
    }

    >.inner>.text {
      color: var(--color-white);
      font-size: clamp(0.625rem, 3.73333dvw, 0.875rem);
      font-weight: 700;
      letter-spacing: 0.1em;
      line-height: 1.57143;
      margin-block-end: min(8.26667dvw, 1.9375rem);

      @media (min-width: 897px) {
        font-size: clamp(0.75rem, 1.11111dvw, 1rem);
        line-height: 1.75;
        margin-block-end: min(2.63889dvw, 2.375rem);
      }
    }

    >.inner>.text>p {
      span {
        @media (max-width: 896px) {
          display: block;
        }
      }

      &:first-child {
        text-indent: min(10.93333dvw, 41px);

        @media (min-width: 897px) {
          text-indent: min(2.91667dvw, 42px);
        }

        >span {
          @media (max-width: 896px) {
            text-indent: min(8.26667dvw, 31px);
          }
        }
      }

      &:nth-child(2) {
        text-indent: min(5.6dvw, 21px);

        @media (min-width: 897px) {
          text-indent: min(1.52778dvw, 22px);
        }

        >span {
          @media (max-width: 896px) {
            text-indent: min(2.93333dvw, 11px);
          }
        }
      }

      &:last-child {
        text-indent: min(0dvw, 0px);

        @media (min-width: 897px) {
          text-indent: min(0dvw, 0px);
        }
      }
    }

    >.inner>.photo {
      position: absolute;
      right: 1.25rem;
      bottom: min(-2.08333dvw, -1.875rem);
      width: 100%;
      max-width: min(20.48611dvw, 18.4375rem);

      @media (max-width: 896px) {
        display: none;
      }
    }

    >.inner>.photo>img {
      width: 100%;
      height: auto;
    }

    >.inner>.button {
      margin: 0 auto;

      @media (min-width: 897px) {
        min-height: clamp(3.125rem, 4.44444dvw, 4rem);
        margin: 0;
      }
    }
  }

  /* ---------------------------------------------
  .top-corporate
------------------------------------------------ */
  .top-corporate {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding-block-start: 5rem;

    @media (min-width: 897px) {
      padding-block-start: 10rem;
    }

    .hero-heading {
      padding-block-start: 0;
      padding-inline: 0;

      @media (max-width: 896px) {
        padding-block-end: 2.5rem;
      }
    }
  }

  /* ---------------------------------------------
  .top-company
------------------------------------------------ */
  .top-company {
    >.button {
      margin-block-start: 4rem;

      @media (max-width: 896px) {
        margin: 2.5rem auto 0;
      }
    }
  }

  /* ---------------------------------------------
  .top-news
------------------------------------------------ */
  .top-news {
    padding-block-start: 5rem;

    @media (min-width: 897px) {
      padding-block-start: 10rem;
    }

    >.list-news {
      margin-block-end: 2.5rem;

      @media (min-width: 897px) {
        margin-block-end: 4rem;
      }
    }

    >.button {
      @media (max-width: 896px) {
        margin: 0 auto;
      }
    }
  }
}