@layer components {

  /* ---------------------------------------------
  .badge
------------------------------------------------ */
  .badge {
    display: flex;
    width: 110px;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 5px;
    color: var(--color-text-light);
    font-family: var(--font-family);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 2;
    text-align: center;

    &[data-badge-variant="notice"] {
      background: var(--color-tag-blue);
    }

    &[data-badge-variant="event"] {
      background: var(--color-tag-green);
    }

    &[data-badge-variant="maintenance"] {
      background: var(--color-tag-purple);
    }

    &[data-badge-variant="category1"] {
      background: var(--color-tag-bluegreen);
    }

    &[data-badge-variant="category2"] {
      background: var(--color-tag-brown);
    }
  }

  /* ---------------------------------------------
  .badge
------------------------------------------------ */
  .badge-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: var(--font-family);
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;

    &[data-badge-fill="brand"] {
      background: var(--color-red-95);
      color: var(--color-text-brand);
      text-decoration: underline;

      @media (hover: hover) {
        transition: all 300ms ease-out;

        &:hover {
          opacity: 0.7;
        }
      }
    }

    &[data-badge-fill="subtle"] {
      background: var(--color-gray-80);
      color: var(--color-text-subtle);
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .box-related-slide
------------------------------------------------ */
  .box-related-slide {
    >.item {
      width: calc(33.33333% - 20px);

      @media (max-width: 896px) {
        width: 100%;
      }
    }
  }

  /* ---------------------------------------------
  .box-related-slide-wrap
------------------------------------------------ */
  .box-related-slide-wrap {
    @media (max-width: 896px) {
      padding-bottom: 69px;
    }

    .splide__arrow {
      top: inherit;
      bottom: 0;
      left: 0;
      width: 60px;
      height: 60px;
      border: 1px solid var(--color-stroke-dark);
      border-radius: 5px;
      background-color: var(--color-fill-default);
      opacity: 1;
      transform: none;
    }

    .splide__arrow::after {
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: 0;
      height: 0;
      border-width: 4.5px 8px 4.5px 0;
      border-style: solid;
      border-color: transparent var(--color-gray-5) transparent transparent;
      content: "";
      transform: rotate(0deg) translate(-50%, -50%);
    }

    .splide__arrow>svg {
      display: none;
    }

    .splide__arrow--next {
      right: 0;
      left: inherit;
    }

    .splide__arrow--next::after {
      border-width: 4.5px 0 4.5px 8px;
      border-color: transparent transparent transparent var(--color-gray-5);
    }

    .splide__pagination {
      bottom: 25px;
      padding: 0;
      gap: 5px;
    }

    .splide__pagination__page {
      width: 25px;
      height: 2px;
      border-radius: 0;
      margin: 0;
      background-color: var(--color-neutral-70);
      opacity: 1;
      transform: none;
      transition-property: all;
    }

    .splide__pagination__page.is-active {
      background-color: var(--color-text-brand);
    }
  }

  /* ---------------------------------------------
  .box-solutions
------------------------------------------------ */
  .box-solutions {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    gap: 10px;

    >.text {
      color: var(--color-text-subtle);
      font-size: 0.75rem;
      font-weight: 500;
    }

    >ul {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    >ul>li {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 15px;
      background-color: var(--color-fill-subtle);
      color: var(--color-text-subtle);
      font-size: 0.75rem;
    }
  }

  /* ---------------------------------------------
  .box-solutions-anchor
------------------------------------------------ */
  .box-solutions-anchor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

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

  /* ---------------------------------------------
  .box-company-philosophy
------------------------------------------------ */
  .box-company-philosophy {
    padding: 75px 0 80px;
    border-bottom: 1px solid var(--color-stroke-default);

    @media (max-width: 896px) {
      padding: 35px 0 39px;
    }

    >.heading {
      margin-top: 0;
      margin-bottom: 17px;
      color: var(--color-text-brand);
      font-family: var(--second-family);
      font-size: 1.75rem;
      font-weight: 700;
      text-align: center;

      @media (max-width: 896px) {
        text-align: left;
      }
    }

    >.box {
      &+& {
        margin-top: 50px;
      }
    }

    >.box>.title {
      color: var(--color-text-default);
      font-size: 1.875rem;
      font-weight: 700;
      line-height: 1.6;
      text-align: center;

      @media (max-width: 896px) {
        font-size: 1.625rem;
        line-height: 1.77;
        text-align: left;
      }
    }

    >.box>.title-en {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--color-text-default);
      font-weight: 700;
      gap: 14px;
      line-height: 1;
      text-align: center;

      @media (max-width: 896px) {
        align-items: flex-start;
        justify-content: flex-start;
      }

      +.text {
        @media (min-width: 897px) {
          margin-top: 32px;
        }
      }
    }

    >.box>.title-en>.english {
      font-family: var(--second-family);
      font-size: 2.75rem;

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

    >.box>.title-en>.japan {
      font-size: 1.25rem;

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

    >.box>.text {
      margin-top: 22px;
      color: var(--color-text-default);
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.87;
      text-align: center;

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

  /* ---------------------------------------------
  .box-grid-2
------------------------------------------------ */
  .box-grid-2 {
    --mt-pc: 50px;
    --mt-sp: 50px;

    display: grid;
    margin-top: var(--mt-pc);
    gap: 30px;
    grid-template-columns: repeat(2, 1fr);

    @media (max-width: 896px) {
      margin-top: var(--mt-sp);
      grid-template-columns: repeat(1, 1fr);
    }

    &:first-child {
      margin-top: 0;
    }

    +.box-grid-3 {
      margin-top: 30px;
    }
  }

  /* ---------------------------------------------
  .box-grid-3
------------------------------------------------ */
  .box-grid-3 {
    --mt-pc: 50px;
    --mt-sp: 50px;

    display: grid;
    margin-top: var(--mt-pc);
    gap: 30px;
    grid-template-columns: repeat(3, 1fr);

    @media (max-width: 896px) {
      margin-top: var(--mt-sp);
      grid-template-columns: repeat(1, 1fr);
    }

    &:first-child {
      margin-top: 0;
    }

    &[data-grid-variant="large"] {
      row-gap: 50px;

      @media (max-width: 896px) {
        row-gap: 40px;
      }
    }
  }

  /* ---------------------------------------------
  .box-grid-4
------------------------------------------------ */
  .box-grid-4 {
    --mt-pc: 30px;
    --mt-sp: 30px;

    display: grid;
    margin-top: var(--mt-pc);
    gap: 30px;
    grid-template-columns: repeat(4, 1fr);

    @media (max-width: 896px) {
      margin-top: var(--mt-sp);
      grid-template-columns: repeat(1, 1fr);
    }

    &:first-child {
      margin-top: 0;
    }
  }

  /* ---------------------------------------------
  .box-content-label
------------------------------------------------ */
  .box-content-label {
    &+& {
      margin-block-start: 40px;

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

    >.label {
      display: inline-flex;
      align-items: center;
      border-radius: 10px 10px 0 0;
      background-color: var(--color-red-30);
      color: var(--color-gray-100);
      font-size: 1.75rem;
      font-weight: 700;
      gap: 5px;
      line-height: 1.5;
      padding-inline: 10px 30px;
      vertical-align: top;

      @media (max-width: 896px) {
        display: flex;
        padding: 5px 10px;
        font-size: 1.25rem;
        line-height: 2.1;
      }

      &[data-label-variant="text"] {
        align-items: baseline;
        padding: 16px 30px;
        font-size: 1.125rem;
        font-weight: 400;
        gap: 23px;
        line-height: 2.33333;

        @media (max-width: 896px) {
          flex-direction: column;
          align-items: center;
          padding: 14px 10px;
          font-size: 0.8125rem;
          gap: 4px;
          line-height: 1.84615;
          text-align: center;
        }

        >span {
          font-size: 1.875rem;
          font-weight: 700;
          line-height: 1.4;

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

    >.label>.icon {
      display: block;
      width: 72px;
      height: auto;

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

    >.label+.container {
      border-top-left-radius: 0;
    }

    >.container {
      width: 100%;
      padding: 100px 20px;
      border-radius: 5px;
      background: var(--color-red-95);

      @media (max-width: 896px) {
        padding-block: 40px;
      }
    }

    >.container>.inner {
      width: 100%;
      max-width: var(--max-width-lg);
      margin-inline: auto;
    }

    &[data-bg-image-variant="logo"]>.container {
      background-image: url("/assets/images/common/bg-logo-white-01-pc.png");
      background-position: top right;
      background-repeat: no-repeat;
      background-size: 63.33333% auto;

      @media (max-width: 896px) {
        background-image: url("/assets/images/common/bg-logo-white-01-sp.png");
        background-size: 100% auto;
      }
    }
  }

  .box-content-label-inner {
    margin-top: 30px;

    &+& {
      margin-top: 20px;
    }

    >.label {
      display: flex;
      min-height: 50px;
      align-items: center;
      justify-content: center;
      padding: 10px 30px;
      background-color: var(--color-red-30);
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      color: var(--color-gray-100);
      font-size: 1.25rem;
      font-weight: 700;
      gap: 10px;
      line-height: 1.4;

      @media (max-width: 896px) {
        min-height: 40px;
        padding: 5px 20px;
        font-size: 1.125rem;
        line-height: 1.55556;
      }
    }

    >.label>.icon {
      display: block;
      width: 24px;
      height: auto;

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

    >.container {
      padding: 30px;
      background-color: var(--color-gray-100);
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;

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

    >.container>.list-dots {
      gap: 4px;

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

    >.container>.list-dots>li {
      @media (min-width: 897px) {
        font-size: 1.125rem;
      }
    }

    >.container>.list-dots>li::before {
      @media (min-width: 897px) {
        top: calc(17.1px + var(--dot-size)/3);
      }
    }
  }

  .box-recruit-job-slider {
    >.button-primary {
      margin: 30px auto 0;
    }

    >.splide {
      @media (max-width: 896px) {
        padding-bottom: 90px;
      }

      .splide__arrow {
        top: inherit;
        right: 61px;
        bottom: 0;
        left: inherit;
        width: 60px;
        height: 60px;
        border-radius: 5px 0 0 5px;
        background-color: var(--color-fill-default);
        opacity: 1;
        transform: none;

        @media (max-width: 896px) {
          right: inherit;
          left: 0;
          border: 1px solid var(--color-stroke-dark);
          border-radius: 5px;
          background-color: var(--color-fill-default);
        }
      }

      .splide__arrow::after {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 0;
        height: 0;
        border-width: 4.5px 8px 4.5px 0;
        border-style: solid;
        border-color: transparent var(--color-fill-brand) transparent transparent;
        content: "";
        transform: rotate(0deg) translate(-50%, -50%);

        @media (max-width: 896px) {
          border-color: transparent var(--color-gray-5) transparent transparent;
        }
      }

      .splide__arrow>svg {
        display: none;
      }

      .splide__arrow--next {
        right: 0;
        left: inherit;
        border-radius: 0 5px 5px 0;

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

      .splide__arrow--next::after {
        border-width: 4.5px 0 4.5px 8px;
        border-color: transparent transparent transparent var(--color-fill-brand);

        @media (max-width: 896px) {
          border-color: transparent transparent transparent var(--color-gray-5);
        }
      }

      .splide__pagination {
        bottom: 24px;
        justify-content: flex-start;
        padding: 0;
        margin-left: calc(min(calc(570 / 1210 * 100vw), 570px) + 30px);
        gap: 5px;

        @media (max-width: 896px) {
          bottom: 25px;
          justify-content: center;
          margin-left: 0;
          padding-inline: 70px;
        }
      }

      .splide__pagination__page {
        width: 40px;
        height: 2px;
        border-radius: 0;
        margin: 0;
        background-color: var(--color-neutral-70);
        opacity: 1;
        transform: none;
        transition-property: all;

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

      .splide__pagination__page.is-active {
        background-color: var(--color-text-brand);
      }

      &:not(.is-initialized.is-active) {
        @media (min-width: 897px) {
          display: block;
          visibility: visible;
        }

        >.splide__track>.splide__list {
          @media (min-width: 897px) {
            display: grid;
            gap: 30px;
            grid-template-columns: repeat(3, 1fr);
          }
        }
      }
    }
  }

  /* ---------------------------------------------
  .box-job-chart
------------------------------------------------ */
  .box-job-chart {
    max-width: 775px;
    margin-inline: auto;

    >img {
      display: block;
      width: 100%;
      height: auto;
    }

    &[data-job-variant="engineer"] {
      @media (min-width: 897px) {
        max-width: 830px;
      }
    }

    &[data-job-variant="accountant"] {
      @media (min-width: 897px) {
        max-width: 550px;
      }
    }

    &[data-job-variant="corporate"] {
      @media (min-width: 897px) {
        max-width: 691px;
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .breadcrumb
------------------------------------------------ */
  .breadcrumb {
    width: 100%;
    padding-block: 15px 80px;

    @media (max-width: 896px) {
      overflow: auto;
      margin-block-end: 20px;
      padding-block: 20px;
    }

    >ul {
      display: flex;
      width: 100%;
      max-width: var(--max-width-xl);
      justify-content: flex-end;
      padding-left: 0;
      gap: 24px;
      list-style: none;
      margin-inline: auto;
      padding-inline: 20px;

      @media (max-width: 896px) {
        width: -moz-max-content;
        width: max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        justify-content: flex-start;
        gap: 2px 24px;
        margin-inline: 0;
      }
    }

    >ul>li {
      position: relative;
      color: var(--color-text-default);
      font-size: 0.8125rem;
      white-space: nowrap;
    }

    >ul>li:has(a)::after {
      position: absolute;
      top: 50%;
      right: -15px;
      display: block;
      width: 5px;
      height: 9px;
      background: url("/assets/images/common/icon-arrow-gray-01.svg") no-repeat center;
      content: "";
      transform: translateY(-50%);
    }

    >ul>li:last-child {
      /* overflow: hidden; */
      /* max-width: 285px; */
      /* text-overflow: ellipsis; */
      /* white-space: nowrap; */
      /* @media (--sm) {
      max-width: 210px;
    } */
    }

    >ul>li>a {
      padding-bottom: 3px;
      background-image: linear-gradient(90deg, var(--color-text-subtle), var(--color-text-subtle));
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 0 1px;
      color: var(--color-text-subtle);
      text-decoration: none;
      transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
    }

    >ul>li>a:hover {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: 100% 1px;
      }
    }

    &[data-breadcrumb-variant="bottom"] {
      margin-block-end: 0;
      padding-block: 135px 15px;

      @media (max-width: 896px) {
        padding-block: 90px 10px;
      }
    }

    &[data-breadcrumb-variant="max-width-lg"] {
      >ul {
        max-width: calc(var(--max-width-lg) + 40px);
      }
    }

    &[data-breadcrumb-background="subtle"] {
      background-color: var(--color-fill-subtle);
    }
  }

  .breadcrumb[data-breadcrumb-variant="max-width-lg"]~.breadcrumb[data-breadcrumb-variant="bottom"]>ul {
    max-width: calc(var(--max-width-lg) + 40px);
  }
}

@layer components {

  /* ---------------------------------------------
  .button-box
------------------------------------------------ */
  .button-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    gap: 30px;

    @media (max-width: 896px) {
      flex-direction: column;
      align-items: center;
      margin-top: 30px;
    }

    &[data-direction="column"] {
      flex-direction: column;
    }
  }

  /* ---------------------------------------------
  .button-more
------------------------------------------------ */
  .button-more {
    margin-top: 47px;
    text-align: center;
    text-decoration: none;

    @media (max-width: 896px) {
      margin-top: 27px;
    }

    >span {
      position: relative;
      display: inline-block;
      padding: 0 13px 2px 0;
      background-image: linear-gradient(90deg, var(--color-fill-brand), var(--color-fill-brand));
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 0 1px;
      color: var(--color-text-brand);
      cursor: pointer;
      font-size: 0.875rem;
      text-align: center;
      transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
    }

    >span::after {
      position: absolute;
      top: 50%;
      right: 0;
      display: block;
      width: 0;
      height: 0;
      border-width: 7px 4.5px 0;
      border-style: solid;
      border-color: var(--color-fill-brand) transparent transparent transparent;
      content: "";
      transform: translateY(-50%);
    }

    >span:hover {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: 100% 1px;
      }
    }
  }

  /* ---------------------------------------------
  .button-primary
------------------------------------------------ */
  .button-primary {
    --width-pc: 240px;
    --width-sp: 240px;

    position: relative;
    display: flex;
    width: var(--width-pc);
    min-height: 60px;
    align-items: center;
    padding: 10px 60px 10px 20px;
    border-radius: 5px;
    background-color: var(--color-fill-brand);
    text-align: left;
    text-decoration: none;
    transition: all 300ms ease-out;

    @media (max-width: 896px) {
      width: var(--width-sp);
    }

    >span {
      color: var(--color-text-light);
      font-size: 0.9375rem;
      font-weight: 500;
    }

    >span::before {
      position: absolute;
      top: 0;
      right: 60px;
      display: block;
      width: 1px;
      height: 100%;
      background-color: var(--color-stroke-brandsubtle);
      content: "";
    }

    >span::after {
      position: absolute;
      top: 50%;
      right: 25px;
      display: block;
      width: 0;
      height: 0;
      border-width: 4px 0 4px 7px;
      border-style: solid;
      border-color: transparent transparent transparent var(--color-fill-default);
      content: "";
      transform: translateY(-50%);
    }

    &:hover {
      @media (min-width: 897px) {
        background-color: var(--color-primary-50);
      }
    }

    &:hover>span::before {
      @media (min-width: 897px) {
        background-color: var(--color-primary-60);
      }
    }

    &[data-button-color="white"] {
      background-color: var(--color-fill-default);

      >span {
        color: var(--color-text-brand);
      }

      >span::before {
        background-color: var(--color-stroke-subtle);
      }

      >span::after {
        border-color: transparent transparent transparent var(--color-fill-brand);
      }

      &:hover {
        @media (min-width: 897px) {
          background-color: var(--color-neutral-80);
        }
      }

      &:hover>span::before {
        @media (min-width: 897px) {
          background-color: var(--color-stroke-subtle);
        }
      }
    }

    &[data-button-color="black"] {
      background-color: var(--color-fill-dark);

      >span::before {
        background-color: var(--color-stroke-dark);
      }

      &:hover {
        @media (min-width: 897px) {
          background-color: var(--color-neutral-20);
        }
      }

      &:hover>span::before {
        @media (min-width: 897px) {
          background-color: var(--color-stroke-dark);
        }
      }
    }

    &[data-button-color="gray"] {
      background-color: var(--color-fill-subtler);

      >span {
        color: var(--color-text-default);
      }

      >span::before {
        background-color: var(--color-stroke-light);
      }

      >span::after {
        border-color: transparent transparent transparent var(--color-text-default);
      }

      &:hover {
        @media (min-width: 897px) {
          background-color: var(--color-neutral-90);
        }
      }

      &:hover>span::before {
        @media (min-width: 897px) {
          background-color: var(--color-stroke-light);
        }
      }
    }
  }

  .button-close-modal {
    display: inline-block;
    padding: 8px 30px 12px;
    border-radius: 5px;
    background-color: var(--color-fill-dark);
    text-decoration: none;
    transition: all 300ms ease-out;

    >span {
      position: relative;
      padding-right: 16px;
      color: var(--color-text-light);
      font-size: 0.875rem;
    }

    >span::after {
      position: absolute;
      top: 50%;
      right: 0;
      display: block;
      width: 11px;
      height: 11px;
      background: url("/assets/images/common/icon-x-white-01.svg") no-repeat center;
      background-size: contain;
      content: "";
      transform: translateY(-50%);
    }

    &:hover {
      @media (min-width: 897px) {
        background-color: var(--color-neutral-20);
      }
    }
  }

  .button-anchor {
    --width-pc: 285px;
    --width-sp: 100%;

    position: relative;
    display: flex;
    width: var(--width-pc);
    min-height: 60px;
    align-items: center;
    padding: 20px 32px 20px 20px;
    border-radius: 5px;
    background-color: var(--color-fill-brand);
    gap: 15px;
    text-align: left;
    text-decoration: none;
    transition: all 300ms ease-out;

    @media (max-width: 896px) {
      width: var(--width-sp);
      padding: 15px 32px 15px 20px;
    }

    >i {
      display: block;
      width: 45px;
      height: 45px;
      flex: 0 0 45px;
      background-color: var(--color-fill-default);
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
      transition: all 300ms ease-out;
    }

    >span {
      color: var(--color-text-light);
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.5;

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

    >span::after {
      position: absolute;
      top: 50%;
      right: 20px;
      display: block;
      width: 0;
      height: 0;
      border-width: 7px 4px 0;
      border-style: solid;
      border-color: var(--color-fill-default) transparent transparent transparent;
      content: "";
      transform: translateY(-50%);
    }

    &:hover {
      @media (min-width: 897px) {
        background-color: var(--color-primary-50);
      }
    }

    &:hover>span::before {
      @media (min-width: 897px) {
        background-color: var(--color-primary-60);
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .card-use-case
------------------------------------------------ */
  .card-use-case {
    position: relative;
    display: block;
    overflow: hidden;
    padding-bottom: 50px;
    border-radius: 5px;
    background-color: var(--color-fill-default);
    text-decoration: none;

    >.info {
      display: flex;
      flex-direction: column;
      padding: 20px 40px 30px;

      @media (max-width: 896px) {
        padding-inline: 20px;
      }
    }

    >.button {
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      width: 100%;
      padding: 13px 20px;
      background-color: var(--color-fill-brand);
      text-align: center;
    }

    >.button>span {
      position: relative;
      padding-right: 14px;
      color: var(--color-text-light);
      font-size: 1rem;
      font-weight: 500;
    }

    >.button>span::after {
      position: absolute;
      top: 50%;
      right: 0;
      display: block;
      width: 0;
      height: 0;
      border-width: 4px 0 4px 7px;
      border-style: solid;
      border-color: transparent transparent transparent var(--color-text-light);
      content: "";
      transform: translateY(-50%);
    }

    &:is(a)>.button {
      display: block;
    }

    &:is(a):hover>.image-card>figure>img {
      @media (min-width: 897px) {
        transform: scale(1.1);
      }
    }

    &[data-border-variant="true"] {
      border: 1px solid var(--color-stroke-default);
    }
  }

  /* ---------------------------------------------
  .card-blog
------------------------------------------------ */
  .card-blog {
    display: block;
    text-decoration: none;

    >.box {
      padding-top: 21px;

      @media (max-width: 896px) {
        padding-top: 20px;
      }
    }

    >.box>.info {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      gap: 40px;
    }

    >.box>.info>.date {
      color: var(--color-text-subtle);
      font-family: var(--second-family);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.7;
    }

    >.box>.info>.tag {
      position: relative;
      color: var(--color-text-subtle);
      font-size: 0.875rem;
      line-height: 1.7;
    }

    >.box>.info>.tag::before {
      position: absolute;
      top: 50%;
      left: -21px;
      display: block;
      width: 1px;
      height: 15px;
      background-color: var(--color-text-subtle);
      content: "";
      transform: translateY(-50%);
    }

    >.box>.title {
      color: var(--color-text-default);
      font-size: 1.25rem;
      font-weight: 500;
      letter-spacing: -0.0375rem;

      @media (max-width: 896px) {
        display: -webkit-box;
        overflow: hidden;
        min-height: 60px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 1.5;
      }
    }

    >.box>.text {
      margin-top: 10px;
      color: var(--color-text-subtle);
      font-size: 1rem;
      line-height: 1.75;
    }

    >.box>.button {
      margin-top: 40px;

      @media (max-width: 896px) {
        margin-top: 31px;
      }
    }

    >.box>.info>.profile {
      color: var(--color-text-subtle);
      font-size: 0.875rem;
      line-height: 1.71429;
    }

    >.box>.text-small {
      margin-top: 6px;
      color: var(--color-text-subtle);
      line-height: 1.858;
    }

    &:is(a):hover>.image-card>figure>img {
      @media (min-width: 897px) {
        transform: scale(1.1);
      }
    }

    &[data-card-variant="first-full"] {
      @media (min-width: 897px) {
        display: grid;
        gap: 30px;
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
      }

      >.image-card>figure {
        @media (min-width: 897px) {
          height: 340px;
        }
      }

      >.box {
        padding-top: 16px;

        @media (min-width: 897px) {
          padding-top: 0;
        }
      }

      >.box>.info {
        @media (min-width: 897px) {
          margin-bottom: 15px;
        }
      }

      .box>.title {
        @media (min-width: 897px) {
          font-size: 1.875rem;
        }
      }

      .box>.text {
        display: none;

        @media (min-width: 897px) {
          display: -webkit-box;
          overflow: hidden;
          margin-top: 13px;
          -webkit-box-orient: vertical;
          color: var(--color-text-default);
          font-size: 0.875rem;
          font-weight: 400;
          -webkit-line-clamp: 3;
          line-height: 1.86;
        }
      }
    }

    &[data-reverse-variant] {
      >.box {
        order: 1;
      }

      >.image-card {
        order: 2;
      }
    }

    &[data-card-variant="recruit"] {
      >.box {
        padding-top: 20px;
      }

      >.box>.info {
        margin-bottom: 6px;
      }

      >.box>.info>.tag {
        line-height: 1.71429;
      }
    }
  }

  /* ---------------------------------------------
  .card-info
------------------------------------------------ */
  .card-info {
    display: flex;
    height: 100%;
    padding: 25px 25px 28px;
    border-radius: 5px;
    background-color: var(--color-fill-subtle);
    gap: 20px;
    text-decoration: none;

    >.icon {
      width: 50px;
      flex: 1 0 auto;
    }

    >.icon>img {
      display: block;
      width: 100%;
      height: auto;
    }

    >.box {
      width: 100%;
    }

    >.box>.title {
      margin-bottom: 5px;
      font-size: 1.25rem;
      font-weight: 500;
    }

    >.box>.text {
      color: var(--color-text-subtle);
      font-size: 0.875rem;
    }
  }

  /* ---------------------------------------------
  .card-solution-scene
------------------------------------------------ */
  .card-solution-scene {
    text-decoration: none;

    a {
      text-decoration: none;
    }

    >.image {
      position: relative;
    }

    >.image>figure {
      overflow: hidden;
      width: 100%;
      height: 160px;
      border-radius: 5px;
      margin: 0;

      @media (max-width: 896px) {
        height: auto;
        aspect-ratio: 335 / 198;
      }
    }

    >.image>figure>img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }

    >.title {
      font-size: 1.25rem;
      font-weight: 500;
      padding-block: 10px;
    }

    &[data-size-variant="compact"] {
      >.image>figure {
        height: auto;
        aspect-ratio: 370 / 220;

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

      >.title {
        font-size: 1.125rem;
        line-height: 1.66667;
        padding-block: 15px 20px;
      }
    }
  }

  /* ---------------------------------------------
  .card-solution-product
------------------------------------------------ */
  .card-solution-product {
    text-decoration: none;

    >.image {
      position: relative;
      padding: 20px;
      border: 1px solid var(--color-stroke-default);
      border-radius: 5px;
      background-color: var(--color-gray-100);

      @media (max-width: 896px) {
        padding: 18px 0;
      }
    }

    >.image>figure {
      overflow: hidden;
      width: 100%;
      height: 188px;
      border-radius: 5px;
      margin: 0;

      @media (max-width: 896px) {
        height: auto;
        aspect-ratio: 330 / 188;
      }
    }

    >.image>figure>img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      transition: all 300ms ease-out;
    }

    >.box {
      padding-block: 19px 10px;

      @media (max-width: 896px) {
        padding-top: 20px;
      }
    }

    >.box>.heading>.subject {
      color: var(--color-text-subtle);
      font-size: 0.875rem;
      font-weight: 700;
      word-break: break-all;
    }

    >.box>.heading>.model {
      margin-top: 5px;
      color: var(--color-text-default);
      font-size: 1.25rem;
      font-weight: 500;
      word-break: break-all;
    }

    >.box>.heading>.type {
      color: var(--color-text-default);
      font-size: 0.875rem;
      word-break: break-all;
    }

    >.box>.detail {
      margin-top: 10px;
    }

    >.box>.detail>.text {
      color: var(--color-text-subtle);
      font-size: 1rem;
      line-height: 1.75;
    }

    /* &:hover > .image > figure > img {
    @media (--md) {
      transform: scale(1.1);
    }
  } */

    &[data-type-variant="compact"] {
      >.image {
        padding: 14px;

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

      >.image>figure {
        height: auto;
        aspect-ratio: 240 / 138;

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

      >.box {
        padding: 20px 0 10px;
      }

      >.box>.heading>.model {
        display: flex;
        flex-direction: column;
      }

      >.box>.heading>.model>.line {
        display: flex;
        align-items: baseline;
      }

      >.box>.heading>.model>.line>.title {
        line-height: 1.3;
      }

      >.box>.heading>.model>.line>.note {
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.85714;
      }

      >.box>.detail>.text {
        font-size: 0.8125rem;
        line-height: 1.53846;
      }
    }
  }

  /* ---------------------------------------------
  .card-job
------------------------------------------------ */
  .card-job {
    display: block;

    >figure {
      position: relative;
      overflow: hidden;
      border-radius: 5px;
      aspect-ratio: 370 / 220;
    }

    >figure>img {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      -o-object-fit: cover;
      object-fit: cover;
      transition: transform 300ms ease-out;
    }

    >.detail {
      padding-block: 20px;
    }

    >.detail>.title {
      font-size: 1.375rem;
      font-weight: 500;
      line-height: 1.5;

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

    >.detail>.info {
      color: var(--color-gray-40);
      font-size: 1rem;
      line-height: 1.75;
      margin-block-start: 6px;

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

    &:is(a):hover>figure>img {
      @media (min-width: 897px) {
        transform: scale(1.1);
      }
    }
  }

  /* ---------------------------------------------
  .card-solution-security
------------------------------------------------ */
  .card-solution-security {
    display: flex;
    padding: 25px 40px 25px 20px;
    border-radius: 5px;
    background-color: var(--color-fill-subtle);
    gap: 30px;

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

    >.image {
      overflow: hidden;
      flex-shrink: 0;
      border-radius: 5px;
    }

    >.image>figure {
      margin: 0;
    }

    >.image>figure>img {
      display: block;
      width: 100%;
      max-width: 370px;
      height: auto;
      aspect-ratio: 370 / 220;
      -o-object-fit: cover;
      object-fit: cover;
      transition: transform 300ms ease-out;

      @media (max-width: 896px) {
        max-width: 100%;
        aspect-ratio: 295 / 176;
      }
    }

    >.content {
      display: flex;
      flex-direction: column;
      margin: 10px 20px 10px 0;

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

    >.content>.title {
      color: var(--color-text-default);
      font-size: 1.75rem;
      font-weight: 700;

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

    >.content>.text {
      margin-top: 10px;
      color: var(--color-text-default);
      font-size: 1rem;
      line-height: 1.75;
    }

    >.content>.transaction {
      display: grid;
      margin-top: 20px;
      gap: 10px;
      grid-template-columns: max-content 1fr;
    }

    >.content>.transaction>.label {
      display: flex;
      align-self: flex-start;
      margin-top: 6px;
      color: var(--color-text-default);
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1;
    }

    >.content>.transaction>.history {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px;
    }

    >.content>.transaction>.history>li {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 15px;
      background-color: var(--color-fill-default);
      color: var(--color-text-subtle);
      font-size: 0.8125rem;

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

  /* ---------------------------------------------
  .card-key-strengths
------------------------------------------------ */
  .card-key-strengths {
    display: grid;
    padding: 30px;
    border-radius: 5px;
    background-color: var(--color-fill-subtle);
    gap: 5px 20px;
    grid-template: "icon title" max-content "icon text" 1fr / 72px 1fr;

    @media (max-width: 896px) {
      gap: 15px;
      grid-template-areas:
        "icon title"
        "text text";
      grid-template-columns: 60px 1fr;
    }

    >.icon {
      display: flex;
      overflow: hidden;
      width: 72px;
      height: 72px;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      background: var(--color-fill-brand);
      grid-area: icon;

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

    >.title {
      color: var(--color-text-default);
      font-size: 1.375rem;
      font-weight: 700;
      grid-area: title;
      line-height: 1.5;

      @media (max-width: 896px) {
        font-size: 1.25rem;
        line-height: 1.45;
        padding-block: 1px;
      }
    }

    >.text {
      color: var(--color-text-default);
      font-size: 1rem;
      grid-area: text;
      line-height: 1.75;
    }
  }

  /* ---------------------------------------------
  .card-introduction-use-case
------------------------------------------------ */
  .card-introduction-use-case {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    border-radius: 5px;

    >.heading {
      padding: 20px 25px;
      background-color: var(--color-fill-brand);
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
    }

    >.heading>.title {
      color: var(--color-text-light);
      font-family: var(--font-family);
      font-size: 1.625rem;
      font-weight: 700;
      line-height: 1.38462;
    }

    >.body {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      padding: 20px 30px 63px;
      background-color: var(--color-fill-default);
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
    }

    >.body>.description {
      position: relative;
      border-bottom: 1px solid var(--color-stroke-default);
      color: var(--color-text-default);
      font-family: var(--font-family);
      font-size: 0.875rem;
      line-height: 1.71429;
      padding-block-end: 19px;
    }

    >.body>.feature {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-block-start: 20px;
    }

    >.body>.feature>.item {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    >.body>.feature>.item>.label {
      color: var(--color-text-subtle);
      font-size: 0.75rem;
      font-weight: 700;
      line-height: 1.5;
    }

    >.body>.feature>.item>.list-solutions {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    >.body>.feature>.item>.list-locations {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    >.body>.feature>.item>.list-products {
      display: flex;
      flex-direction: column;
      gap: 0;

      >li {
        padding-left: 18px;
        font-size: 0.75rem;
        line-height: 1.96;
      }

      >li::before {
        top: calc(11.76px + var(--dot-size)/2);
        left: 7px;
      }
    }

    >.body>.button {
      position: absolute;
      right: 30px;
      bottom: 30px;
      display: flex;
      justify-content: flex-end;
    }

    >.body>.button>.link-red>span {
      font-size: 0.75rem;
      line-height: 1.5;
    }
  }
}

@layer components {

  .form-contact,
  .wpcf7-form,
  .cf7ac-confirmation-wrapper {
    margin-top: 50px;

    @media (max-width: 896px) {
      margin-top: 34px;
    }

    >.inner {
      display: flex;
      flex-direction: column;
      gap: 30px;

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

    >.inner>.group {
      display: flex;
      align-items: flex-start;
      gap: 30px;

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

    >.inner>.group>.label {
      display: flex;
      flex: 0 0 195px;
      align-items: center;
      padding-top: 17px;
      color: var(--color-text-default);
      font-size: 1rem;
      font-weight: 700;
      gap: 10px;

      @media (max-width: 896px) {
        flex: none;
        padding-top: 0;
      }
    }

    >.inner>.group>.label[data-label-variant="pt0"] {
      padding-top: 0;
    }

    >.inner>.group>.label>.required {
      flex: 1 0 auto;
      color: var(--color-text-danger);
      font-size: 0.75rem;
      font-weight: 700;
    }

    >.inner>.group>.box {
      width: 100%;
      overflow-wrap: break-word;
    }

    &[data-form-variant="confirm"] {
      >.inner {
        gap: 36px;

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

      >.inner>.group {
        @media (max-width: 896px) {
          gap: 16px;
        }
      }
    }

    .wpcf7-spinner {
      position: absolute !important;
    }
  }

  .radio-group,
  .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;

    @media (max-width: 896px) {
      gap: 10px 16px;
    }
  }

  .radio-group-stack {
    display: block;

    .wpcf7-form-control-wrap {
      width: 100%;
    }

    .wpcf7-radio {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
    }

    .radio-form {
      width: 100%;
    }

    .wpcf7-list-item {
      width: 100%;
      margin: 0;
    }

    .wpcf7-list-item>label {
      position: relative;
      display: inline-flex;
      min-height: 30px;
      align-items: center;
      padding: 0 0 0 38px;
      cursor: pointer;
      line-height: 1.875rem;
    }

    .wpcf7-list-item-label {
      position: relative;
      display: inline-block;
    }

    .radio-form>.input:checked+.text,
    .radio-form>.input:not(:checked)+.text,
    .wpcf7-list-item>label>input:checked+.wpcf7-list-item-label,
    .wpcf7-list-item>label>input:not(:checked)+.wpcf7-list-item-label {
      display: inline-flex;
      min-height: 30px;
      align-items: center;
      line-height: 1.875rem;
    }
  }

  .radio-form {
    position: relative;

    >.input {

      &:checked,
      &:not(:checked) {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }

      &:checked+.text,
      &:not(:checked)+.text {
        position: relative;
        display: inline-block;
        padding: 2px 0 2px 38px;
        cursor: pointer;
      }

      &:checked+.text::before,
      &:not(:checked)+.text::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 28px;
        height: 28px;
        border: none;
        border-radius: 100%;
        background: var(--color-gray-75);
        content: "";
      }

      &:checked+.text::after,
      &:not(:checked)+.text::after {
        position: absolute;
        top: 7px;
        left: 7px;
        width: 14px;
        height: 14px;
        border-radius: 100%;
        background-color: var(--color-fill-brand);
        content: "";
        opacity: 1;
        transition: all 0.3s ease-out;
      }

      &:checked+.text::after {
        transform: scale(1);
      }

      &:not(:checked)+.text::after {
        transform: scale(0);
      }
    }
  }

  .wpcf7-list-item {
    position: relative;
    margin-left: 0 !important;

    >label>input {

      &:checked,
      &:not(:checked) {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }

      &:checked+.wpcf7-list-item-label,
      &:not(:checked)+.wpcf7-list-item-label {
        position: relative;
        display: inline-block;
        cursor: pointer;
      }

      &:checked+.wpcf7-list-item-label::before,
      &:not(:checked)+.wpcf7-list-item-label::before {
        position: absolute;
        top: 0;
        left: -38px;
        width: 28px;
        height: 28px;
        border: none;
        border-radius: 100%;
        background: var(--color-gray-75);
        content: "";
      }

      &:checked+.wpcf7-list-item-label::after,
      &:not(:checked)+.wpcf7-list-item-label::after {
        position: absolute;
        top: 7px;
        left: -31px;
        width: 14px;
        height: 14px;
        border-radius: 100%;
        background-color: var(--color-fill-brand);
        content: "";
        opacity: 1;
        transition: all 0.3s ease-out;
      }

      &:checked+.wpcf7-list-item-label::after {
        transform: scale(1);
      }

      &:not(:checked)+.wpcf7-list-item-label::after {
        transform: scale(0);
      }
    }
  }

  .input-form,
  input.wpcf7-number {
    width: 100%;
    padding: 15px 14px;
    border: 2px solid var(--color-gray-75);
    border-radius: 5px;

    &::-moz-placeholder {
      color: var(--color-gray-60);
    }

    &::placeholder {
      color: var(--color-gray-60);
    }
  }

  input:is(.input-form, .wpcf7-number)[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
  }

  input:is(.input-form, .wpcf7-number)[type="number"]::-webkit-outer-spin-button,
  input:is(.input-form, .wpcf7-number)[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  select.input-form {
    padding-right: 44px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--color-fill-default);
    background-image: url("/assets/images/common/icon-select-arrow.svg");
    background-position: right 13px center;
    background-repeat: no-repeat;
    background-size: 10px 6px;
    color: var(--color-text-default);
  }

  select.input-form:has(option:checked[value=""]) {
    color: var(--color-gray-60);
  }

  select.input-form option {
    color: var(--color-text-default);
  }

  select.input-form option[value=""] {
    color: var(--color-gray-60);
  }

  .select-form {
    display: block;
  }

  .split-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .split-form-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
  }

  .split-form-item>.wpcf7-form-control-wrap {
    width: 78px;
    flex: 0 0 78px;
  }

  .split-form-unit {
    flex: 0 0 auto;
    color: var(--color-text-default);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.75;
  }

  .split-form-errors-stacked {
    display: grid;
    align-items: center;
    justify-content: flex-start;
    gap: 4px 10px;
  }

  .split-form-errors-stacked[data-columns="3"] {
    grid-template-areas: "field-1 unit-1 field-2 unit-2 field-3 unit-3";
    grid-template-columns: 78px max-content 78px max-content 78px max-content;
  }

  .split-form-errors-stacked[data-columns="3"]:has(.wpcf7-not-valid-tip) {
    grid-template-areas:
      "field-1 unit-1 field-2 unit-2 field-3 unit-3"
      "error-1 error-1 error-1 error-1 error-1 error-1"
      "error-2 error-2 error-2 error-2 error-2 error-2"
      "error-3 error-3 error-3 error-3 error-3 error-3";
  }

  .split-form-errors-stacked[data-columns="2"] {
    grid-template-areas: "field-1 unit-1 field-2 unit-2";
    grid-template-columns: 78px max-content 78px max-content;
  }

  .split-form-errors-stacked[data-columns="2"]:has(.wpcf7-not-valid-tip) {
    grid-template-areas:
      "field-1 unit-1 field-2 unit-2"
      "error-1 error-1 error-1 error-1"
      "error-2 error-2 error-2 error-2";
  }

  .split-form-errors-stacked[data-columns="1"] {
    grid-template-areas: "field-1 unit-1";
    grid-template-columns: 78px max-content;
  }

  .split-form-errors-stacked[data-columns="1"]:has(.wpcf7-not-valid-tip) {
    grid-template-areas:
      "field-1 unit-1"
      "error-1 error-1";
  }

  .split-form-errors-stacked>.split-form-item,
  .split-form-errors-stacked>.split-form-item>.wpcf7-form-control-wrap {
    display: contents;
  }

  .split-form-errors-stacked>.split-form-item>.wpcf7-form-control-wrap> :is(.input-form, .wpcf7-number) {
    width: 78px;
  }

  .split-form-errors-stacked>.split-form-item>.wpcf7-form-control-wrap>.wpcf7-not-valid-tip {
    margin-top: 0;
    white-space: nowrap;
  }

  .split-form-errors-stacked>.split-form-item:nth-child(1)>.wpcf7-form-control-wrap> :is(.input-form, .wpcf7-number) {
    grid-area: field-1;
  }

  .split-form-errors-stacked>.split-form-item:nth-child(1)>.split-form-unit {
    grid-area: unit-1;
  }

  .split-form-errors-stacked>.split-form-item:nth-child(1)>.wpcf7-form-control-wrap>.wpcf7-not-valid-tip {
    grid-area: error-1;
  }

  .split-form-errors-stacked>.split-form-item:nth-child(2)>.wpcf7-form-control-wrap> :is(.input-form, .wpcf7-number) {
    grid-area: field-2;
  }

  .split-form-errors-stacked>.split-form-item:nth-child(2)>.split-form-unit {
    grid-area: unit-2;
  }

  .split-form-errors-stacked>.split-form-item:nth-child(2)>.wpcf7-form-control-wrap>.wpcf7-not-valid-tip {
    grid-area: error-2;
  }

  .split-form-errors-stacked>.split-form-item:nth-child(3)>.wpcf7-form-control-wrap> :is(.input-form, .wpcf7-number) {
    grid-area: field-3;
  }

  .split-form-errors-stacked>.split-form-item:nth-child(3)>.split-form-unit {
    grid-area: unit-3;
  }

  .split-form-errors-stacked>.split-form-item:nth-child(3)>.wpcf7-form-control-wrap>.wpcf7-not-valid-tip {
    grid-area: error-3;
  }

  .split-form-errors-stacked>.split-form-item>.wpcf7-form-control-wrap:is([data-name="graduate-birth-year"],
    [data-name="graduate-expected-year"],
    [data-name="career-birth-year"],
    [data-name="career-experience-year"],
    [data-name="career-available-year"])>.wpcf7-not-valid-tip::before {
    content: "年を";
  }

  .split-form-errors-stacked>.split-form-item>.wpcf7-form-control-wrap:is([data-name="graduate-birth-month"],
    [data-name="graduate-expected-month"],
    [data-name="career-birth-month"],
    [data-name="career-available-month"])>.wpcf7-not-valid-tip::before {
    content: "月を";
  }

  .split-form-errors-stacked>.split-form-item>.wpcf7-form-control-wrap:is([data-name="graduate-birth-day"], [data-name="career-birth-day"])>.wpcf7-not-valid-tip::before {
    content: "日を";
  }

  .split-form-errors-stacked>.split-form-item>.wpcf7-form-control-wrap[data-name="career-company-count"]>.wpcf7-not-valid-tip::before {
    content: "経験社数を";
  }

  .split-form-errors-stacked>.split-form-item>.wpcf7-form-control-wrap[data-name="career-management-count"]>.wpcf7-not-valid-tip::before {
    content: "人を";
  }

  .wpcf7-form-control-wrap:is([data-name="graduate-name"], [data-name="career-name"])>.wpcf7-not-valid-tip::before {
    content: "氏名を";
  }

  .wpcf7-form-control-wrap:is([data-name="graduate-kana"], [data-name="career-kana"])>.wpcf7-not-valid-tip::before {
    content: "フリガナを";
  }

  .wpcf7-form-control-wrap:is([data-name="graduate-email"], [data-name="career-email"])>.wpcf7-not-valid-tip::before {
    content: "メールアドレスを";
  }

  .wpcf7-form-control-wrap:is([data-name="graduate-phone"], [data-name="career-phone"])>.wpcf7-not-valid-tip::before {
    content: "電話番号を";
  }

  .wpcf7-form-control-wrap:is([data-name="graduate-prefecture"], [data-name="career-prefecture"])>.wpcf7-not-valid-tip::before {
    content: "居住地を";
  }

  .wpcf7-form-control-wrap[data-name="graduate-school"]>.wpcf7-not-valid-tip::before {
    content: "学校名を";
  }

  .wpcf7-form-control-wrap[data-name="graduate-school-type"]>.wpcf7-not-valid-tip::before {
    content: "学校区分を";
  }

  .wpcf7-form-control-wrap[data-name="graduate-department"]>.wpcf7-not-valid-tip::before {
    content: "学部・学科を";
  }

  .wpcf7-form-control-wrap[data-name="graduate-job-type"]>.wpcf7-not-valid-tip::before {
    content: "志望職種を";
  }

  .wpcf7-form-control-wrap[data-name="graduate-source"]>.wpcf7-not-valid-tip::before {
    content: "当社を知ったきっかけを";
  }

  .wpcf7-form-control-wrap[data-name="career-job-history"]>.wpcf7-not-valid-tip::before {
    content: "経験職種を";
  }

  .wpcf7-form-control-wrap[data-name="career-management-experience"]>.wpcf7-not-valid-tip::before {
    content: "マネジメント経験を";
  }

  .wpcf7-form-control-wrap[data-name="career-job-type"]>.wpcf7-not-valid-tip::before {
    content: "応募職種を";
  }

  .check-form>.wpcf7-form-control-wrap:is([data-name="graduate-privacy"], [data-name="career-privacy"])>.wpcf7-not-valid-tip::before {
    content: "プライバシーポリシーに";
  }

  .radio-count-form {
    display: grid;
    align-items: center;
    justify-content: flex-start;
    gap: 4px 10px;
    grid-template-areas: "radio count unit";
    grid-template-columns: max-content 78px max-content;
  }

  .radio-count-form:has(.wpcf7-not-valid-tip) {
    grid-template-areas:
      "radio count unit"
      "error-radio error-radio error-radio"
      "error-count error-count error-count";
  }

  .radio-count-form>.radio-group,
  .radio-count-form>.radio-group>.wpcf7-form-control-wrap,
  .radio-count-form>.split-form.split-form-errors-stacked,
  .radio-count-form>.split-form.split-form-errors-stacked>.split-form-item,
  .radio-count-form>.split-form.split-form-errors-stacked>.split-form-item>.wpcf7-form-control-wrap {
    display: contents;
  }

  .radio-count-form>.radio-group .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    margin-right: 40px;
    gap: 15px 30px;
    grid-area: radio;

    @media (max-width: 896px) {
      margin-right: 5px;
      gap: 15px;
    }
  }

  .radio-count-form>.radio-group .wpcf7-list-item>label {
    position: relative;
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 0 0 38px;
    cursor: pointer;
    line-height: 1.875rem;
  }

  .radio-count-form>.radio-group .wpcf7-list-item-label {
    position: relative;
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    line-height: 1.875rem;
  }

  .radio-count-form>.split-form.split-form-errors-stacked,
  .radio-count-form>.split-form.split-form-errors-stacked:has(.wpcf7-not-valid-tip) {
    grid-template-areas: "field-1 unit-1";
  }

  .radio-count-form>.split-form.split-form-errors-stacked>.split-form-item>.wpcf7-form-control-wrap> :is(.input-form, .wpcf7-number) {
    width: 78px;
    grid-area: count;
  }

  .radio-count-form>.split-form.split-form-errors-stacked>.split-form-item>.split-form-unit {
    grid-area: unit;
  }

  .radio-count-form[data-management-count-disabled="true"]>.split-form.split-form-errors-stacked>.split-form-item>.wpcf7-form-control-wrap> :is(.input-form, .wpcf7-number):disabled {
    border-color: var(--color-gray-75);
    background-color: var(--color-gray-75);
    color: var(--color-gray-60);
    cursor: not-allowed;
  }

  .radio-count-form[data-management-count-disabled="true"]>.split-form.split-form-errors-stacked>.split-form-item>.split-form-unit {
    color: var(--color-gray-60);
  }

  .radio-count-form>.radio-group>.wpcf7-form-control-wrap>.wpcf7-not-valid-tip {
    margin-top: 0;
    grid-area: error-radio;
    white-space: nowrap;
  }

  .radio-count-form>.split-form.split-form-errors-stacked>.split-form-item>.wpcf7-form-control-wrap>.wpcf7-not-valid-tip {
    margin-top: 0;
    grid-area: error-count;
    white-space: nowrap;
  }

  .check-form {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--color-text-default);
    font-size: 1rem;
    line-height: 1.875rem;
    white-space: nowrap;

    >input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    >.text {
      position: relative;
      display: inline-flex;
      min-height: 30px;
      align-items: center;
      padding-left: 40px;
      color: var(--color-text-default);
      font-size: 1rem;
      line-height: 1.875rem;
      white-space: nowrap;
    }

    >.wpcf7-form-control-wrap {
      position: relative;
      display: inline-flex;
      width: 30px;
      height: 30px;
      flex: 0 0 auto;
      margin-right: 10px;
    }

    >.wpcf7-form-control-wrap .wpcf7-acceptance,
    >.wpcf7-form-control-wrap .wpcf7-list-item {
      display: block;
      width: 100%;
      height: 100%;
    }

    >.wpcf7-form-control-wrap .wpcf7-list-item {
      position: relative;
      margin: 0;
    }

    >.wpcf7-form-control-wrap .wpcf7-list-item::before {
      position: absolute;
      border-radius: 5px;
      background-color: #d9d9d9;
      content: "";
      inset: 0;
    }

    >.wpcf7-form-control-wrap .wpcf7-list-item::after {
      position: absolute;
      top: 9px;
      left: 11px;
      width: 6px;
      height: 11px;
      border-right: 2px solid var(--color-text-light);
      border-bottom: 2px solid var(--color-text-light);
      content: "";
      opacity: 0;
      transform: rotate(45deg);
    }

    >.wpcf7-form-control-wrap .wpcf7-list-item:has(input:checked)::before {
      background-color: var(--color-fill-brand);
    }

    >.wpcf7-form-control-wrap .wpcf7-list-item:has(input:checked)::after {
      opacity: 1;
    }

    >.wpcf7-form-control-wrap input {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
    }

    >.text::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 30px;
      height: 30px;
      border-radius: 5px;
      background-color: #d9d9d9;
      content: "";
    }

    >.text::after {
      position: absolute;
      top: 9px;
      left: 11px;
      width: 6px;
      height: 11px;
      border-right: 2px solid var(--color-text-light);
      border-bottom: 2px solid var(--color-text-light);
      content: "";
      opacity: 0;
      transform: rotate(45deg);
    }

    >input:checked+.text::before {
      background-color: var(--color-fill-brand);
    }

    >input:checked+.text::after {
      opacity: 1;
    }

    >.text>a {
      color: var(--color-text-brand);
      text-decoration: underline;
      text-decoration-color: var(--color-text-brand);

      &:hover {
        @media (min-width: 897px) {
          text-decoration: none;
        }
      }
    }

    >a,
    >a>span {
      color: var(--color-text-brand);
      text-decoration: underline;
      text-decoration-color: var(--color-text-brand);

      &:hover {
        @media (min-width: 897px) {
          text-decoration: none;
        }
      }
    }
  }

  .consent-form {
    margin-top: 100px;
    text-align: center;

    @media (max-width: 896px) {
      margin-top: 80px;
    }
  }

  .textarea-form {
    width: 100%;
    height: 242px;
    padding: 15px 14px;
    border: 2px solid var(--color-gray-75);
    border-radius: 5px;

    &::-moz-placeholder {
      color: var(--color-gray-60);
    }

    &::placeholder {
      color: var(--color-gray-60);
    }
  }

  .textarea-form[data-textarea-variant="compact"] {
    height: 58px;
    resize: none;

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

  .wpcf7-response-output {
    display: none !important;
  }

  .cf7ac-confirmation-wrapper {
    >.inner>.group>.label {
      padding-top: 0;
    }

    .split-form-unit {
      font-weight: 400;
    }
  }

  .post-password-form {
    p {
      display: flex;
      align-items: flex-end;
      gap: 10px;
    }

    label {
      width: 100%;
    }

    input[type="password"] {
      width: 100%;
      padding: 15px 14px;
      border: 2px solid var(--color-gray-75);
      border-radius: 5px;
      margin-top: 5px;

      &::-moz-placeholder {
        color: var(--color-gray-60);
      }

      &::placeholder {
        color: var(--color-gray-60);
      }
    }

    input[type="submit"] {
      position: relative;
      display: flex;
      width: 100px;
      min-height: 62px;
      box-sizing: border-box;
      flex: 1 0 auto;
      align-items: center;
      justify-content: center;
      padding: 10px;
      border-radius: 5px;
      background-color: var(--color-fill-brand);
      color: var(--color-text-light);
      font-size: 0.9375rem;
      font-weight: 500;
      text-align: center;
      transition: all 300ms ease-out;

      &:hover {
        @media (min-width: 897px) {
          background-color: var(--color-primary-50);
        }
      }

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

  .cf7ac-active-confirmation {
    .result:empty+.split-form-unit {
      display: none;
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .heading-02
------------------------------------------------ */
  .heading-02 {
    --mb-pc: 50px;
    --mb-sp: 30px;

    margin-bottom: var(--mb-pc);

    @media (max-width: 896px) {
      margin-bottom: var(--mb-sp);
    }

    > :not(span) {
      color: var(--color-text-default);
      font-size: 2.875rem;
      font-weight: 700;
      line-height: 1.5;

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

    &[data-heading-variant="small"] {
      > :not(span) {
        font-size: 2rem;

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

    +* {
      margin-top: 0 !important;
    }
  }

  /* ---------------------------------------------
  .heading-03
------------------------------------------------ */
  .heading-03 {
    --mt-pc: 50px;
    --mt-sp: 30px;
    --mb-pc: 30px;
    --mb-sp: 30px;
    --lh-pc: 1.3;
    --lh-sp: 1.3;

    margin-block: var(--mt-pc) var(--mb-pc);

    @media (max-width: 896px) {
      margin-block: var(--mt-sp) var(--mb-sp);
    }

    > :not(span) {
      position: relative;
      padding-bottom: 21px;
      color: var(--color-text-default);
      font-size: 1.75rem;
      font-weight: 700;
      line-height: var(--lh-pc);

      @media (max-width: 896px) {
        line-height: var(--lh-sp);
      }

      @media (max-width: 896px) {
        padding-bottom: 22px;
        font-size: 1.375rem;
      }
    }

    > :not(span)::after {
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      width: 70px;
      height: 4px;
      border-radius: 20px;
      background-color: var(--color-stroke-brand);
      content: "";
    }

    &[data-heading-variant="small"] {
      > :not(span) {
        padding-bottom: 0;
        font-size: 1.5rem;
        line-height: 1.5;

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

      > :not(span)::after {
        display: none;
      }
    }

    &[data-heading-variant="no-border"] {
      > :not(span) {
        padding-bottom: 0;
      }

      > :not(span)::after {
        display: none;
      }
    }

    &:first-child {
      margin-top: 0;
    }

    +* {
      margin-top: 0 !important;
    }
  }

  /* ---------------------------------------------
  .heading-04
------------------------------------------------ */
  .heading-04 {
    --mb-pc: 20px;
    --mb-sp: 20px;

    position: relative;
    padding-left: 18px;
    margin-bottom: var(--mb-pc);

    @media (max-width: 896px) {
      margin-bottom: var(--mb-sp);
    }

    &::after {
      position: absolute;
      top: 11px;
      left: 0;
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 10px;
      background-color: var(--color-text-brand);
      content: "";
    }

    > :not(span) {
      color: var(--color-text-default);
      font-size: 1.375rem;
      font-weight: 700;
      line-height: 1.5;

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

    &[data-font-size="medium"] {
      --mb-pc: 23px;
      --mb-sp: 20px;

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

    +* {
      margin-top: 0 !important;
    }
  }

  /* ---------------------------------------------
  .heading-05
------------------------------------------------ */
  .heading-05 {
    --mb-pc: 5px;
    --mb-sp: 6px;

    margin-bottom: var(--mb-pc);

    @media (max-width: 896px) {
      margin-bottom: var(--mb-sp);
    }

    > :not(span) {
      color: var(--color-text-default);
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.5;
    }

    &:not(:first-of-type) {
      margin-top: 19px;
    }

    +.text-normal {
      margin-top: 20px;
    }
  }

  /* ---------------------------------------------
  .heading-06
------------------------------------------------ */
  .heading-06 {
    margin-block: 30px 10px;

    > :not(span) {
      color: var(--color-text-default);
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.75;
    }

    +* {
      margin-top: 0 !important;
    }
  }

  /* ---------------------------------------------
  .heading-07
------------------------------------------------ */
  .heading-07 {
    margin-bottom: 31px;

    @media (max-width: 896px) {
      margin-bottom: 38px;
    }

    > :not(span) {
      position: relative;
      padding-bottom: 20px;
      color: var(--color-text-default);
      font-size: 1.75rem;
      font-weight: 700;

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

    > :not(span)::after {
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      width: 70px;
      height: 4px;
      border-radius: 10px;
      background-color: var(--color-stroke-brand);
      content: "";
    }
  }

  /* ---------------------------------------------
  .heading-blog
------------------------------------------------ */
  .heading-blog {
    padding-bottom: 29px;
    border-bottom: 1px solid var(--color-stroke-default);
    margin-bottom: 50px;

    @media (max-width: 896px) {
      margin-bottom: 30px;
    }

    &[data-heading-variant="bottom"] {
      margin-block: 50px 0;

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

  /* ---------------------------------------------
  .heading-news-detail
------------------------------------------------ */
  .heading-news-detail {
    margin-bottom: 50px;

    @media (max-width: 896px) {
      margin-bottom: 30px;
    }

    >.box {
      display: flex;
      flex: 1 0 auto;
      align-items: center;
      margin-bottom: 31px;
      gap: 15px;

      @media (max-width: 896px) {
        margin-top: 0;
      }
    }

    >.box>.date {
      color: var(--color-text-subtle);
      font-family: var(--second-family);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.5;
    }
  }

  /* ---------------------------------------------
  .heading-introduction
------------------------------------------------ */
  .heading-introduction {
    display: flex;
    flex-direction: column;
    padding-bottom: 19px;
    border-bottom: 1px solid var(--color-stroke-default);
    gap: 10px;

    >.category {
      margin-top: 0 !important;
      color: var(--color-text-subtle);
      font-size: 0.875rem;
      font-weight: 700;
      word-break: break-all;
    }

    >.title {
      display: -webkit-box;
      overflow: hidden;
      margin-top: 0 !important;
      -webkit-box-orient: vertical;
      color: var(--color-text-default);
      font-size: 1.25rem;
      font-weight: 500;
      -webkit-line-clamp: 3;
    }

    &[data-heading-variant="long"] {
      >.title {
        -webkit-line-clamp: none;
      }
    }
  }

  .heading-recruit {
    position: relative;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.28571;
    padding-block-end: 20px;

    @media (max-width: 896px) {
      font-size: 1.25rem;
      line-height: 1.5;
      padding-block-end: 0;
      padding-inline-start: 18px;
    }

    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 70px;
      height: 4px;
      border-radius: 20px;
      background-color: var(--color-red-30);
      content: "";

      @media (max-width: 896px) {
        bottom: 50%;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        transform: translateY(50%);
      }
    }
  }

  /* ---------------------------------------------
  .heading-introduction
------------------------------------------------ */
  .heading-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 20px;

    >i {
      display: block;
      width: 56px;
      height: 56px;
      flex: 0 0 56px;
      background-color: var(--color-fill-brand);
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }

    >span {
      color: var(--color-text-default);
      font-size: 1.375rem;
      font-weight: 700;
      line-height: 1.5;

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

@layer components {

  /* ---------------------------------------------
  .hero
------------------------------------------------ */
  .hero {
    @media (min-width: 897px) {
      margin: 0 20px;
    }

    >.inner {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 400px;
      border-radius: 5px;
      margin: 0 auto;
      background-color: var(--color-fill-brand);

      @media (max-width: 896px) {
        height: auto;
        padding-right: 10px;
        border-radius: 0;
      }
    }

    >.inner>h1 {
      display: flex;
      width: 100%;
      max-width: var(--max-width-xl);
      height: 100%;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 0 min(49.58678vw, 600px) 22px 40px;
      margin: 0 auto;

      @media (max-width: 896px) {
        max-width: 100%;
        padding: 24px 20px 31px;
      }
    }

    >.inner>h1[data-width-variant="small"] {
      @media (min-width: 897px) {
        max-width: 910px;
      }
    }

    >.inner>h1>.subtitle {
      color: var(--color-text-light);
      font-family: var(--second-family);
      font-size: 1.625rem;
      font-weight: 700;

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

    >.inner>h1>.title {
      color: var(--color-text-light);
      font-size: 3.375rem;
      font-weight: 700;

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

    >.inner>.image {
      position: absolute;
      top: 0;
      right: 0;
      width: 47.5vw;
      height: 388px;

      @media (max-width: 896px) {
        position: static;
        width: 100%;
        height: auto;
      }
    }

    >.inner>.image>picture>img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }

    &[data-hero-variant="no-image"] {
      >.inner {
        @media (min-width: 897px) {
          height: auto;
          padding-block: 48px;
        }

        @media (max-width: 896px) {
          padding-right: 0;
        }
      }

      >.inner>h1 {
        padding: 0 20px 6px;

        @media (max-width: 896px) {
          padding: 43px 20px 51px;
        }
      }
    }

    &[data-hero-level3="true"] {
      >.inner>h1 {
        @media (min-width: 897px) {
          max-width: 910px;
        }
      }
    }
  }

  /* ---------------------------------------------
  .hero-blog
------------------------------------------------ */
  .hero-blog {
    @media (min-width: 897px) {
      margin: 0 20px;
    }

    >.inner {
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: 5px;
      margin: 0 auto;
      background-color: var(--color-fill-brand);

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

    >.inner>.box {
      display: flex;
      width: 100%;
      max-width: var(--max-width-xl);
      align-items: center;
      justify-content: center;
      padding: 70px min(3.30579vw, 40px) 71px;
      margin: 0 auto;
      gap: min(4.13223vw, 50px);

      @media (max-width: 896px) {
        max-width: 100%;
        flex-direction: column;
        padding: 60px 20px;
        gap: 20px;
      }
    }

    >.inner>.box>h1 {
      width: min(44.6281vw, 540px);

      @media (max-width: 896px) {
        width: 300px;
        margin: 0 auto;
      }
    }

    >.inner>.box>h1>img {
      display: block;
      width: 100%;
      height: auto;
    }

    >.inner>.box>.text {
      color: var(--color-text-light);
      font-size: 1rem;
      line-height: 1.75;
    }
  }

  /* ---------------------------------------------
  .heading-blog-detail
------------------------------------------------ */
  .hero-blog-detail {
    position: relative;
    overflow: hidden;
    width: calc(100% - 40px);
    padding: 51px 20px 49px;
    border-radius: 5px;
    margin: 0 auto;
    background-color: var(--color-fill-brand);

    @media (max-width: 896px) {
      width: 100%;
      border-radius: 0;
    }

    >.inner {
      width: 100%;
      max-width: var(--max-width-lg);
      margin: 0 auto;
    }

    >.inner>.box {
      display: flex;
      align-items: center;
      gap: 40px;
      margin-block-end: 29px;

      @media (max-width: 896px) {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        margin-block-end: 15px;
      }
    }

    >.inner>.box>.logo {
      width: 180px;
    }

    >.inner>.box>.logo>img {
      display: block;
      width: 100%;
      height: auto;
    }

    >.inner>.box>.info {
      display: flex;
      align-items: center;
      gap: 40px;

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

    >.inner>.box>.info>.date {
      color: var(--color-text-light);
      font-family: var(--second-family);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.7;
    }

    >.inner>.box>.info>.tag {
      position: relative;
      color: var(--color-text-light);
      font-size: 0.875rem;
      line-height: 1.7;
    }

    >.inner>.box>.info>.tag::before {
      position: absolute;
      top: 50%;
      left: -21px;
      display: block;
      width: 1px;
      height: 15px;
      background-color: var(--color-text-light);
      content: "";
      transform: translateY(-50%);
    }

    >.inner>h1 {
      color: var(--color-text-light);
      font-size: 2rem;
      font-weight: 700;

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

  /* ---------------------------------------------
  .hero-recruit
------------------------------------------------ */
  .hero-recruit {
    display: flex;
    border-radius: 5px;
    background-color: var(--color-red-30);

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

    >.content {
      display: flex;
      width: 50%;
      align-items: center;
      padding: 30px 60px;
      color: var(--color-gray-100);

      @media (max-width: 896px) {
        width: 100%;
        padding: 40px 30px;
      }
    }

    >.content>.inner>.sub-title {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.1;
      margin-block-end: 10px;

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

    >.content>.inner>.title {
      font-size: 2.875rem;
      font-weight: 700;
      line-height: 1.26087;
      margin-block-end: 20px;

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

    >.content>.inner>.text {
      font-size: 1.125rem;
      line-height: 1.55556;

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

    >.image {
      width: 50%;

      @media (max-width: 896px) {
        width: 100%;
      }
    }

    >.image>img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 0 5px 5px 0;

      @media (max-width: 896px) {
        border-radius: 0 0 5px 5px;
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .image-card
------------------------------------------------ */
  .image-card {
    position: relative;

    >.tag {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      min-width: 68px;
      min-height: 28px;
      padding: 4px 10px;
      border-radius: 5px 0;
      background-color: var(--color-fill-dark);
      color: var(--color-text-light);
      font-size: 0.875rem;
      text-align: center;
    }

    >figure {
      overflow: hidden;
      width: 100%;
      height: 220px;
      border-radius: 5px;
      margin: 0;

      @media (max-width: 896px) {
        height: auto;
        aspect-ratio: 335 / 181;
      }
    }

    >figure>img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      transition: all 300ms ease-out;
    }

    &[data-image-variant="short"] {
      >figure {
        border: 1px solid var(--color-stroke-default);

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

    &[data-image-variant="height-200-mobile"] {
      >figure {
        @media (max-width: 896px) {
          aspect-ratio: 335 / 200;
        }
      }
    }

    &[data-image-variant="height-220-mobile"] {
      >figure {
        @media (max-width: 896px) {
          aspect-ratio: 335 / 220;
        }
      }
    }

    &[data-image-variant="short-radius"] {
      >figure {
        border-radius: 5px 5px 0 0;

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

  /* ---------------------------------------------
  .image-full
------------------------------------------------ */
  .image-full {
    overflow: hidden;
    margin: 50px 0 0;

    @media (max-width: 896px) {
      margin: 30px 0 0;
    }

    &:first-child {
      margin-top: 0;
    }

    img {
      width: 100%;
      max-width: 100%;
      height: auto;
      border-radius: 5px;
    }

    figcaption {
      margin-top: 10px;
      color: var(--color-text-subtle);
      font-size: 0.75rem;
      line-height: 1.83;
    }
  }

  /* ---------------------------------------------
  .image-max-size
------------------------------------------------ */
  .image-max-size {
    --mt-pc: 50px;
    --mt-sp: 30px;

    overflow: hidden;
    margin: var(--mt-pc) 0 0;
    text-align: center;

    @media (max-width: 896px) {
      margin: var(--mt-sp) 0 0;
    }

    &:first-child {
      margin-top: 0;
    }

    img {
      max-width: 100%;
      height: auto;
      border-radius: 5px;
      margin: 0 auto;
    }

    figcaption {
      margin-top: 10px;
      color: var(--color-text-subtle);
      font-size: 0.75rem;
      line-height: 1.83;
    }

    &[data-radius-variant="none"] img {
      border-radius: 0;
    }
  }
}

@layer components {
  :root {
    --color-black-100: #000;
    --color-black-90: rgb(0 0 0 / 90%);
    --color-gray-100: #fff;
    --color-gray-90: #f9f9f9;
    --color-gray-80: #efefef;
    --color-gray-70: #ccc;
    --color-gray-60: #aaa;
    --color-gray-50: #999;
    --color-gray-40: #797979;
    --color-gray-30: #626262;
    --color-gray-20: #4c4c4c;
    --color-gray-10: #222;
    --color-gray-5: #111;
    --color-red-95: #fcebee;
    --color-red-90: #fae6ea;
    --color-red-80: #eccad1;
    --color-red-70: #e5a6b2;
    --color-red-60: #db8294;
    --color-red-50: #ca596e;
    --color-red-40: #b82f49;
    --color-red-30: #a70524;
    --color-red-25: #8a0720;
    --color-red-20: #86041d;
    --color-red-10: #640316;
    --color-red-5: #43020e;
    --color-primary-90: var(--color-red-90);
    --color-primary-80: var(--color-red-80);
    --color-primary-70: var(--color-red-70);
    --color-primary-60: var(--color-red-60);
    --color-primary-50: var(--color-red-50);
    --color-primary-40: var(--color-red-40);
    --color-primary-30: var(--color-red-30);
    --color-primary-20: var(--color-red-20);
    --color-primary-10: var(--color-red-10);
    --color-primary-5: var(--color-red-5);
    --color-neutral-100: var(--color-gray-100);
    --color-neutral-90: var(--color-gray-90);
    --color-neutral-80: var(--color-gray-80);
    --color-neutral-70: var(--color-gray-70);
    --color-neutral-60: var(--color-gray-60);
    --color-neutral-50: var(--color-gray-50);
    --color-neutral-40: var(--color-gray-40);
    --color-neutral-30: var(--color-gray-30);
    --color-neutral-20: var(--color-gray-20);
    --color-neutral-10: var(--color-gray-10);
    --color-neutral-5: var(--color-gray-5);
    --color-category-blue: var(--color-blue-30);
    --color-category-green: var(--color-green-30);
    --color-category-purple: var(--color-purple-30);
    --color-blue-30: #0564a7;
    --color-green-30: #1e8e38;
    --color-purple-30: #83408a;
    --color-text-black: var(--color-black-100);
    --color-text-default: var(--color-neutral-5);
    --color-text-subtle: var(--color-neutral-40);
    --color-fill-default: var(--color-neutral-100);
    --color-fill-subtle: var(--color-neutral-80);
    --color-fill-dark: var(--color-neutral-10);
    --color-stroke-default: var(--color-gray-75);
    --color-stroke-dark: var(--color-gray-20);
    --color-stroke-brandsubtle: var(--color-primary-50);
    --color-text-brand: var(--color-primary-30);
    --color-fill-brand: var(--color-primary-30);
    --color-tag-blue: var(--color-blue-30);
    --color-tag-green: var(--color-green-30);
    --color-tag-purple: var(--color-purple-30);
    --color-text-light: var(--color-neutral-100);
    --color-fill-subtler: var(--color-neutral-80);
    --color-stroke-light: var(--color-gray-100);
    --color-stroke-subtler: var(--color-gray-50);
    --color-stroke-brand: var(--color-primary-30);
    --color-stroke-subtle: var(--color-gray-70);
    --color-stroke-subtle-2: var(--color-gray-50);
    --color-bluegreen-30: #39809c;
    --color-brown-30: #866431;
    --color-tag-bluegreen: var(--color-bluegreen-30);
    --color-tag-brown: var(--color-brown-30);
    --color-category-bluegreen: var(--color-bluegreen-30);
    --color-category-brown: var(--color-brown-30);
    --color-blue-30-2: #0564a7;
    --color-text-danger: #d00;
    --color-gray-75: #e0e0e0;
    --color-voice-green: #d1eace;
    --color-voice-blue: #d1e6f6;
    --color-voice-purple: #eeddf1;
    --color-voice-pink-01: #fbe0e5;
    --color-voice-pink-02: #f9d8eb;
    --color-voice-blue-02: #c4eaef;
    --color-voice-yellow-01: #f4ebdd;
    --color-voice-yellow-02: #ffdf87;
  }
}

@layer components {
  :root {
    --font-family: "Noto Sans JP", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    --second-family: "Rajdhani", sans-serif;
    --font-noto-serif: "Noto Serif JP", sans-serif;
    --font-size-base: 1rem;
  }
}

@layer components {
  :root {
    --max-width-xxl: 1512px;
    --max-width-xl: 1210px;
    --max-width-lg: 870px;
  }
}

@layer components {

  a[href^="tel:"] {
    @media (min-width: 897px) {
      pointer-events: none;
    }

    @media screen and (max-width: 896px) {
      text-decoration: underline;
    }
  }

  /* ---------------------------------------------
  .link-red
------------------------------------------------ */
  .link-red {
    position: relative;
    display: inline-block;
    padding-right: 14px;
    color: var(--color-text-brand);
    font-size: 0.875rem;
    text-decoration: none;

    &::after {
      position: absolute;
      top: 50%;
      right: 0;
      display: block;
      width: 0;
      height: 0;
      border-width: 4px 0 4px 7px;
      border-style: solid;
      border-color: transparent transparent transparent var(--color-text-brand);
      content: "";
      transform: translateY(-50%);
    }

    >span {
      padding-bottom: 3px;
      background-image: linear-gradient(90deg, var(--color-text-brand), var(--color-text-brand));
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 0 1px;
      transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
    }

    &[href]:hover>span {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: 100% 1px;
      }
    }

    &[data-arrow-variant="none"] {
      padding-right: 0;

      &::after {
        display: none;
      }
    }

    &[data-underline-variant="true"] {
      >span {
        background-position: -100% 100%;
        background-size: 100% 1px;
      }

      &[href]:hover>span {
        @media (min-width: 897px) {
          background-position: 100% 100%;
          background-size: 0 1px;
        }
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .list-mega-menu
------------------------------------------------ */
  .list-mega-menu {
    display: grid;
    grid-template-rows: 1fr;

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

    >li {
      flex: 1 0 auto;
      padding-bottom: 1px;
      background-image: linear-gradient(90deg, var(--color-gray-100), var(--color-gray-100)),
        linear-gradient(90deg, var(--color-stroke-brandsubtle), var(--color-stroke-brandsubtle));
      background-position: 100% 100%, 0 100%;
      background-repeat: no-repeat;
      background-size: 0 1px, 100% 1px;
      transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;

      @media (max-width: 896px) {
        background-image: linear-gradient(90deg, var(--color-gray-100), var(--color-gray-100)),
          linear-gradient(90deg, var(--color-stroke-default), var(--color-stroke-default));
      }
    }

    >li:hover {
      @media (min-width: 897px) {
        background-position: 0 100%, 0 100%;
        background-size: 100% 1px, 100% 1px;
      }
    }

    >li>a {
      position: relative;
      display: block;
      padding: 15px 20px 14px 10px;
      color: var(--color-text-light);
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 2;

      @media (max-width: 896px) {
        padding: 15px 0;
        color: var(--color-text-default);
        font-size: 0.8125rem;
      }
    }

    >li>a::after {
      @media (min-width: 897px) {
        position: absolute;
        top: 50%;
        right: 11px;
        display: block;
        width: 0;
        height: 0;
        border-width: 4px 0 4px 7px;
        border-style: solid;
        border-color: transparent transparent transparent var(--color-text-light);
        content: "";
        transform: translateY(-50%);
      }
    }

    &[data-box-column="2"] {
      @media (min-width: 897px) {
        gap: 0 min(1.875vw, 30px);
        grid-template-columns: repeat(2, 1fr);
      }
    }

    &[data-box-column="3"] {
      @media (min-width: 897px) {
        gap: 0 min(1.875vw, 30px);
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }

  /* ---------------------------------------------
  .list-main-menu
------------------------------------------------ */
  .list-main-menu {
    display: grid;
    gap: 0 min(1.875vw, 30px);
    grid-template-columns: repeat(1, 1fr);

    @media (max-width: 896px) {
      gap: 20px;
      margin-block-start: 10px;
    }

    &[data-box-column="2"] {
      @media (min-width: 897px) {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    &[data-box-column="3"] {
      @media (min-width: 897px) {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    &[data-box-column="4"] {
      @media (min-width: 897px) {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    >li>.title {
      color: var(--color-text-light);
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.85714;
      padding-block: 5px;

      @media (max-width: 896px) {
        padding: 0;
        color: var(--color-text-subtle);
        line-height: 2;
      }
    }

    .list-mega-menu>li>a {
      padding: 10px 19px 9px 0;
      font-size: 0.8125rem;
      font-weight: 400;
      line-height: 2;

      @media (max-width: 896px) {
        padding: 15px 0;
      }
    }
  }

  /* ---------------------------------------------
  .list-sub-menu
------------------------------------------------ */
  .list-sub-menu {
    display: flex;
    gap: 0 min(3.125vw, 50px);

    @media (max-width: 896px) {
      flex-wrap: wrap;
      gap: 20px 30px;
    }

    >li {
      display: flex;
    }

    >li>a {
      position: relative;
      display: inline-block;
      padding-right: 14px;
      color: var(--color-text-light);
      font-size: 0.8125rem;
      line-height: 1.46154;
      text-decoration: none;

      @media (max-width: 896px) {
        color: var(--color-text-default);
      }

      &::after {
        position: absolute;
        top: 50%;
        right: 0;
        display: block;
        width: 0;
        height: 0;
        border-width: 4px 0 4px 7px;
        border-style: solid;
        border-color: transparent transparent transparent var(--color-text-light);
        content: "";
        transform: translateY(-50%);

        @media (max-width: 896px) {
          border-color: transparent transparent transparent var(--color-text-brand);
        }
      }

      >span {
        padding-bottom: 3px;
        background-image: linear-gradient(90deg, var(--color-text-light), var(--color-text-light));
        background-position: 100% 100%;
        background-repeat: no-repeat;
        background-size: 0 1px;
        transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;

        @media (max-width: 896px) {
          background-image: linear-gradient(90deg, var(--color-text-brand), var(--color-text-brand));
        }
      }

      &[href]:hover>span {
        @media (min-width: 897px) {
          background-position: 0 100%;
          background-size: 100% 1px;
        }
      }
    }
  }

  /* ---------------------------------------------
  .list-news
------------------------------------------------ */
  .list-news {
    border-top: 1px solid var(--color-stroke-default);

    >.link {
      position: relative;
      display: flex;
      align-items: flex-start;
      padding: 30px 50px 29px 21px;
      border-bottom: 1px solid var(--color-stroke-default);
      gap: 50px;

      @media (max-width: 896px) {
        flex-direction: column;
        padding: 20px 40px 19px 20px;
        gap: 10px;
      }
    }

    >.link::after {
      position: absolute;
      top: 50%;
      right: 19px;
      display: block;
      width: 0;
      height: 0;
      border-width: 4px 0 4px 7px;
      border-style: solid;
      border-color: transparent transparent transparent var(--color-fill-brand);
      content: "";
      transform: translateY(-50%);
    }

    >.link>.box {
      display: flex;
      flex: 1 0 auto;
      align-items: center;
      margin-top: 2px;
      gap: 15px;

      @media (max-width: 896px) {
        margin-top: 0;
      }
    }

    >.link>.box>.date {
      padding-top: 2px;
      color: var(--color-text-subtle);
      font-family: var(--second-family);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.5;
    }

    >.link>.detail {
      width: 100%;
    }

    >.link>.detail>.text {
      position: relative;
      display: inline;
      background-image: linear-gradient(90deg, var(--color-text-default), var(--color-text-default));
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 0 1px;
      color: var(--color-text-default);
      font-size: 1.125rem;
      font-weight: 400;
      line-height: 1.55;
      transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
    }

    >.link:hover>.detail>.text {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: 100% 1px;
      }
    }

    &[data-layout-variant="column"] {
      >.link {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
    }
  }

  /* ---------------------------------------------
  .list-tags
------------------------------------------------ */
  .list-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    &:has(.tag-blog[data-color-variant="black"]) {
      @media (max-width: 896px) {
        display: block;
      }
    }
  }

  /* ---------------------------------------------
  .list-card-blog
------------------------------------------------ */
  .list-card-blog {
    display: grid;
    grid-gap: 50px 30px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    padding-block: 20px;

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

  /* ---------------------------------------------
  .list-dots
------------------------------------------------ */
  .list-dots {
    --mt-pc: 0;
    --mt-sp: 0;
    --dot-size: 4px;

    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-top: var(--mt-pc);
    gap: 7px;
    list-style: none;

    @media (max-width: 896px) {
      margin-top: var(--mt-sp);
      gap: 5px;
    }

    >li {
      position: relative;
      padding-left: 24px;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.9;

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

    >li::before {
      position: absolute;
      top: calc(15.2px + var(--dot-size)/2);
      left: 10px;
      display: block;
      width: var(--dot-size);
      height: var(--dot-size);
      border-radius: 50%;
      background-color: var(--color-text-default);
      content: "";
      transform: translateY(-50%);

      @media (max-width: 896px) {
        top: calc(14.96px + var(--dot-size)/2);
      }
    }

    >li>.note {
      position: relative;
      padding-left: 19px;
      margin-left: -24px;
      font-size: 0.875rem;
      line-height: 1.71;
    }

    >li>.note::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "※";
    }

    &[data-font-variant="small"] {
      display: flex;
      flex-direction: column;

      >li {
        padding-left: 21px;
        font-size: 0.875rem;
        line-height: 1.86;
      }

      >li::before {
        top: calc(13.02px + var(--dot-size)/3);
        left: 9px;
      }
    }

    &[data-font-variant="medium"] {
      >li {
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.5;

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

      >li::before {
        top: calc(15px + var(--dot-size)/3);

        @media (max-width: 896px) {
          top: calc(14.04px + var(--dot-size)/3);
        }
      }
    }

    &[data-color-variant="red"] {
      color: var(--color-text-brand);

      &>li::before {
        background-color: var(--color-text-brand);
      }
    }
  }

  /* ---------------------------------------------
  .list-check
------------------------------------------------ */
  .list-check {
    padding-left: 0;
    list-style: none;

    >li {
      position: relative;
      padding-bottom: 20px;
      padding-left: 50px;
      border-bottom: 1px solid var(--color-stroke-default);
      font-size: 1.25rem;
      line-height: 1.7;

      @media (max-width: 896px) {
        padding-bottom: 19px;
        font-size: 1.125rem;
        line-height: 1.89;
      }
    }

    >li:first-child {
      padding-top: 0;
    }

    >li:not(:last-child) {
      margin-bottom: 20px;
    }

    >li::before {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 35px;
      height: 35px;
      background: url("/assets/images/common/icon-check-01.svg") no-repeat top left;
      background-size: contain;
      content: "";
    }

    &[data-size-variant="medium"]>li {
      @media (min-width: 897px) {
        font-size: 1.375rem;
        line-height: 1.54545;
      }

      @media (max-width: 896px) {
        min-height: 55px;
        padding-bottom: 20px;
        line-height: 1.55556;
      }
    }

    &[data-style-border-variant="hidden-last"] {
      >li:last-child {
        border-bottom: none;
      }
    }
  }

  /* ---------------------------------------------
  .list-card-info
------------------------------------------------ */
  .list-card-info {
    --mt-pc: 50px;
    --mt-sp: 50px;

    display: grid;
    padding-left: 0;
    margin-top: var(--mt-pc);
    gap: 3px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    list-style: none;

    @media (max-width: 896px) {
      margin-top: var(--mt-sp);
      grid-template-columns: repeat(1, 1fr);
    }

    &:first-child {
      margin-top: 0;
    }

    &[data-step-variant="true"] {
      gap: 33px;

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

    &[data-step-variant="true"] .card-info {
      @media (max-width: 896px) {
        padding-bottom: 26px;
      }
    }

    &[data-step-variant="true"]>li:not(:first-child) {
      position: relative;
    }

    &[data-step-variant="true"]>li:not(:first-child)::before {
      position: absolute;
      display: block;
      width: 15px;
      height: 20px;
      background-image: url("/assets/images/common/icon-arrow-red-right-01.svg");
      background-repeat: no-repeat;
      background-size: contain;
      content: "";

      @media (min-width: 897px) {
        top: 50%;
        left: -24px;
        transform: translateY(-50%);
      }

      @media (max-width: 896px) {
        top: -26px;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
      }
    }
  }

  /* ---------------------------------------------
  .list-use-case
------------------------------------------------ */
  .list-use-case {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;

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

  /* ---------------------------------------------
  .list-solution-flow
------------------------------------------------ */
  .list-solution-flow {
    --mt-pc: 30px;
    --mt-sp: 30px;

    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-top: var(--mt-pc);
    gap: 4px;
    list-style: none;

    @media (max-width: 896px) {
      margin-top: var(--mt-sp);
      gap: 5px;
    }

    >li {
      display: flex;
      gap: 30px;

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

    >li>.step {
      position: relative;
      width: min(270px, 22.31405vw);
      flex: 1 0 auto;

      @media (max-width: 896px) {
        position: static;
        width: 100%;
      }
    }

    >li:not(:last-child)>.step {
      @media (min-width: 897px) {
        padding-bottom: 31px;
      }
    }

    >li:not(:last-child)>.step::before {
      position: absolute;
      z-index: 2;
      bottom: 0;
      left: 50%;
      display: block;
      width: 0;
      height: 0;
      border-width: 9px 4.5px 0;
      border-style: solid;
      border-color: var(--color-stroke-brand) transparent transparent transparent;
      content: "";
      transform: translateX(-50%);

      @media (max-width: 896px) {
        left: 11px;
        transform: none;
      }
    }

    >li:not(:last-child)>.step::after {
      position: absolute;
      z-index: -1;
      top: 0;
      left: 50%;
      display: block;
      width: 2px;
      height: calc(100% - 9px);
      background-color: var(--color-stroke-brand);
      content: "";
      transform: translateX(-50%);

      @media (max-width: 896px) {
        left: 14px;
        transform: none;
      }
    }

    >li>.step>.title {
      width: 100%;
      padding: 12px 10px;
      border-radius: 5px;
      background-color: var(--color-fill-brand);
      color: var(--color-text-light);
      font-size: 1.125rem;
      font-weight: 700;
      text-align: center;
    }

    >li>.box {
      width: 100%;
      align-self: flex-start;
      padding-block: 10px 31px;

      @media (max-width: 896px) {
        padding: 10px 0 20px 30px;
      }
    }

    >li:not(:last-child)>.box {
      border-bottom: 1px solid var(--color-stroke-default);
      margin-bottom: 12px;

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

    >li:last-child>.box {
      @media (max-width: 896px) {
        padding-left: 0;
      }
    }

    >li>.box>.text {
      font-size: 1.125rem;
      line-height: 1.56;

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

    >li>.box>.sub {
      margin-top: 5px;
      color: var(--color-text-subtle);
      font-size: 0.875rem;
      line-height: 1.56;

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

  /* ---------------------------------------------
  .list-solution-security
------------------------------------------------ */
  .list-solution-security {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  /* ---------------------------------------------
  .list-accordion-faq
------------------------------------------------ */
  .list-accordion-faq {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    gap: 10px;
    list-style: none;

    >.faq {
      border-radius: 5px;
      background-color: var(--color-fill-subtle);
    }

    >.faq>.question {
      position: relative;
      display: block;
      width: 100%;
      padding: 20px 70px 20px 30px;
      font-size: 1.25rem;
      font-weight: 500;

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

    >.faq>.question::after {
      position: absolute;
      top: 50%;
      right: 40px;
      display: block;
      width: 4px;
      height: 25px;
      background-color: var(--color-stroke-brand);
      content: "";
      transform: translateY(-50%);
      transition: all 300ms ease-out;
    }

    >.faq>.question[aria-expanded="true"]::after {
      opacity: 0;
      transform: translateY(-50%) rotate(90deg);
    }

    >.faq>.question::before {
      position: absolute;
      top: 50%;
      right: 30px;
      display: block;
      width: 25px;
      height: 4px;
      background-color: var(--color-stroke-brand);
      content: "";
      transform: translateY(-50%);
      transition: all 300ms ease-out;
    }

    >.faq>.answer {
      overflow: hidden;
      transition: max-height 300ms ease-out;

      &[aria-hidden="true"] {
        max-block-size: 0;
      }
    }

    >.faq>.answer>.inner {
      padding: 0 30px 20px;
    }

    >.faq>.answer>.inner>.box {
      padding-top: 20px;
      border-top: 1px solid var(--color-stroke-subtle);
    }
  }

  /* ---------------------------------------------
  .list-recruitment-items
------------------------------------------------ */
  .list-recruitment-items {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    gap: 10px;
    list-style: none;

    >.faq {
      border-radius: 5px;
      background-color: var(--color-fill-subtle);
    }

    >.faq>.question {
      display: block;
      width: 100%;
      padding: 20px 30px;
      cursor: default;
      font-size: 1.25rem;
      font-weight: 500;
      pointer-events: none;

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

    >.faq>.answer {
      display: block;
    }

    >.faq>.answer>.inner {
      padding: 0 30px 20px;
    }

    >.faq>.answer>.inner>.box {
      padding-top: 20px;
      border-top: 1px solid var(--color-stroke-subtle);
    }
  }

  /* ---------------------------------------------
  .list-order
------------------------------------------------ */
  .list-order {
    --mt-pc: 30px;
    --mt-sp: 30px;

    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-top: var(--mt-pc);
    counter-reset: list-counter;
    gap: 10px;
    list-style: none;

    @media (max-width: 896px) {
      margin-top: var(--mt-sp);
    }

    &:first-child {
      margin-top: 0;
    }

    >li {
      position: relative;
      padding-left: 24px;
      counter-increment: list-counter;
      font-size: 1rem;
      line-height: 1.75;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        color: var(--color-text-default);
        content: counter(list-counter) ".";
      }
    }

    +.heading-05,
    +.text-normal {
      margin-top: 30px;
    }

    &[data-font-variant="medium"]>li {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.5;

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

    &[data-color-variant="red"] {
      color: var(--color-text-brand);

      &>li::before {
        color: var(--color-text-brand);
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .mega-menu
------------------------------------------------ */
  .mega-menu {
    position: absolute;
    top: 90px;
    left: 0;
    width: 100vw;
    background-color: var(--color-fill-brand);
    opacity: 0;
    transition: all 300ms ease-out;
    visibility: hidden;

    @media (max-width: 896px) {
      position: static;
      overflow: hidden;
      width: 100%;
      height: 0;
      background-color: transparent;
      transition: height 300ms ease-out;
    }

    &[aria-hidden="true"] {
      opacity: 1;
      visibility: visible;

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

    >.inner {
      display: flex;
      width: 100%;
      max-width: 1228px;
      padding: 39px min(1.875vw, 30px) 50px;
      gap: min(3vw, 48px);
      margin-inline: auto;

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

    >.inner>.heading {
      width: min(21.18644vw, 250px);
      flex: 1 0 auto;
      padding-top: 10px;

      @media (max-width: 896px) {
        width: 100%;
        padding-top: 0;
        margin-bottom: 10px;
      }
    }

    >.inner>.heading>.title {
      margin-bottom: 18px;
      color: var(--color-text-light);
      font-size: 1.875rem;
      font-weight: 700;

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

    >.inner>.heading>.link {
      position: relative;
      display: inline-block;
      padding-right: 14px;
      color: var(--color-text-light);
      font-size: 1rem;

      @media (max-width: 896px) {
        color: var(--color-text-default);
        font-size: 0.875rem;
        line-height: 1.5;
      }
    }

    >.inner>.heading>.link::after {
      position: absolute;
      top: 50%;
      right: 0;
      display: block;
      width: 0;
      height: 0;
      border-width: 4px 0 4px 7px;
      border-style: solid;
      border-color: transparent transparent transparent var(--color-text-light);
      content: "";
      transform: translateY(-50%);

      @media (max-width: 896px) {
        border-color: transparent transparent transparent var(--color-stroke-brand);
      }
    }

    >.inner>.heading>.link.current {
      @media (max-width: 896px) {
        color: var(--color-stroke-brand);
      }
    }

    >.inner>.heading>.link.current::after {
      @media (max-width: 896px) {
        border-color: transparent transparent transparent var(--color-stroke-brand);
      }
    }

    >.inner>.heading>.link>span {
      padding-bottom: 3px;
      background-image: linear-gradient(90deg, var(--color-gray-100), var(--color-gray-100));
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 0 1px;
      transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
    }

    >.inner>.heading>.link:hover>span {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: 100% 1px;
      }
    }

    >.inner>.box {
      display: flex;
      width: 100%;
      flex-direction: column;
      gap: 40px;
    }

    >.inner>.box>.main-menu {
      display: flex;
      flex-direction: column;
      grid-area: main-menu;
    }

    >.inner>.box>.sub-menu {
      grid-area: sub-menu;
    }

    >.btn-close {
      position: absolute;
      right: 20px;
      bottom: 20px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      transition: all 300ms ease-out;

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

    >.btn-close:hover {
      @media (min-width: 897px) {
        opacity: 0.7;
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .modal-introduction
------------------------------------------------ */
  .modal-introduction {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-black-90);
    padding-inline: 20px;

    >.inner {
      position: absolute;
      z-index: 3;
      top: 50%;
      left: 50%;
      width: min(81.25vw, 1170px);
      height: calc(100vh - 117px);
      padding: 70px 36px 165px;
      background-color: var(--color-fill-default);
      transform: translate(-50%, -50%);

      @media (max-width: 896px) {
        width: calc(100vw - 40px);
        height: calc(100vh - 60px);
        padding: 23px 20px 195px;
      }
    }

    >.inner>.close {
      position: absolute;
      top: -11px;
      right: -10px;
      cursor: pointer;
      transition: all 300ms ease-out;

      @media (max-width: 896px) {
        top: -15px;
        right: -15px;
        display: block;
        border-radius: 40px;
        outline: none;
      }
    }

    >.inner>.close:hover {
      @media (min-width: 897px) {
        opacity: 0.7;
      }
    }

    >.inner>.box {
      height: 100%;
      overflow-y: auto;
      padding-inline: min(7.91667vw, 114px);

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

    >.inner>.button {
      margin-top: 51px;
      text-align: center;
    }
  }

  .modal-content {
    display: flex;
    gap: 30px;

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

    >.left {
      width: min(25.69444vw, 370px);
      flex: 1 0 auto;

      @media (max-width: 896px) {
        width: 100%;
      }
    }

    >.left>.image-card {
      margin-bottom: 15px;
    }

    >.right {
      display: flex;
      width: 100%;
      flex-direction: column;
      gap: 20px;
    }

    >.right>.detail>.link {
      margin-top: 15px;
    }

    >.right>.detail>ul {
      display: flex;
      flex-direction: column;
    }

    >.right>.detail>ul>li {
      position: relative;
      padding-left: 24px;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.9;

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

    >.right>.detail>ul>li::before {
      position: absolute;
      top: 18px;
      left: 10px;
      display: block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: var(--color-text-default);
      content: "";
      transform: translateY(-50%);
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .nav-category
------------------------------------------------ */
  .nav-category {
    padding: 100px 0;
    background-color: var(--color-fill-subtle);

    @media (max-width: 896px) {
      padding: 50px 0;
    }

    >.container>.heading {
      margin-top: 0;
      margin-bottom: 19px;

      @media (max-width: 896px) {
        margin-bottom: 18px;
      }
    }

    >.container>.heading>a {
      position: relative;
      padding-right: 14px;
      color: var(--color-red-30);
      font-size: 1.625rem;
      font-weight: bold;
      text-decoration: none;

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

    >.container>.heading>a::after {
      position: absolute;
      top: 50%;
      right: 0;
      display: block;
      width: 0;
      height: 0;
      border-width: 4px 0 4px 7px;
      border-style: solid;
      border-color: transparent transparent transparent var(--color-red-30);
      content: "";
      transform: translateY(-50%);
    }

    >.container>.heading>a>span {
      padding-bottom: 3px;
      background-image: linear-gradient(90deg, var(--color-red-30), var(--color-red-30));
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 0 1px;
      transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
    }

    >.container>.heading>a:hover>span {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: 100% 1px;
      }
    }
  }

  /* ---------------------------------------------
  .list-nav-category
------------------------------------------------ */
  .list-nav-category {
    display: grid;
    padding-left: 0;
    gap: 0 min(1.875vw, 30px);
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    list-style: none;

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

    >li {
      flex: 1 0 auto;
      padding-bottom: 1px;
      background-image: linear-gradient(90deg, var(--color-gray-60), var(--color-gray-60)),
        linear-gradient(90deg, var(--color-stroke-subtle), var(--color-stroke-subtle));
      background-position: 100% 100%, 0 100%;
      background-repeat: no-repeat;
      background-size: 0 1px, 100% 1px;
      transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;

      @media (max-width: 896px) {
        background-image: linear-gradient(90deg, var(--color-gray-60), var(--color-gray-60)),
          linear-gradient(90deg, var(--color-stroke-default), var(--color-stroke-default));
      }
    }

    >li:hover {
      @media (min-width: 897px) {
        background-position: 0 100%, 0 100%;
        background-size: 100% 1px, 100% 1px;
      }
    }

    >li>a {
      position: relative;
      display: flex;
      height: 100%;
      align-items: center;
      padding: 18px 30px 17px 10px;
      color: var(--color-text-default);
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 1.67;
      text-decoration: none;

      @media (max-width: 896px) {
        padding: 14px 20px 12px 10px;
        color: var(--color-text-default);
        font-size: 0.75rem;
      }
    }

    >li>a::after {
      position: absolute;
      top: 50%;
      right: 11px;
      display: block;
      width: 0;
      height: 0;
      border-width: 4px 0 4px 7px;
      border-style: solid;
      border-color: transparent transparent transparent var(--color-text-brand);
      content: "";
      transform: translateY(-50%);

      @media (max-width: 896px) {
        right: 8px;
      }
    }
  }

  /* ---------------------------------------------
  .list-main-category
------------------------------------------------ */
  .list-main-category {
    display: grid;
    padding-top: 2px;
    gap: 20px 30px;

    @media (min-width: 897px) {
      padding-top: 5px;
      grid-template-columns: repeat(4, 1fr);
    }

    >li>.title {
      margin-bottom: 5px;
      color: var(--color-gray-40);
      font-weight: 700;
      line-height: 1.75;

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

    >li>.list-nav-category {
      @media (min-width: 897px) {
        grid-template-columns: repeat(1, 1fr);
      }
    }

    >li>.list-nav-category>li>a {
      line-height: 1.6;

      @media (max-width: 896px) {
        padding: 15px 0 14px;
        font-size: 0.8125rem;
        line-height: 1.46154;
      }

      &::after {
        right: 10px;

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

  /* ---------------------------------------------
  .list-nav-button
------------------------------------------------ */
  .list-nav-button {
    display: grid;
    margin-top: 60px;
    gap: 30px;
    grid-template-columns: repeat(3, 1fr);

    @media (max-width: 896px) {
      display: flex;
      flex-wrap: wrap;
      margin-top: 36px;
      gap: 15px 30px;
    }

    >li>a {
      position: relative;
      display: inline-block;
      padding-right: 14px;
      font-size: 0.8125rem;
      line-height: 1.46154;

      @media (min-width: 897px) {
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 60px;
        align-items: center;
        padding: 10px 60px 10px 20px;
        border-radius: 5px;
        background-color: var(--color-gray-100);
        color: var(--color-red-30);
        font-size: 0.9375rem;
        font-weight: 500;
        line-height: 1.46667;
        transition: all 300ms ease-out;
      }

      &::before {
        @media (min-width: 897px) {
          position: absolute;
          top: 0;
          right: 60px;
          width: 1px;
          height: 100%;
          background-color: var(--color-gray-70);
          content: "";
        }
      }

      &::after {
        position: absolute;
        top: calc(50% + 1px);
        right: 0;
        width: 0;
        height: 0;
        border-width: 4px 0 4px 7px;
        border-style: solid;
        border-color: transparent transparent transparent var(--color-red-30);
        content: "";
        transform: translateY(-50%);

        @media (min-width: 897px) {
          top: 50%;
          right: 25px;
          transition: border-color 300ms ease-out;
        }
      }

      &:hover {
        @media (min-width: 897px) {
          background-color: var(--color-red-30);
          color: var(--color-gray-100);
        }

        &::after {
          @media (min-width: 897px) {
            border-color: transparent transparent transparent var(--color-gray-100);
          }
        }
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .nav-global
------------------------------------------------ */
  .nav-global {
    display: flex;
    align-items: center;
    background-color: var(--color-gray-100);
    gap: min(1.875vw, 30px);

    @media (max-width: 896px) {
      position: fixed;
      top: 60px;
      left: 0;
      width: 100%;
      height: calc(100dvh - 60px);
      flex-direction: column;
      align-items: flex-start;
      padding: 11px 20px 20px;
      background-color: var(--color-gray-100);
      gap: 30px;
      opacity: 0;
      overflow-y: auto;
      transition: all 300ms ease-out;
      visibility: hidden;
    }

    &[aria-hidden="true"] {
      @media (max-width: 896px) {
        opacity: 1;
        visibility: visible;
      }
    }

    >ul {
      display: flex;
      gap: min(1.875vw, 30px);

      @media (width >=897px) and (width <=1290px) {
        gap: min(1.375vw, 22px);
      }

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

    >ul>li {
      @media (max-width: 896px) {
        border-bottom: 1px solid var(--color-stroke-default);
      }
    }

    >ul>li>a,
    >ul>li>button {
      position: relative;
      display: block;
      font-size: clamp(0.6875rem, 0.97222vw, 0.875rem);
      font-weight: 500;
      transition: all 300ms ease-out;
      white-space: nowrap;

      @media (width >=897px) and (width <=1290px) {
        font-size: clamp(0.625rem, 0.97222vw, 0.875rem);
      }

      @media (max-width: 896px) {
        display: block;
        padding: 18px 0 17px;
        font-size: 1.125rem;
        white-space: normal;
      }
    }

    >ul>li>button {
      display: block;
      width: 100%;
      border: none;
      background: none;
      color: inherit;
      cursor: pointer;
      text-align: left;
    }

    >ul>li:has(.mega-menu[aria-hidden="true"]) {
      @media (max-width: 896px) {
        border-bottom: none;
      }
    }

    >ul>li:has(.mega-menu)>a,
    >ul>li:has(.mega-menu)>button {
      padding-right: min(1vw, 16px);

      @media (max-width: 896px) {
        padding-right: 35px;
      }
    }

    >ul>li:has(.mega-menu)>a::before,
    >ul>li:has(.mega-menu)>button::before {
      @media (max-width: 896px) {
        position: absolute;
        top: 50%;
        right: 16px;
        display: block;
        width: 2px;
        height: 15px;
        border-radius: 2px;
        background-color: var(--color-stroke-brand);
        content: "";
        transform: translateY(-50%);
        transition: all 300ms ease-out;
      }
    }

    >ul>li:has(.mega-menu)>a::after,
    >ul>li:has(.mega-menu)>button::after {
      position: absolute;
      top: 50%;
      right: 0;
      display: block;
      width: 0;
      height: 0;
      border-width: min(0.59322vw, 7px) min(0.42373vw, 5px) 0;
      border-style: solid;
      border-color: var(--color-text-default) transparent transparent transparent;
      content: "";
      transform: translateY(-50%);
      transition: all 300ms ease-out;

      @media (max-width: 896px) {
        right: 10px;
        width: 15px;
        height: 2px;
        border: none;
        border-radius: 2px;
        background-color: var(--color-stroke-brand);
      }
    }

    >ul>li>a:hover,
    >ul>li>button:hover,
    >ul>li>a.current,
    >ul>li>button.current {
      @media (min-width: 897px) {
        color: var(--color-text-brand);
      }
    }

    >ul>li>a::before,
    >ul>li>button::before {
      @media (min-width: 897px) {
        position: absolute;
        bottom: -34px;
        left: 0;
        display: block;
        width: 100%;
        height: 5px;
        background-color: transparent;
        content: "";
        pointer-events: none;
        transition: all 300ms ease-out;
      }

      @media screen and (width < 1025px) {
        bottom: -35px;
      }
    }

    >ul>li>a.current::before,
    >ul>li>button.current::before,
    >ul>li>a:hover::before,
    >ul>li>button:hover::before,
    >ul>li>a[aria-expanded="true"]::before,
    >ul>li>button[aria-expanded="true"]::before {
      @media (min-width: 897px) {
        background-color: var(--color-stroke-brand);
      }
    }

    >ul>li:not(:has(.mega-menu))>a.current {
      @media (max-width: 896px) {
        color: var(--color-stroke-brand);
      }
    }

    >ul>li>a[aria-expanded="true"]::before,
    >ul>li>button[aria-expanded="true"]::before {
      @media (max-width: 896px) {
        opacity: 0;
        transform: translateY(-50%) rotate(90deg);
      }
    }

    >.button {
      display: flex;
      gap: 1px;

      @media (max-width: 896px) {
        width: 100%;
      }
    }

    >.button>a {
      display: flex;
      height: min(4.23729vw, 50px);
      align-items: center;
      justify-content: center;
      color: var(--color-text-light);
      font-size: min(1.18644vw, 0.875rem);
      font-weight: 500;
      padding-inline: min(0.42373vw, 5px);
      transition: all 300ms ease-out;

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

    >.button>a>span {
      position: relative;
      padding-left: min(1.86441vw, 22px);

      @media (max-width: 896px) {
        padding-left: 22px;
      }
    }

    >.button>a>span::before {
      position: absolute;
      top: 50%;
      left: 0;
      width: min(1.52542vw, 18px);
      height: min(1.52542vw, 18px);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      transform: translateY(-50%);

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

    >.button>.download {
      border-radius: 5px 0 0 5px;
      background-color: var(--color-fill-dark);

      @media (min-width: 897px) {
        width: min(12.8125vw, 164px);
      }
    }

    >.button>.download>span::before {
      background-image: url("/assets/images/common/icon-download-01.svg");
    }

    >.button>.download:hover {
      @media (min-width: 897px) {
        background-color: var(--color-neutral-20);
      }
    }

    >.button>.inquiry {
      border-radius: 0 5px 5px 0;
      background-color: var(--color-fill-brand);

      @media (min-width: 897px) {
        width: min(11.5625vw, 148px);
      }
    }

    >.button>.inquiry>span::before {
      background-image: url("/assets/images/common/icon-mail-01.svg");
    }

    >.button>.inquiry:hover {
      @media (min-width: 897px) {
        background-color: var(--color-primary-50);
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .pagination
------------------------------------------------ */
  .pagination {
    margin-top: 50px;

    @media (max-width: 896px) {
      margin-top: 30px;
    }

    >.desktop {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

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

    >.desktop>li {
      display: flex;
    }

    >.desktop>li>a,
    >.desktop>li>span {
      display: flex;
      min-width: 60px;
      height: 60px;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      border: 1px solid var(--color-text-default);
      border-radius: 5px;
      background-color: var(--color-fill-light);
      color: var(--color-text-default);
      font-family: var(--second-family);
      font-size: 1.125rem;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    >.desktop>li:has([data-disabled="true"]) {
      display: none;
    }

    >.desktop>li>a:hover {
      @media (min-width: 897px) {
        border-color: var(--color-fill-dark);
        background-color: var(--color-fill-dark);
        color: var(--color-text-light);
      }
    }

    >.desktop>li>.dots {
      position: relative;
      display: flex;
      overflow: hidden;
      min-width: 40px;
      height: 60px;
      align-items: center;
      justify-content: center;
      border: none;
      color: var(--color-text-subtle);
      cursor: default;
      text-indent: -99999999px;
      white-space: nowrap;
    }

    >.desktop>li>.dots::after {
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: 39px;
      height: 5px;
      background: url("/assets/images/common/bg-pagination-dot.svg") center no-repeat;
      background-size: contain;
      content: "";
      transform: translate(-50%, -50%);
    }

    >.desktop>li>[aria-current="page"] {
      border-color: var(--color-fill-dark);
      background-color: var(--color-fill-dark);
      color: var(--color-text-light);
      cursor: default;
    }

    >.mobile {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;

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

    >.mobile>li {
      display: flex;
      height: 60px;
      align-items: center;
      justify-content: center;
      color: var(--color-text-subtle);
      font-family: var(--second-family);
      font-size: 1.125rem;
      font-weight: 500;
    }

    >.mobile>li:has(a.arrow-next) {
      position: absolute;
      right: 20px;
    }

    >.mobile>li:has(a.arrow-prev) {
      position: absolute;
      left: 20px;
    }

    >.mobile>li:has([data-disabled="true"]) {
      display: none;
    }
  }

  .arrow-prev,
  .arrow-next {
    position: relative;
    display: flex;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--color-text-default);
    border-radius: 5px;
    background-color: var(--color-fill-light);
    color: var(--color-text-default);
    font-family: var(--second-family);
    font-size: 1.125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .arrow-prev::after,
  .arrow-next::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    border-width: 4px 0 4px 8px;
    border-style: solid;
    border-color: transparent transparent transparent var(--color-text-default);
    content: "";
    transform: translate(-50%, -50%);
  }

  .arrow-prev::after {
    border-width: 4px 8px 4px 0;
    border-color: transparent var(--color-text-default) transparent transparent;
  }

  .arrow-prev:hover::after {
    @media (min-width: 897px) {
      border-color: transparent var(--color-text-light) transparent transparent;
    }
  }

  .arrow-next:hover::after {
    @media (min-width: 897px) {
      border-color: transparent transparent transparent var(--color-text-light);
    }
  }
}

@layer components {
  section {
    margin-top: 120px;

    @media (max-width: 896px) {
      margin-top: 80px;
    }

    &:first-child {
      margin-top: 0;
    }

    &[data-section-variant="small"] {
      margin-top: 60px;
    }
  }
}

@layer components {
  .table-primary {
    --mt-pc: 50px;
    --mt-sp: 46px;

    margin-top: var(--mt-pc);

    @media (max-width: 896px) {
      margin-top: var(--mt-sp);
    }

    &:first-child {
      margin-top: 0;
    }

    >table {
      width: 100%;

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

    >table>tbody {
      @media (max-width: 896px) {
        display: block;
      }
    }

    >table>tbody>tr {
      @media (max-width: 896px) {
        display: block;
      }
    }

    >table>tbody>tr:first-child>th,
    >table>tbody>tr:first-child>td {
      padding-top: 0;
    }

    >table>tbody>tr:first-child>th {
      @media (max-width: 896px) {
        padding-top: 0;
      }
    }

    >table>tbody>tr>th,
    >table>tbody>tr>td {
      border-bottom: 1px solid var(--color-gray-75);
      color: var(--color-text-default);
      font-size: 1rem;
      line-height: 1.75;
      padding-block: 15px 17px;

      @media (max-width: 896px) {
        display: block;
        width: 100%;
        padding-block: 0 17px;
      }
    }

    >table>tbody>tr>th {
      width: 115px;
      border-right: 10px solid var(--color-stroke-light);
      font-weight: 700;
      text-align: left;

      @media (max-width: 896px) {
        width: 100%;
        border: none;
        padding-block: 15px 5px;
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .tabs
------------------------------------------------ */
  .tabs {
    margin-bottom: 50px;

    @media (max-width: 896px) {
      margin-bottom: 30px;
    }

    >.inner {
      width: 100%;
      max-width: var(--max-width-xl);
      margin: 0 auto;
      padding-inline: 20px;
    }
  }

  /* ---------------------------------------------
  .tabs-list
------------------------------------------------ */
  .tabs-list {
    display: flex;
    overflow: hidden;
    padding-left: 0;
    border: 1px solid var(--color-stroke-brand);
    border-radius: 5px;
    list-style: none;

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

    >li {
      flex: 1;

      @media (max-width: 896px) {
        position: relative;
        width: 50%;
        flex: none;
      }
    }

    >li::after {
      @media (max-width: 896px) {
        position: absolute;
        bottom: -1px;
        left: 0;
        display: block;
        width: 100%;
        height: 1px;
        background-color: var(--color-stroke-brand);
        content: "";
      }
    }

    >li::before {
      @media (max-width: 896px) {
        position: absolute;
        top: 0;
        right: -1px;
        display: block;
        width: 1px;
        height: 100%;
        background-color: var(--color-stroke-brand);
        content: "";
      }
    }

    >li:not(:last-child)>a {
      @media (min-width: 897px) {
        border-right: 1px solid var(--color-stroke-brand);
      }
    }

    >li:first-child {
      @media (max-width: 896px) {
        width: 100%;
      }
    }

    >li>a {
      display: flex;
      width: 101%;
      height: 100%;
      align-items: center;
      justify-content: center;
      padding: 9px 20px;
      gap: 10px;
      text-decoration: none;
      transition: all 300ms ease-out;

      @media (max-width: 896px) {
        width: 100%;
        min-height: 49px;
        padding: 5px 15px;
      }
    }

    >li>a>i {
      display: block;
      width: 55px;
      height: 55px;
      background-color: var(--color-fill-brand);
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
      transition: all 300ms ease-out;

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

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

    >li>a>span {
      color: var(--color-text-default);
      font-size: 1.125rem;
      transition: all 300ms ease-out;

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

    >li>a[data-tabs-current="true"] {
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      background-color: var(--color-fill-brand);
      color: var(--color-text-light);
    }

    >li>a[data-tabs-current="true"]>i {
      background-color: var(--color-text-light);
    }

    >li>a[data-tabs-current="true"]>span {
      color: var(--color-text-light);
    }

    >li>a:hover {
      @media (min-width: 897px) {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: var(--color-fill-brand);
        color: var(--color-text-light);
      }
    }

    >li>a:hover>i {
      @media (min-width: 897px) {
        background-color: var(--color-text-light);
      }
    }

    >li>a:hover>span {
      @media (min-width: 897px) {
        color: var(--color-text-light);
      }
    }

    &[data-tabs-variant="no-icon"] {
      >li:first-child {
        @media (max-width: 896px) {
          width: 50%;
        }
      }

      >li:nth-child(2) {
        @media (max-width: 896px) {
          border-top: none;
        }
      }

      >li>a {
        @media (max-width: 896px) {
          min-height: 50px;
          border-right: none;
        }

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

    &[data-type-variant="tab"] {
      >li>button {
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 63px;
        align-items: center;
        justify-content: center;
        background-color: var(--color-gray-100);
        color: var(--color-gray-5);
        cursor: pointer;
        font-size: 1.125rem;
        transition: all 300ms ease-out;

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

        &:hover {
          @media (min-width: 897px) {
            background-color: var(--color-red-30);
            color: var(--color-gray-100);
          }
        }

        &[aria-selected="true"] {
          background-color: var(--color-red-30);
          color: var(--color-gray-100);
        }
      }
    }

    &[data-size-variant="small"] {

      >li>button,
      >li>a {
        min-height: 65px;
        padding: 9px 5px;
        font-size: 1.25rem;
        line-height: 1.45;

        @media (max-width: 896px) {
          min-height: 46px;
          font-size: 0.75rem;
          line-height: 1.334;
          padding-block: 5px;
        }
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .tag-blog
------------------------------------------------ */
  .tag-blog {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 19px;
    border: 1px solid var(--color-stroke-brand);
    border-radius: 100px;
    text-decoration: none;
    transition: all 300ms ease-out;

    >span {
      color: var(--color-text-brand);
      font-size: 1rem;
      transition: all 300ms ease-out;

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

    &:hover {
      @media (min-width: 897px) {
        border-color: var(--color-fill-brand);
        background-color: var(--color-fill-brand);

        >span {
          color: var(--color-text-light);
        }
      }
    }

    &[data-color-variant="black"] {
      padding: 9px 14px;
      border-color: var(--color-gray-100);
      background-color: var(--color-gray-100);

      >span {
        color: var(--color-text-default);
      }

      @media (max-width: 896px) {
        display: inline;
        padding: 0;
        border-color: transparent;
        background-color: transparent;

        >span {
          font-size: 0.875rem;
          line-height: 1.86;
        }

        &:not(:last-child)::after {
          content: "\2004/\2004";
        }
      }
    }

    &[data-color-variant="black"]:is(a):hover {
      @media (min-width: 897px) {
        border-color: var(--color-stroke-brand);
        background-color: var(--color-stroke-brand);

        >span {
          color: var(--color-text-light);
        }
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .text-contact
------------------------------------------------ */
  .text-contact {
    color: var(--color-text-default);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.88;

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

    >a {
      color: var(--color-text-brand);
      text-decoration: underline;
      text-decoration-color: var(--color-text-brand);
    }

    >strong {
      font-weight: 700;
    }

    &:has(> strong) {
      margin-top: 2em;
    }
  }

  /* ---------------------------------------------
  .text-normal
------------------------------------------------ */
  .text-normal {
    --mt-pc: 50px;
    --mt-sp: 30px;

    margin-top: var(--mt-pc);
    color: var(--color-text-default);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;

    @media (max-width: 896px) {
      margin-top: var(--mt-sp);
    }

    &[data-align-variant="right"] {
      text-align: right;
    }

    &:first-child {
      margin-top: 0;
    }

    +.heading-05 {
      margin-top: 30px;
    }
  }

  /* ---------------------------------------------
  .text-small
------------------------------------------------ */
  .text-small {
    --mt-pc: 50px;
    --mt-sp: 30px;

    margin-top: var(--mt-pc);
    color: var(--color-text-default);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.86;

    @media (max-width: 896px) {
      margin-top: var(--mt-sp);
    }

    &:first-child {
      margin-top: 0;
    }
  }

  /* ---------------------------------------------
  .text-required
------------------------------------------------ */
  .text-required,
  .wpcf7-not-valid-tip {
    margin-top: 4px;
    color: var(--color-text-danger) !important;
    font-size: 0.75rem !important;
    line-height: 2.5;
  }

  /* ---------------------------------------------
  .text-note
------------------------------------------------ */
  .text-note {
    margin-top: 10px;
    color: var(--color-text-default);
    font-size: 0.75rem;
    line-height: 2.33;

    &[data-align-variant="center"] {
      text-align: center;
    }

    &[data-align-variant="right"] {
      text-align: right;
    }
  }

  /* ---------------------------------------------
  .text-intro
------------------------------------------------ */
  .text-intro {
    color: var(--color-text-default);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.9;

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