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

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

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

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

@layer components {

  /* ---------------------------------------------
  .box-button-detail
------------------------------------------------ */
  .box-button-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 1px 0;
    border-style: solid;
    border-color: var(--color-gray-light);
    padding-block: 5rem;

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

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

  /* ---------------------------------------------
  .box-related-articles
------------------------------------------------ */
  .box-related-articles {
    display: grid;
    align-items: flex-start;
    gap: 2.4375rem min(7.84722vw, 7.0625rem);
    margin-block-start: 5rem;

    @media (min-width: 897px) {
      grid-template-columns: auto 1fr;
      margin-block-start: 10rem;
    }
  }

  /* ---------------------------------------------
  .box-interview
------------------------------------------------ */
  .box-interview {
    display: grid;
    row-gap: 4.875rem;

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

    >.item {
      display: grid;
      row-gap: 1.3125rem;

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

    >.item>.heading {
      font-size: 1.5rem;
      font-weight: 700;

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

    >.item>.body {
      display: grid;
      row-gap: 3.75rem;

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

    >.item>.body>.box>.title {
      position: relative;
      color: var(--color-primary);
      font-weight: 700;
      line-height: 1.75;
      margin-block-end: 1.25rem;
      padding-inline-start: 3.75rem;

      @media (min-width: 897px) {
        line-height: 2;
        margin-block-end: 2rem;
        padding-inline-start: 6.3125rem;
      }

      &::before {
        position: absolute;
        top: 0.875rem;
        left: 0;
        width: 2.8125rem;
        height: 1px;
        background-color: var(--color-primary);
        content: "";

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

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

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

    >.item>.body>.box>picture {
      display: block;
      width: 100%;
      margin-block: 4.875rem 0.125rem;

      @media (min-width: 897px) {
        max-width: 48.125rem;
        margin: 4.75rem auto 0.25rem;
      }
    }

    >.item>.body>.box>picture>img {
      overflow: hidden;
      width: 100%;
      height: auto;
      border-radius: 2.5rem;

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

@layer components {

  /* ---------------------------------------------
  .breadcrumb
------------------------------------------------ */
  .breadcrumb {
    position: relative;
    z-index: 10;
    width: 100%;
    margin-inline: auto;
    max-inline-size: var(--max-width-xxl);
    padding-block: 1.5rem;
    padding-inline: min(2.5rem, 3.22581dvw);

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

    >ul {
      display: flex;
      overflow: hidden;
    }

    >ul>li {
      display: flex;
      flex-shrink: 0;
    }

    >ul>li:last-child {
      flex-shrink: 1;
    }

    >ul>li:not(:first-child)::before {
      color: var(--color-gray-medium);
      content: "/";
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.41667;
      margin-inline: 1rem;
    }

    >ul>li> :where(a, span) {
      display: block;
      color: var(--color-gray);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.41667;
      white-space: nowrap;
    }

    >ul>li>a {
      color: var(--color-primary);

      @media (min-width: 897px) {
        background-image: linear-gradient(90deg, var(--color-primary), var(--color-primary));
        background-position: 0 100%;
        background-repeat: no-repeat;
        background-size: 0 1px;
        transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) var(--transition-duration);
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          background-size: 100% 1px;
        }
      }
    }

    >ul>li:last-child>span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &[data-style-variant="transparent"] {
      >ul>li>a {
        color: var(--color-white);

        @media (min-width: 897px) {
          background-image: linear-gradient(90deg, var(--color-white), var(--color-white));
        }
      }

      >ul>li>span {
        color: oklch(from var(--color-white) l c h / 70%);
      }

      >ul>li::before {
        color: var(--color-white);
      }

      >ul>li:has(span)::before {
        color: oklch(from var(--color-white) l c h / 70%);
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .button
------------------------------------------------ */
  .button {
    --button-main-color: var(--color-primary);
    --button-main-color-hover: var(--color-secondary);
    --button-main-border-color: var(--color-primary);

    position: relative;
    display: flex;
    width: 100%;
    max-width: 14.1875rem;
    min-height: 3.5rem;
    align-items: center;
    border: 1px solid var(--button-main-border-color);
    border-radius: 2rem;
    background-color: var(--button-main-color);
    color: var(--color-white);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.53846;
    padding-block: 0.625rem;
    padding-inline: 1.4375rem 3.125rem;

    @media (min-width: 897px) {
      max-width: 16.875rem;
      min-height: 4rem;
      font-size: 0.8125rem;
      line-height: 1.53846;
      padding-inline: 1.9375rem 3.125rem;
    }

    &::before {
      position: absolute;
      top: 50%;
      right: 2.625rem;
      width: 1px;
      height: calc(100% - 1.875rem);
      background-color: oklch(from var(--color-white) l c h / 20%);
      content: "";
      transform: translateY(-50%) translateZ(0);
      transition: background-color var(--transition-duration) var(--transition-timing-function);
    }

    >i {
      position: absolute;
      top: 50%;
      right: 0.9375rem;
      overflow: hidden;
      width: 0.75rem;
      height: 0.75rem;
      transform: translateY(-50%);

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

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

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

      &:hover {
        background-color: var(--button-main-color-hover);

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

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

        &[target="_blank"] {
          >i::after {
            opacity: 1;
            transform: none;
          }
        }
      }
    }

    &[data-button-variant="secondary"] {
      --button-main-color: var(--color-white);
      --button-main-color-hover: var(--color-gray-hover);
      --button-main-border-color: var(--color-white);

      color: var(--color-primary);

      &::before {
        background-color: oklch(from var(--color-primary) l c h / 20%);
      }

      >i::after {
        background-image: url("/assets/images/common/icon-arrow-right-03.svg");
      }

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

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          border-color: var(--color-gray-hover);

          &::before {
            background-color: oklch(from var(--color-secondary) l c h / 20%);
          }

          >i::before,
          >i::after {
            background-image: url("/assets/images/common/icon-arrow-right-03.svg");
          }

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

    &[data-button-variant="outline"] {
      --button-main-color: var(--color-white);
      --button-main-border-color: var(--color-gray-light);

      color: var(--color-primary);

      &::before {
        background-color: oklch(from var(--color-primary) l c h / 20%);
      }

      >i::after {
        background-image: url("/assets/images/common/icon-arrow-right-03.svg");
      }

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

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          border-color: var(--color-secondary);
          color: var(--color-white);

          &::before {
            background-color: oklch(from var(--color-white) l c h / 20%);
          }

          >i::after {
            background-image: url("/assets/images/common/icon-arrow-right-03.svg");
          }

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

    &[data-button-variant="light-gray"] {
      --button-main-color: var(--color-gray-lighter);
      --button-main-color-hover: var(--color-primary);
      --button-main-border-color: var(--color-gray-lighter);

      border-radius: 0.625rem;
      color: var(--color-black);
      font-size: 1.125rem;
      line-height: 1.44444;
      padding-inline-start: 1.4375rem;

      @media (max-width: 896px) {
        min-height: 3rem;
        font-size: 1rem;
        line-height: 1.5;
        padding-inline-start: 0.9375rem;
      }

      &::before {
        background-color: oklch(from var(--color-primary) l c h / 20%);
      }

      >i::after {
        background-image: url("/assets/images/common/icon-arrow-right-03.svg");
      }

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

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          border-color: var(--color-primary);
          color: var(--color-white);

          &::before {
            background-color: oklch(from var(--color-white) l c h / 20%);
          }

          >i::after {
            background-image: url("/assets/images/common/icon-arrow-right-03.svg");
          }

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

    &[data-button-variant="gray"] {
      --button-main-color: var(--color-gray);
      --button-main-color-hover: var(--color-gray-dark);
      --button-main-border-color: var(--color-gray);
    }

    &[data-button-variant="transparent-down"] {
      --button-main-color: var(--color-white);
      --button-main-border-color: var(--color-white);

      background-color: transparent;
      color: var(--color-white);

      &::before {
        background-color: oklch(from var(--color-white) l c h / 20%);
      }

      &::after {
        position: absolute;
        top: 50%;
        right: 0.9375rem;
        width: 1rem;
        height: 1rem;
        background-color: var(--color-white);
        content: "";
        -webkit-mask-image: url("/assets/images/common/icon-arrow-down-01.svg");
        mask-image: url("/assets/images/common/icon-arrow-down-01.svg");
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        transform: translateY(-50%);
      }

      >i {
        display: none;
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          opacity: 0.7;
        }
      }
    }

    &[data-button-variant="header"] {
      max-inline-size: 227px;

      @media (min-width: 897px) {
        min-height: min(4rem, 5.16129dvw);
        padding: min(0.625rem, 0.80645dvw) min(3.125rem, 4.03226dvw) min(0.625rem, 0.80645dvw) min(1.9375rem, 2.5dvw);
        font-size: clamp(0.6875rem, 1.04839dvw, 0.8125rem);
        max-inline-size: min(200px, 16.12903dvw);
      }

      &::before {
        @media (min-width: 897px) {
          right: min(2.625rem, 3.3871dvw);
        }
      }

      >i {
        @media (min-width: 897px) {
          right: min(0.9375rem, 1.20968dvw);
        }
      }

      [data-style-variant="transparent"] & {
        @media (min-width: 897px) {
          --button-main-color: var(--color-white);
          --button-main-color-hover: var(--color-secondary);
          --button-main-border-color: var(--color-white);

          color: var(--color-primary);
        }

        &::before {
          @media (min-width: 897px) {
            background-color: oklch(from var(--color-primary) l c h / 20%);
          }
        }

        >i::after {
          @media (min-width: 897px) {
            background-image: url("/assets/images/common/icon-arrow-right-03.svg");
          }
        }

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            border-color: var(--color-secondary);
            color: var(--color-white);

            &::before {
              background-color: oklch(from var(--color-white) l c h / 20%);
            }
          }
        }
      }
    }

    &[data-button-variant="detail-lg"] {
      max-inline-size: -moz-fit-content;
      max-inline-size: fit-content;
      padding-inline-end: 4rem;

      @media (min-width: 897px) {
        min-height: 5rem;
        border-radius: 6.25rem;
        font-size: 1.0625rem;
        line-height: 1.52941;
        max-inline-size: 470px;
        padding-inline: 2.4375rem 4.0625rem;
      }

      &::before {
        @media (min-width: 897px) {
          right: 3.625rem;
          height: calc(100% - 2.875rem);
        }
      }

      >i {
        @media (min-width: 897px) {
          right: 1.4375rem;
        }
      }
    }

    &[data-button-variant="transparent"] {
      --button-main-color: var(--color-white);
      --button-main-border-color: var(--color-white);

      background-color: transparent;
      color: var(--color-white);

      &::before {
        background-color: oklch(from var(--color-white) l c h / 20%);
      }
    }

    &[target="_blank"] {
      >i {
        &::before {
          display: none;
        }

        &::after {
          background-image: url("/assets/images/common/icon-new-window-03.svg");
        }
      }
    }
  }

  /* ---------------------------------------------
  .social-share
------------------------------------------------ */
  .social-share {
    display: flex;
    height: 1.5rem;
    align-items: flex-start;
    justify-content: center;
    gap: 0.625rem;
    margin-block: 2.5rem;

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

    ul {
      position: relative;
      width: 11.5rem;
    }

    >ul>li {
      position: absolute;
      top: 0;
      width: 8.125rem;

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

        &:hover {
          opacity: 0.7;
        }
      }
    }

    >ul>li.x {
      left: calc(50% + 0.9375rem);
      width: 4.8125rem;
    }

    >ul>li.facebook {
      top: 0.25rem;
      left: calc(50% - 4.875rem);
    }

    >ul>li.facebook>a {
      display: flex;
      width: 5.1875rem;
      height: 1.25rem;
      align-items: center;
      justify-content: center;
      border-radius: 0.1875rem;
      background-color: rgb(45 100 246);
      color: var(--color-white);
      font-size: 0.75rem;
      gap: 0.3125rem;
      line-height: 1;
      text-decoration: none;

      &::before {
        display: inline-block;
        width: 0.75rem;
        height: 0.75rem;
        background-image: url("/assets/images/common/icon-facebook.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
      }
    }
  }

  /* ---------------------------------------------
  .button-close
------------------------------------------------ */
  .button-close {
    display: flex;
    width: 100%;
    max-width: 13.75rem;
    min-height: 3.5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    border-radius: 1.75rem;
    background-color: var(--color-white);
    color: var(--color-gray-dark);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.53846;

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

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

    &[data-close-variant="gray"] {
      border-radius: 6.25rem;
      background-color: var(--color-gray);
      color: var(--color-white);

      @media (min-width: 897px) {
        max-width: 10.625rem;
        min-height: 4rem;
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          background-color: var(--color-gray-dark);
        }
      }
    }
  }

  /* ---------------------------------------------
  .button-previous & .button-next
------------------------------------------------ */
  .button-previous,
  .button-next {
    position: relative;
    display: block;
    width: 4rem;
    height: 4rem;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    background-color: var(--color-white);
    cursor: pointer;

    &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-style: solid;
      content: "";
      transform: translate(-50%, -50%);
      transition: border-color var(--transition-duration) var(--transition-timing-function);
    }

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

      &:not([aria-disabled="true"]):hover {
        background-color: var(--color-primary);
      }
    }

    &[aria-disabled="true"] {
      cursor: default;
      opacity: 0.2;
    }
  }

  .button-previous {
    &::before {
      border-width: 5px 6px 5px 0;
      border-color: transparent var(--color-primary) transparent transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:not([aria-disabled="true"]):hover::before {
        border-color: transparent var(--color-white) transparent transparent;
      }
    }
  }

  .button-next {
    &::before {
      border-width: 5px 0 5px 6px;
      border-color: transparent transparent transparent var(--color-primary);
    }

    @media (hover: hover) and (pointer: fine) {
      &:not([aria-disabled="true"]):hover::before {
        border-color: transparent transparent transparent var(--color-white);
      }
    }
  }

  #cn-notice-text {
    font-size: 0.8125rem;
  }

  #cn-notice-text a {
    font-size: 0.8125rem;
  }

  #cn-accept-cookie {
    border-radius: 0.1875rem !important;
  }
}

@layer components {

  /* ---------------------------------------------
  .card-article
------------------------------------------------ */
  .card-article {
    display: flex;
    flex-direction: column;
    gap: 1.5rem 1.875rem;

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        >.detail>.title {
          color: var(--color-primary);
        }

        >.image>img {
          transform: scale(1.07);
        }
      }
    }

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

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

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

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

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

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

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

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

    >.detail>.title {
      color: var(--color-gray-dark);
      font-size: 1rem;
      font-weight: bold;
      line-height: 1.75;
      transition: color var(--transition-duration) var(--transition-timing-function);
    }

    &[data-card-variant="white"] {

      >.detail>.meta>time,
      >.detail>.meta>.category,
      >.detail>.title {
        color: var(--color-white);
      }

      >.detail>.tags>li {
        padding: 1px 0.1875rem;
        border: 1px solid var(--color-white);
        background-color: transparent;
        color: var(--color-white);
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .form-checkbox-small
------------------------------------------------ */
  .form-checkbox-small {
    position: relative;
    color: var(--color-gray-dark);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 2.14286;

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

    >input[type="checkbox"] {
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      opacity: 0;

      &:checked+label::before {
        border-color: var(--color-primary);
        background-color: var(--color-primary);
      }

      &:checked+label::after {
        opacity: 1;
      }

      &:focus-visible+label::before {
        outline: 1px solid var(--color-gray-dark);
        outline-offset: 1px;
      }
    }

    >label {
      position: relative;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      padding-inline-start: 1.25rem;

      &::before,
      &::after {
        position: absolute;
        top: 50%;
        left: 0;
        width: 0.875rem;
        height: 0.875rem;
        box-sizing: border-box;
        border-radius: 0.25rem;
        content: "";
        transform: translateY(-50%);
      }

      &::before {
        border: 2px solid var(--color-checkbox-border);
        background-color: transparent;
        transition: all var(--transition-duration) var(--transition-timing-function);
      }

      &::after {
        background-image: url("/assets/images/common/icon-check-01.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0;
        transition: opacity var(--transition-duration) var(--transition-timing-function);
      }
    }

    >label>span {
      @media (min-width: 897px) {
        transition: opacity var(--transition-duration) var(--transition-timing-function);
      }
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover>label>span {
        opacity: 0.7;
      }
    }
  }

  /* ---------------------------------------------
  .form-contact
------------------------------------------------ */
  .form-contact {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;

    >.intro {
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.5;
    }

    >form,
    form.wpcf7-form {
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
    }

    >.confirmation,
    .wpcf7.js.cf7ac-active-confirmation .confirmation {
      display: flex;
      flex-direction: column;
      gap: 2.375rem;
      margin-block-start: 1.0625rem;

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

    > :where(form, .confirmation)>.form-group,
    :where(form.wpcf7-form, .wpcf7.js.cf7ac-active-confirmation .confirmation) .form-group {
      display: grid;
      align-items: start;
      gap: 0.375rem;

      @media (min-width: 897px) {
        gap: 0.625rem;
        grid-template-columns: 14rem 1fr;
      }

      >.text {
        color: var(--color-gray);
        font-size: 1rem;
        font-weight: 500;
        line-height: 2;
        word-break: break-all;

        @media (max-width: 896px) {
          letter-spacing: 0.1em;
          line-height: 1.75;
          margin-inline-start: 0.875rem;
        }
      }
    }

    > :where(.confirmation)>.form-group {
      @media (min-width: 897px) {
        gap: 0.625rem;
        grid-template-columns: 11.875rem 1fr;
      }

      >.heading-border-left {
        @media (min-width: 897px) {
          margin-block-start: 0.25rem;
        }
      }
    }

    > :where(.confirmation)>.form-submit {
      margin-block-start: 2.25rem;

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

    > :where(form, .summarize)>.form-group-policy,
    :where(form.wpcf7-form) .form-group-policy {
      display: flex;
      margin-block-start: -0.75rem;

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

      >.form-label>.text>a[href] {
        color: var(--color-primary);
        text-decoration: underline;

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

    .cf7ac-active-confirmation .step-02 {
      display: none;
    }
  }

  /* ---------------------------------------------
  .form-label
------------------------------------------------ */
  .form-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

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

    >.required {
      color: var(--color-red);
      font-size: 0.75rem;
      font-weight: 700;
      line-height: 1.41667;
    }

    &:has(+ .form-input, + .form-select, + .form-textarea),
    &:has(+ .wpcf7-form-control-wrap .form-input, + .wpcf7-form-control-wrap .form-select, + .wpcf7-form-control-wrap .form-textarea) {
      @media (min-width: 897px) {
        margin-block-start: 1.25rem;
      }
    }
  }

  /* ---------------------------------------------
  .form-input, .form-select, .form-textarea
------------------------------------------------ */
  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    padding: 1.1875rem 0.9375rem;
    border: 1px solid var(--color-gray-lighter);
    border-radius: 0.625rem;
    background-color: var(--color-gray-lighter);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color var(--transition-duration) var(--transition-timing-function),
      background-color var(--transition-duration) var(--transition-timing-function);

    &:focus {
      border-color: var(--color-primary);
      outline: none;
    }
  }

  .form-input,
  .form-textarea {
    &::-moz-placeholder {
      color: var(--color-gray);
    }

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

  .form-textarea {
    min-height: 12.5rem;
    resize: none;
  }

  .form-select {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("/assets/images/common/icon-chevron-down-01.svg");
    background-position: right 16px center;
    background-repeat: no-repeat;
    cursor: pointer;
    padding-inline-end: 2.5rem;

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

  /* ---------------------------------------------
  .form-checkbox
------------------------------------------------ */
  .form-checkbox {
    display: flex;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.75;

    >input[type="checkbox"],
    .wpcf7-acceptance input[type="checkbox"] {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
      border-radius: 0.25rem;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: var(--color-gray-lighter);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      cursor: pointer;
      margin-block-start: 0.4375rem;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      transition: background var(--transition-duration) var(--transition-timing-function);
      vertical-align: top;

      &:checked {
        background-color: var(--color-primary);
        background-image: url("/assets/images/common/icon-check-02.svg");
        background-size: 0.75rem 0.5rem;
      }
    }

    >label {
      padding-inline-start: 1rem;
    }

    >label>span>a,
    .wpcf7-acceptance label span a {
      color: var(--color-primary);
      text-decoration: underline;

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

    .wpcf7-acceptance .wpcf7-list-item {
      margin-inline-start: 0 !important;
    }

    .wpcf7-acceptance .wpcf7-list-item>label>span {
      padding-inline-start: 1rem;
    }
  }

  /* ---------------------------------------------
  .form-submit
------------------------------------------------ */
  .form-submit {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 1.375rem;

    @media (min-width: 897px) {
      align-items: flex-start;
      margin-block-start: 2.1875rem;
      margin-inline-start: 14.625rem;
    }

    &.step-01 {
      display: none;
    }

    button:where(:disabled) {
      border-color: var(--color-gray-light);
      background-color: var(--color-gray-light);
      cursor: not-allowed;
      pointer-events: none;
    }

    >a {
      color: var(--color-primary);
      font-weight: 500;
      text-decoration: underline;

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

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

    &[data-align-variant="center"] {
      align-items: center;
      margin-inline-start: 0;
    }
  }

  .wpcf7 form .wpcf7-response-output {
    display: none !important;
    border-radius: 0.25rem !important;
  }

  .wpcf7 form.invalid .wpcf7-response-output {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    color: #dc3232 !important;
    font-size: 1rem !important;
    font-weight: normal !important;
    text-align: center;
  }

  .wpcf7 form[data-status="init"] .wpcf7-not-valid-tip {
    display: none;
  }
}

@layer components {

  /* ---------------------------------------------
  .heading-group-underline
------------------------------------------------ */
  .heading-group-underline {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block-end: 1.5625rem;

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

    &::after {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 2.5rem;
      height: 1px;
      background-color: var(--color-primary);
      content: "";

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

    >.title {
      color: var(--color-primary);
      font-family: var(--font-family-montserrat);
      font-size: 1.75rem;
      font-weight: 500;
      line-height: 1.21429;

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

    >.sub {
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.42857;

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

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

      &::after {
        @media (min-width: 897px) {
          left: 50%;
          transform: translateX(-50%);
        }
      }

      >.title {
        @media (min-width: 897px) {
          font-size: 2rem;
          line-height: 1.21875;
        }
      }
    }

    &[data-heading-variant="sp-no-border"] {
      @media (max-width: 896px) {
        padding-block-end: 0;
      }

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

  /* ---------------------------------------------
  .heading-border-left
------------------------------------------------ */
  .heading-border-left {
    position: relative;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    padding-inline-start: 0.875rem;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 0.25rem;
      height: 100%;
      border-radius: 0.125rem;
      background-color: var(--color-primary);
      content: "";
    }

    &[data-color-variant="blue"] {
      color: var(--color-primary);
    }
  }

  /* ---------------------------------------------
  .heading-icon
------------------------------------------------ */
  .heading-icon {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 2px solid var(--color-gray-light);
    -moz-column-gap: 0.75rem;
    column-gap: 0.75rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.42857;
    margin-block-end: 2.5rem;
    padding-block-end: 0.625rem;

    @media (min-width: 897px) {
      -moz-column-gap: 1rem;
      column-gap: 1rem;
      font-size: 2.5rem;
      line-height: 1.45;
      margin-block-end: 2.5rem;
      padding-block-end: 0.5rem;
    }

    &::after {
      position: absolute;
      bottom: -0.125rem;
      left: 0;
      width: 100%;
      max-width: 9.5rem;
      height: 0.125rem;
      background-color: var(--color-secondary);
      content: "";

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

    >i {
      display: block;
      width: 3.5rem;
      height: 3.5rem;

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

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

    >span {
      flex: 1;
      padding-block-start: 0.875rem;

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

    &[data-color-variant="medium-blue"] {
      &::after {
        background-color: var(--color-primary);
      }
    }

    &[data-color-variant="light-blue"] {
      &::after {
        background-color: var(--color-blue-01);
      }
    }
  }

  /* ---------------------------------------------
  .heading-top-line
------------------------------------------------ */
  .heading-top-line {
    position: relative;
    padding-block-start: 1rem;

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

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 3.5rem;
      height: 0.25rem;
      border-radius: 0.1875rem;
      background-color: var(--color-primary);
      content: "";

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

    >.title {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.4584;

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

    >.sub {
      color: var(--color-primary);
      font-family: var(--font-family-montserrat);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.25;
      margin-block-start: 0.375rem;

      @media (min-width: 897px) {
        font-size: 1rem;
        line-height: 1.1875;
        margin-block-start: 0.5625rem;
      }
    }

    &[data-color-variant="white"] {
      &::before {
        background-color: var(--color-white);
      }

      >.title,
      >.sub {
        color: var(--color-white);
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .hero-heading
------------------------------------------------ */
  .hero-heading {
    position: relative;
    padding-block: 4rem;
    padding-inline: 0.9375rem;

    @media (min-width: 897px) {
      max-width: calc(var(--max-width-xl) + 2.5rem);
      margin-inline: auto;
      padding-block: 5.9375rem 4rem;
      padding-inline: 1.25rem;
    }

    >.title {
      position: relative;
      color: var(--color-primary);
      font-family: var(--font-family-montserrat);
      font-weight: 500;

      &::after {
        position: absolute;
        top: 0.375rem;
        left: calc(-2rem/cos(45deg)/2 + 0.25rem);
        width: calc(2rem/cos(45deg));
        height: 1px;
        background-color: var(--color-primary);
        content: "";
        transform: rotate(-45deg);

        @media (min-width: 897px) {
          top: 1rem;
          left: calc(-6rem/cos(45deg)/2);
          width: calc(6rem/cos(45deg));
        }
      }
    }

    >h1 {
      font-size: 3rem;
      line-height: 1.2084;

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

    >h2 {
      font-size: 3rem;
      line-height: 1.20833;

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

      &.title::after {
        left: calc(-2rem/cos(45deg)/2 + 0.25rem);
        width: calc(2rem/cos(45deg));

        @media (min-width: 897px) {
          top: 0.625rem;
          left: calc(-4rem/cos(45deg)/2);
          width: calc(4rem/cos(45deg));
        }
      }
    }

    >p {
      color: var(--color-gray-dark);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.429;

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

    &[data-border-variant="border"] {
      margin-block-end: 4rem;
      padding-block: 4rem 2.5625rem;

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

      &::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: calc(100% - 1.875rem);
        height: 1px;
        background-color: var(--color-gray-light);
        content: "";
        transform: translateX(-50%);

        @media (min-width: 897px) {
          width: calc(100% - 2.5rem);
        }
      }
    }

    &[data-border-variant="border-pc"] {
      @media (min-width: 897px) {
        margin-block-end: 6rem;
        padding-block: 5.9375rem 4.0625rem;
      }

      &::after {
        @media (min-width: 897px) {
          position: absolute;
          bottom: 0;
          left: 50%;
          width: calc(100% - 2.5rem);
          height: 1px;
          background-color: var(--color-gray-light);
          content: "";
          transform: translateX(-50%);
        }
      }
    }

    &[data-color-variant="white"] {

      >.title,
      >p {
        color: var(--color-white);
      }

      >.title::after {
        background-color: var(--color-white);
      }
    }

    &[data-align-variant="center"] {
      text-align: center;

      >.title {
        display: inline-flex;
      }

      >h2.title::after {
        @media (min-width: 897px) {
          top: 0.25rem;
        }
      }
    }

    &:has(+ .container[data-container-variant="column"]) {
      margin-block-end: 3.75rem;

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

  /* ---------------------------------------------
  .hero-subpage
------------------------------------------------ */
  .hero-subpage {
    position: relative;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--color-gray-light);
    gap: 0.8125rem;
    margin-block-start: 2.375rem;
    padding-block-end: 1.4375rem;

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

    @media (min-width: 897px) {
      gap: 1.4375rem;
      margin-block-start: 5.9375rem;
      padding-block-end: 4.9375rem;
    }

    &[data-subpage-variant="pc-no-border"] {
      @media (max-width: 896px) {
        gap: 1rem;
        margin-block-start: 2.5rem;
      }

      @media (min-width: 897px) {
        border-bottom: 0;
        padding-block-end: 0;
      }
    }

    >.meta {
      display: flex;
      width: -moz-fit-content;
      width: fit-content;
      align-items: center;
      gap: 1rem;

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

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

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

    >.meta>.tags-category {
      flex: 1;
    }

    >.meta>.category {
      position: relative;
      flex: 1;
      color: var(--color-primary);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.41667;
      padding-inline-start: 0.75rem;

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

    >.meta>.category::before {
      position: absolute;
      top: 50%;
      left: 0;
      width: 1px;
      background-color: var(--color-gray-medium);
      block-size: 24px;
      content: "";
      transform: translateY(-50%);

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

    >h1 {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.5;

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

    >.social-share {
      position: absolute;
      margin: 0;

      @media (max-width: 896px) {
        bottom: -2.8125rem;
        left: 0;
      }

      @media (min-width: 897px) {
        top: -0.125rem;
        right: 0;
      }
    }

    >.social-share>ul>li.x {
      @media (max-width: 896px) {
        left: calc(50% + 1px);
      }
    }

    >.social-share>ul>li.facebook {
      @media (max-width: 896px) {
        left: calc(50% - 5.75rem);
      }
    }

    >.social-share>ul>li.facebook>a {
      display: flex;
      width: 5.1875rem;
      height: 1.25rem;
      align-items: center;
      justify-content: center;
      border-radius: 0.1875rem;
      background-color: rgb(45 100 246);
      color: var(--color-white);
      font-size: 0.75rem;
      gap: 0.3125rem;
      line-height: 1;
      text-decoration: none;

      &::before {
        display: inline-block;
        width: 0.75rem;
        height: 0.75rem;
        background-image: url("/assets/images/common/icon-facebook.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
      }
    }

    >.tags {
      margin-block-start: 1rem;

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

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

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

    &::after {
      position: absolute;
      z-index: 1;
      bottom: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 19.44444dvw;
      background: linear-gradient(rgb(from var(--color-gray-light-dark) r g b / 0%) 0%, var(--color-gray-light-dark) 100%);
      content: "";
      opacity: 0.5;

      @media (max-width: 896px) {
        height: 55.46667dvw;
        background: linear-gradient(rgb(from var(--color-primary) r g b / 0%) 0%, var(--color-gray-light-dark) 100%);
      }
    }

    >.box-heading {
      position: absolute;
      z-index: 2;
      bottom: min(3.30579dvw, 2.5rem);
      left: 0;
      width: 100%;

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

    >.box-heading>.hero-heading {
      padding-block: 0;
    }

    >.box-heading>.hero-heading>.title {
      line-height: 1;

      @media (min-width: 897px) {
        font-size: min(7.93388dvw, 6rem);
      }

      &::after {
        top: -1px;

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

    >.box-heading>.hero-heading>p {
      margin-block-start: 0.3125rem;

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

    >picture {
      display: block;
    }

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

    &[data-overlay-variant="dark"] {
      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--color-gray-light-dark);
        content: "";
        opacity: 0.2;
      }
    }
  }


  /* ---------------------------------------------
  .hero-image
------------------------------------------------ */
  .personnel-hero-image {
    position: relative;

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

    &::after {
      @media (max-width: 896px) {
        position: absolute;
        z-index: 1;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 55.46667dvw;
        background: linear-gradient(rgb(from var(--color-primary) r g b / 0%) 0%, var(--color-gray-light-dark) 100%);
        content: "";
        opacity: 0.5;
      }
    }

    >.box-heading {
      position: absolute;
      z-index: 2;
      bottom: min(3.30579dvw, 2.5rem);
      left: 0;
      width: 100%;

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

    >.box-heading>.hero-heading {
      padding-block: 0;
    }

    >.box-heading>.hero-heading>.title {
      line-height: 1;

      @media (min-width: 897px) {
        font-size: min(7.93388dvw, 6rem);
      }

      &::after {
        top: -1px;

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

    >.box-heading>.hero-heading>p {
      margin-block-start: 0.3125rem;

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

    >picture {
      display: block;
    }

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

    &[data-overlay-variant="dark"] {
      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--color-gray-light-dark);
        content: "";
        opacity: 0.2;
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .link-default
------------------------------------------------ */
  .link-default {
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;

    >span {
      @media (min-width: 897px) {
        background-image: linear-gradient(90deg, var(--color-primary), var(--color-primary));
        background-position: 0 100%;
        background-repeat: no-repeat;
        background-size: 0 1px;
        transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) var(--transition-duration);
      }
    }

    &[target="_blank"] {
      &::after {
        position: relative;
        top: -0.1875rem;
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        background: url("/assets/images/common/icon-new-window-02.svg") no-repeat left top / contain;
        content: "";
        margin-inline-start: 0.5rem;
        vertical-align: middle;
      }
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        >span {
          background-size: 100% 1px;
        }
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .list-card-article
------------------------------------------------ */
  .list-card-article {
    display: grid;
    gap: 3.5rem 1.875rem;
    grid-template-columns: repeat(3, 1fr);

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

    &[data-article-variant="row"] {
      gap: 0;
      grid-template-columns: repeat(1, 1fr);

      >li {
        border-top: 1px solid var(--color-gray-light);
        padding-block: 1.4375rem 1.5rem;

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

        &:first-child {
          border-top: none;
          padding-block-start: 0;
        }

        &:last-child {
          padding-block-end: 0;
        }
      }

      >li>.card-article {
        flex-direction: row;
        align-items: flex-start;

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

      >li>.card-article>.image {
        width: 40.328%;
        aspect-ratio: 270 / 152;

        @media (max-width: 896px) {
          width: 34.787%;
          border-radius: 1.25rem;
          aspect-ratio: 120 / 68;
        }
      }

      >li>.card-article>.detail {
        flex: 1;

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

      >li>a>.detail>.meta {
        margin-block-end: 0.5rem;

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

      >li>.card-article>.detail>.title {
        @media (max-width: 896px) {
          font-size: 0.875rem;
          line-height: 1.5;
        }
      }

      >li>.card-article>.detail>.tags {
        @media (max-width: 896px) {
          margin-block-start: 0.4375rem;
        }
      }
    }

    &[data-article-variant="sp-row"] {
      row-gap: 2.875rem;

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

      >li {
        @media (max-width: 896px) {
          border-bottom: 1px solid var(--color-gray-light);
          padding-block: 1.5625rem 1.4375rem;
        }

        &:first-child {
          @media (max-width: 896px) {
            padding-block-start: 0;
          }
        }
      }

      >li>.card-article {
        @media (max-width: 896px) {
          flex-direction: row;
          align-items: flex-start;
          -moz-column-gap: 0.9375rem;
          column-gap: 0.9375rem;
        }
      }

      >li>.card-article>.image {
        @media (max-width: 896px) {
          width: 34.787%;
          border-radius: 1.25rem;
          aspect-ratio: 120 / 67;
        }
      }

      >li>.card-article>.detail {
        @media (max-width: 896px) {
          flex: 1;
        }
      }

      >li>.card-article>.detail>.meta {
        margin-block-end: 0.5rem;

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

      >li>.card-article>.detail>.title {
        @media (max-width: 896px) {
          font-size: 0.875rem;
          line-height: 1.5;
        }
      }
    }
  }

  /* ---------------------------------------------
  .list-control
------------------------------------------------ */
  .list-control {
    >ul {
      position: relative;
      display: grid;
      border-radius: 6.25rem;
      grid-template-columns: repeat(2, 1fr);

      @media (max-width: 896px) {
        overflow: hidden;
        gap: 1px;
      }

      &::before {
        @media (min-width: 897px) {
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          border-radius: 6.25rem;
          background-color: var(--color-gray-lighter);
          content: "";
          inset: 0;
        }
      }
    }

    >ul>li>a,
    >ul>li>button {
      display: flex;
      width: 100%;
      height: 100%;
      min-height: 3rem;
      align-items: center;
      justify-content: center;
      padding: 0.3125rem;
      background-color: var(--color-gray-lighter);
      color: var(--color-gray);
      cursor: pointer;
      font-size: 0.8125rem;
      font-weight: 700;
      line-height: 1.46154;
      text-align: center;

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

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

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

    >ul>li>[data-current="true"],
    >ul>li>[aria-pressed="true"],
    >ul>li>[aria-selected="true"] {
      position: relative;
      background-color: var(--color-primary);
      color: var(--color-white);

      &::after {
        @media (min-width: 897px) {
          position: absolute;
          bottom: -0.625rem;
          left: 50%;
          width: 0.75rem;
          height: 1.25rem;
          background-color: var(--color-primary);
          clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);
          content: "";
          transform: translateX(-50%);
        }
      }
    }

    &[data-control-variant="news"] {
      >ul {
        @media (max-width: 896px) {
          border-radius: 1.25rem;
          grid-template-areas:
            "all all"
            "item1 item2";
        }

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

      >ul>li:nth-child(1) {
        @media (max-width: 896px) {
          grid-area: all;
        }
      }
    }

    +.list-news {
      margin-block-start: 2.5rem;

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

    &[data-control-variant="blog"] {
      >ul {
        grid-template-columns: repeat(6, 1fr);
      }
    }

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

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

      >ul>li>a,
      >ul>li>button {
        @media (min-width: 897px) {
          min-height: 2.5rem;
          border-radius: 12.5rem;
          font-size: 0.875rem;
          line-height: 1.429;
        }
      }
    }
  }

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

    >.link {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      border-bottom: 1px solid var(--color-gray-light);
      gap: 0.5rem;
      padding-block: 1.5rem 1rem;

      @media (min-width: 897px) {
        flex-flow: row wrap;
        align-items: center;
        padding: 1.5rem 3.125rem 1.5rem 0;
        gap: 2.5rem;
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          >i::before {
            opacity: 1;
            transform: translateX(0);
          }

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

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

    >.link>i {
      @media (min-width: 897px) {
        position: absolute;
        top: 50%;
        right: 1rem;
        overflow: hidden;
        width: 0.75rem;
        height: 0.75rem;
        transform: translateY(-50%);
      }

      &::before,
      &::after {
        @media (min-width: 897px) {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: url("/assets/images/common/icon-arrow-right-03.svg") no-repeat left top / contain;
          content: "";
        }
      }

      &::before {
        @media (min-width: 897px) {
          opacity: 0;
          transform: translateX(-20px);
          transition: transform var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);
        }
      }

      &::after {
        @media (min-width: 897px) {
          transition: transform var(--transition-duration) var(--transition-timing-function);
        }
      }
    }

    >.link>.meta {
      display: flex;
      align-items: center;
      gap: 1.25rem;

      @media (min-width: 897px) {
        width: 13rem;
        gap: 2.5rem;
      }
    }

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

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

    >.link>.meta>.tags-category {
      flex: 1;
    }

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

    >.link>.detail>.text {
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.5;
      transition: color var(--transition-duration) var(--transition-timing-function);
    }
  }

  /* ---------------------------------------------
  .list-card-features
------------------------------------------------ */
  .list-card-features {
    display: grid;
    row-gap: 1rem;

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

    >li {
      padding: 2.9375rem 1.9375rem 2.1875rem;
      border: 1px solid var(--color-gray-light);
      border-radius: 2.5rem;
      background-color: var(--color-white);

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

    >li>figure {
      width: 100%;
      max-width: 10rem;
      margin: 0 auto 2rem;

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

    >li>figure>img {
      overflow: hidden;
      width: 100%;
      height: auto;
      border-radius: 50%;
    }

    >li>.heading {
      font-size: 0;
      margin-block-end: 0.75rem;
      text-align: center;

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

    >li>.heading>.label {
      position: relative;
      display: inline-flex;
      min-height: 1.75rem;
      align-items: center;
      justify-content: center;
      padding: 0.125rem 1rem;
      border-radius: 6.25rem;
      background-color: var(--color-primary);
      color: var(--color-white);
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.5;
      margin-block-end: 0.625rem;

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

      &::after {
        position: absolute;
        bottom: -0.625rem;
        left: 50%;
        width: 0;
        height: 0;
        border-width: 10px 6px 0;
        border-style: solid;
        border-color: var(--color-primary) transparent transparent transparent;
        content: "";
        transform: translateX(-50%);
      }
    }

    >li>.heading>.title {
      color: var(--color-primary);
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.45;

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

    >li>.text {
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 2;

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

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

  /* ---------------------------------------------
  .list-card-recruits
------------------------------------------------ */
  .list-card-recruits {
    display: grid;
    gap: 1.875rem;
    grid-template-columns: repeat(4, 1fr);

    @media (width < 1024px) {
      grid-template-columns: repeat(2, 1fr);
    }

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

    >li {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 2rem 1.5rem 1.9375rem;
      border-radius: 2.5rem;
      background-color: var(--color-white);
      row-gap: 1.5rem;

      @media (max-width: 896px) {
        padding: 2.5rem 1.5rem 2.0625rem;
        border-radius: 0.625rem;
        row-gap: 1.625rem;
      }
    }

    >li>.head {
      display: grid;
      width: 100%;
      row-gap: 0.5rem;
      text-align: center;
    }

    >li>.head>figure {
      width: 100%;
      max-width: 3rem;
      margin: 0 auto;
    }

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

    >li>.head>.title {
      color: var(--color-primary);
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.44444;
      text-align: center;
    }

    >li>.list {
      display: grid;
      width: 100%;
      row-gap: 0.5625rem;

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

    >li>.list>li>a {
      position: relative;
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.5;
      padding-inline-end: 1.5rem;

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

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          >i::before {
            opacity: 1;
            transform: translateX(0);
          }

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

    >li>.list>li>a>i {
      position: absolute;
      top: 50%;
      right: 0;
      overflow: hidden;
      width: 0.75rem;
      height: 0.75rem;
      transform: translateY(-50%);

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

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

  /* ---------------------------------------------
  .list-card-thumbnail
------------------------------------------------ */
  .list-card-thumbnail {
    display: grid;
    row-gap: 2.5rem;

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

    >li>a {
      display: flex;
      flex-direction: column;
      row-gap: 1rem;

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

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

          >.detail>.text>i::before {
            transform: translateX(0);
          }

          >.detail>.text>i::after {
            transform: translateX(20px);
          }
        }
      }
    }

    >li>a>figure {
      position: relative;
      overflow: hidden;
      border-radius: 2.5rem;
      aspect-ratio: 345 / 194;

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

    >li>a>figure>img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;

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

    >li>a>.detail>.subtext {
      color: var(--color-primary);
      font-family: var(--font-family-montserrat);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.25;
      margin-block-end: 0.1875rem;

      @media (min-width: 897px) {
        font-size: 1rem;
        line-height: 1.1875;
        margin-block-end: 0.625rem;
      }
    }

    >li>a>.detail>.text {
      display: inline-block;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.5;

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

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

    >li>a>.detail>.text>i {
      position: relative;
      top: -1px;
      display: inline-block;
      overflow: hidden;
      width: 0.75rem;
      height: 0.75rem;
      margin-inline-start: 1rem;

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

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

      &::before {
        transform: translateX(-20px);
        transition: transform var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);
      }

      &::after {
        transition: transform var(--transition-duration) var(--transition-timing-function);
      }
    }

    &[data-thumbnail-variant="recruit"] {
      row-gap: 2.375rem;

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

      >li {
        &:nth-child(odd) {
          @media (min-width: 897px) {
            margin-block-start: 5rem;
          }
        }
      }

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

      >li>a>figure {
        aspect-ratio: 345 / 230;

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

      >li>a>.detail {
        @media (min-width: 897px) {
          padding-inline: 1.8125rem;
        }
      }

      >li>a>.detail>.text {
        font-size: 1.25rem;
        line-height: 1.6;

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

      >li>a>.detail>.text>i {
        top: -0.125rem;

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

@layer components {

  /* ---------------------------------------------
  .modal-default
------------------------------------------------ */
  .modal-default {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: oklch(from var(--color-gray-darker) l c h / 80%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-duration) var(--transition-timing-function), visibility var(--transition-duration) var(--transition-timing-function);
    visibility: hidden;

    &[aria-hidden="false"] {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
    }

    >.wrapper {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
      padding: 0.9375rem;

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

    >.wrapper>.inner {
      display: flex;
      max-height: 100%;
    }

    >.wrapper>.inner>.white-box {
      width: 100%;
      border-radius: 1.25rem;
      background-color: var(--color-white);
      padding-block: 3.9375rem 2.25rem;

      @media (min-width: 897px) {
        width: min(96.0396vw, 60.625rem);
        padding: 5.5625rem 0.375rem 4rem;
        border-radius: 5rem;
        margin: 0 auto;
      }
    }

    >.wrapper>.inner>.white-box>.content {
      height: 100%;
      overflow-y: auto;
      padding-inline: 1.5rem;
    }

    >.wrapper>.inner>.white-box>.content>.body {
      @media (min-width: 897px) {
        width: 100%;
        max-width: 48.125rem;
        margin: 0 auto;
      }
    }

    >.wrapper>.inner>.white-box>.content>.body>.title {
      position: relative;
      color: var(--color-primary);
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.5;
      margin-block-end: 1.375rem;
      padding-block-end: 1.0625rem;
      text-align: center;

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

      &::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 2.5rem;
        height: 1px;
        background-color: var(--color-primary);
        content: "";
        transform: translateX(-50%);

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

    >.wrapper>.inner>.white-box>.content>.body>.text {
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.75;

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

    >.wrapper>.inner>.white-box>.content>.footer {
      margin-block-start: 1.3125rem;

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

    >.wrapper>.inner>.white-box>.content>.footer>.button-close {
      margin: 0 auto;
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .nav-sticky
------------------------------------------------ */
  .nav-sticky {
    @media (min-width: 897px) {
      position: sticky;
      top: 7.5rem;
    }
  }

  /* ---------------------------------------------
  .nav-local
------------------------------------------------ */
  .nav-local {
    >ul {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    >ul>li>a {
      position: relative;
      display: inline-block;
      color: var(--color-gray);
      font-size: 1rem;
      font-weight: 500;
      line-height: 2;
      padding-inline-start: 1.375rem;

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

      &::after {
        position: absolute;
        top: 50%;
        left: 1px;
        content: "";
        transform: translateY(-50%);

        @media (min-width: 897px) {
          left: 0;
          width: 0.375rem;
          height: 0.375rem;
          border-radius: 50%;
          background-color: var(--color-primary);
          opacity: 0;
        }

        @media (max-width: 896px) {
          display: block;
          width: 0.375rem;
          height: 0.3125rem;
          border-width: 6px 5px 0;
          border-style: solid;
          border-color: var(--color-primary) rgb(0 0 0 / 0%) rgb(0 0 0 / 0%);
          opacity: 1;
        }
      }

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

        &::after {
          transition: opacity var(--transition-duration) var(--transition-timing-function);
        }
      }

      &:hover,
      &[data-current="true"] {
        @media (min-width: 897px) {
          color: var(--color-gray-dark);
          font-weight: 700;

          &::after {
            opacity: 1;
          }
        }
      }
    }

    &[data-color-variant="white"] {
      >ul>li>a {
        color: var(--color-white);

        @media (min-width: 897px) {
          opacity: 0.3;
        }

        @media (max-width: 896px) {
          color: var(--color-white);
          font-weight: 700;
        }

        &::after {
          @media (min-width: 897px) {
            background-color: var(--color-white);
          }

          @media (max-width: 896px) {
            border-color: var(--color-white) rgb(0 0 0 / 0%) rgb(0 0 0 / 0%);
          }
        }

        &:hover,
        &[data-current="true"] {
          color: var(--color-white);
          font-weight: 700;
          opacity: 1;
        }

        &:hover::after,
        &[data-current="true"]::after {
          opacity: 1;
        }
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .pagination
------------------------------------------------ */
  .pagination {
    --pagination-size: 32px;
    --pagination-padding: 6px;

    display: flex;
    justify-content: center;
    margin-block-start: 3.5rem;

    @media (min-width: 897px) {
      --pagination-size: 56px;
      --pagination-padding: 16px;

      margin-block-start: 5rem;
    }

    >ul {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-inline: 3.75rem;

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

    >ul>li {
      display: flex;
    }

    >ul>li> :where(a, span) {
      display: flex;
      width: var(--pagination-size);
      height: var(--pagination-size);
      align-items: center;
      justify-content: center;
      padding: var(--pagination-padding);
      border-radius: 50%;
      color: var(--color-gray-dark);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.42857;

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

    >ul>li.current>span[aria-current="page"] {
      background-color: var(--color-primary);
      color: var(--color-white);
      cursor: default;
    }

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

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

    >ul>li:where(.prev, .next)> :where(a) {
      position: relative;
      overflow: hidden;
      width: 0.75rem;
      height: 0.75rem;
      padding: 0;
      border-radius: 0;

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

    >ul>li:where(.prev, .next)>a {
      @media (hover: hover) and (pointer: fine) {
        &:hover {
          background-color: transparent;
        }
      }
    }

    >ul>li.prev,
    >ul>li.next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    >ul>li.prev {
      left: 0.625rem;

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

    >ul>li.next {
      right: 0.625rem;

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

    >ul>li:where(.prev, .next)> :where(a)::before,
    >ul>li:where(.prev, .next)> :where(a)::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("/assets/images/common/icon-arrow-right-01.svg") no-repeat left top / contain;
      content: "";
    }

    >ul>li.prev>a {
      transform: rotate(-180deg);

      &::before {
        opacity: 0;
        transform: translateX(-20px);
        transition: transform var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover::before {
          opacity: 1;
          transform: translateX(0);
        }

        &:hover::after {
          opacity: 0;
          transform: translateX(20px);
        }
      }
    }

    >ul>li.prev> :where(a)::after {
      transition: transform var(--transition-duration) var(--transition-timing-function);
    }

    >ul>li.next>a {
      &::before {
        opacity: 0;
        transform: translateX(-20px);
        transition: transform var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover::before {
          opacity: 1;
          transform: translateX(0);
        }

        &:hover::after {
          opacity: 0;
          transform: translateX(20px);
        }
      }
    }

    >ul>li.next> :where(a)::after {
      transition: transform var(--transition-duration) var(--transition-timing-function);
    }

    >ul>li:where(.prev, .next)>a[data-disabled="true"] {
      pointer-events: none;
    }

    >ul>li:where(.prev, .next)>a[data-disabled="true"]::after {
      opacity: 0.3;
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .panel-profile
------------------------------------------------ */
  .panel-profile {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1.375rem;

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

    >.box {
      display: block;
    }

    >.box:nth-child(1) {
      display: grid;
      -moz-column-gap: 1.5rem;
      column-gap: 1.5rem;
      grid-template-columns: 8.4375rem 1fr;

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

    >.box>.image {
      overflow: hidden;
      border-radius: 0.625rem;
      padding-block-start: 0.125rem;

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

    >.box>.image>img {
      width: 100%;
      height: auto;
      border-radius: 0.625rem;
      -o-object-fit: cover;
      object-fit: cover;
    }

    >.box>.heading {
      font-weight: 700;
      line-height: 1.75;
      text-decoration: underline;
      text-underline-offset: 4px;

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

    >.box>.text {
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.75;

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

@layer components {

  /* ---------------------------------------------
  .heading-part
------------------------------------------------ */
  .heading-part {
    padding: 0.3125rem 0.9375rem;
    border: double var(--color-gray-dark);
    color: var(--color-gray-dark);
    font-size: 1.875rem;
    font-weight: 700;
    margin-block: 6.25rem 1.25rem;

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

    &:first-of-type {
      margin-block-start: 0;
    }

    +.heading-part-sub {
      margin-block-start: 0;
    }

    &[data-part-variant="container"] {
      width: 100%;
      max-width: var(--max-width-xl);
      margin-inline: auto;
    }
  }

  /* ---------------------------------------------
  .heading-part-sub
------------------------------------------------ */
  .heading-part-sub {
    border-bottom: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    font-size: 1.25rem;
    font-weight: 700;
    margin-block: 3.125rem 1.25rem;

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

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

    &[data-part-variant="container"] {
      width: 100%;
      max-width: var(--max-width-xl);
      margin-inline: auto;
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .recruit-section
------------------------------------------------ */
  .recruit-section {
    background-color: var(--color-gray-lighter);
    margin-block-end: -23.4375rem;
    padding-block: 10rem 23.4375rem;

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

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

    >.container>.head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      -moz-column-gap: 1.25rem;
      column-gap: 1.25rem;

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

    >.container>.head>.heading-group-underline {
      width: 32.479%;

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

    >.container>.head>.list {
      display: grid;
      justify-content: flex-end;
      gap: 1rem;
      grid-template-columns: repeat(2, 12.5rem);
      padding-block-end: 0.375rem;

      @media (max-width: 896px) {
        justify-content: flex-start;
        order: 3;
        grid-template-columns: repeat(1, 1fr);
        margin-block-start: 2.5rem;
        padding-block-end: 0;
      }
    }

    >.container>.head>.list>li>.button {
      @media (max-width: 896px) {
        max-width: 13.75rem;
        margin: 0 auto;
      }
    }

    >.container>.list-card-recruits {
      margin-block-start: 2rem;

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

@layer components {

  /* ---------------------------------------------
  .table-01
------------------------------------------------ */
  .table-01 {
    width: 100%;

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

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

    >tbody>tr {
      border-top: 1px solid var(--color-gray-light);

      @media (max-width: 896px) {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding-block: 1.375rem 1.625rem;
      }

      &:last-child {
        border-bottom: 1px solid var(--color-gray-light);
      }
    }

    >tbody>tr>th,
    >tbody>tr>td {
      line-height: 1.75;

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

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

    >tbody>tr>th {
      width: 12.5rem;
      text-align: left;
    }

    >tbody>tr>td {
      font-weight: 500;

      @media (max-width: 896px) {
        padding-left: 0.9375rem;
        letter-spacing: 0.1em;
      }
    }

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

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

  /* ---------------------------------------------
  .table-02
------------------------------------------------ */
  .table-02 {
    overflow: hidden;
    width: 100%;
    border: 1px solid var(--color-gray-light);
    border-radius: 1.25rem;
    border-collapse: separate;
    border-spacing: 0;

    >thead>tr>th {
      padding: 0.75rem 1.5rem;
      background-color: var(--color-primary);
      color: var(--color-white);
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 2;
      text-align: left;

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

    >thead>tr>th+th {
      border-left: 1px solid var(--color-white);
    }

    >tbody>tr>td {
      padding: 0.75rem 1.5rem;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 2;
      vertical-align: middle;

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

    >tbody>tr:last-child>td {
      padding-block-end: 1.1875rem;

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

    >tbody>tr:not(:first-child)>td {
      border-top: 1px solid var(--color-gray-light);
    }

    >tbody>tr>td+td {
      border-left: 1px solid var(--color-gray-light);
    }

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

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

  /* ---------------------------------------------
  table-scroll
------------------------------------------------ */
  .table-scroll {
    @media (max-width: 896px) {
      position: relative;
      -webkit-overflow-scrolling: touch;
      overflow-x: auto;
    }

    >.table-02 {
      @media (max-width: 896px) {
        min-width: 37.5rem;
      }
    }

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

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

@layer components {

  /* ---------------------------------------------
  .tags
------------------------------------------------ */
  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-block-start: 0.875rem;

    >li {
      display: inline-block;
      padding: 0.125rem 0.25rem;
      border-radius: 0.25rem;
      background-color: var(--color-gray-lighter);
      color: var(--color-gray);
      font-size: 0.75rem;
      font-weight: 500;
    }
  }

  /* ---------------------------------------------
  .tags-category
------------------------------------------------ */
  .tags-category {
    display: inline-flex;
    min-width: 6rem;
    min-height: 1.375rem;
    align-items: center;
    justify-content: center;
    padding: 0.125rem;
    border: 1px solid var(--color-gray-medium);
    border-radius: 0.25rem;
    color: var(--color-gray);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.16667;
    text-align: center;
  }
}

@layer components {

  /* ---------------------------------------------
  .text-primary
------------------------------------------------ */
  .text-primary {
    font-weight: 500;
    line-height: 2;

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