@charset "UTF-8";

.main {
  /* =====================
    mv
  ===================== */
  .mv {
    position: relative;
    width: 100%;
    /* ==== 背景スライダー ==== */
    .mv-slider {
      position: absolute;
      overflow: hidden;
      width: 100%;
      min-height: 840px;
      top: 0;
      right: 0;

      @media (width <= 768px) {
        min-height: calc((100 / 390) * 647 * 1vw);
      }
      .mv-swiper-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: inherit;

        .swiper-slide {
          position: relative;

          & picture {
            display: block flow;
            & img {
              inline-size: 100%;
              block-size: 100%;
              min-height: 840px;
              object-fit: cover;
              object-position: center;

              @media (width <= 768px) {
                min-height: calc((100 / 390) * 647 * 1vw);
              }
            }
          }
        }
      }
    }
    .mv-slider .zoom img {
      animation-name: zoom;
      animation-duration: 15s;
      animation-delay: 0ms;
      animation-timing-function: linear; /* ease/ease-in/ease-out/ease-in-out/linear/cubic-bezier()/steps(1, jump-end) */
      animation-iteration-count: 1; /* {num}/infinite */
      animation-direction: normal; /* normal/reverse/alternate/alternate-reverse */
      animation-fill-mode: both; /* none/backwards(0%)/forwards(100%)/both(0%->100%) */
      animation-play-state: running; /* running/paused */
    }

    /* ==== Bullet ==== */
    .swiper-pagination {
      position: absolute;
      text-align: center;
      padding-inline: 80px;
      bottom: 32px;
      right: 0;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
        bottom: calc((100 / 390) * 25 * 1vw);
      }
    }

    .swiper-pagination-bullet {
      opacity: 1;
      width: 14px !important;
      height: 14px !important;
      margin: 0 0 0 32px !important;
      background: rgba(255, 255, 255, 0.5);

      @media (width <= 768px) {
        width: calc((100 / 390) * 10 * 1vw) !important;
        height: calc((100 / 390) * 10 * 1vw) !important;
        margin: 0 0 0 calc((100 / 390) * 15 * 1vw) !important;
      }
    }

    .swiper-pagination-bullet.swiper-pagination-bullet-active {
      background: #fff;
    }

    .swiper-pagination-bullet:first-child {
      margin: 0 !important;
    }
    /* ====  ==== */

    .content {
      position: relative;
      min-height: 840px;
      padding-block-start: 420px;
      z-index: 10;

      @media (width <= 768px) {
        min-height: calc((100 / 390) * 647 * 1vw);
        padding-block-start: calc((100 / 390) * 351 * 1vw);
      }

      .catch {
        position: relative;
        background: linear-gradient(90deg, rgba(0, 122, 198, 0) 0%, rgba(255, 255, 255, 0.7) 25.19%, rgba(255, 255, 255, 0.7) 74.98%, rgba(0, 122, 198, 0) 100%);
        text-align: center;
        min-block-size: 113px;
        display: block grid;
        place-content: center;
        gap: 8px;

        @media (width <= 768px) {
          min-block-size: calc((100 / 390) * 91 * 1vw);
          gap: calc((100 / 390) * 0 * 1vw);
        }
        /* =====================
          日本語　キャッチ
        ===================== */
        .ja-catch {
          position: relative;
          font-size: 48px;
          font-weight: 600;
          color: var(--primary);
          line-height: 1;
          z-index: 11;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 24 * 1vw);
            line-height: 1.1;
          }
          .fs36 {
            font-size: 36px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 20 * 1vw);
            }
          }
        }
        /* =====================
        英字　キャッチ
        ===================== */
        .en-catch {
          font-size: 24px;
          line-height: 1;
          color: var(--primary);

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 14 * 1vw);
          }
        }
      }

      .bnr {
        position: relative;
        margin-block-start: 143px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/top/bnr_bg.png');
        inline-size: 390px;
        block-size: 124px;
        margin-inline: auto 40px;
        z-index: 11;

        @media (width <= 768px) {
          background-image: url('../img/top/bnr_bg_2x.png');
          inline-size: calc((100 / 390) * 278 * 1vw);
          block-size: calc((100 / 390) * 86 * 1vw);
          margin-inline: auto calc((100 / 390) * 16 * 1vw);
          margin-block-start: calc((100 / 390) * 59 * 1vw);
        }

        .u-hover {
          position: relative;
          display: block flow;
          inline-size: 100%;
          block-size: 100%;
          padding-inline: 4px;
          padding-block: 4px;

          @media (width <= 768px) {
            padding-inline: calc((100 / 390) * 4 * 1vw);
            padding-block: calc((100 / 390) * 4 * 1vw);
          }

          &::after {
            content: '';
            display: block flow;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/top/bnr.png');
            inline-size: 132px;
            block-size: 179px;
            position: absolute;
            top: -61px;
            right: 29px;
          }

          @media (width <= 768px) {
            &::after {
              background-image: url('../img/top/bnr_2x.png');
              inline-size: calc((100 / 390) * 80 * 1vw);
              block-size: calc((100 / 390) * 109 * 1vw);
              top: calc((100 / 390) * -29 * 1vw);
              right: calc((100 / 390) * 22 * 1vw);
            }
          }

          .bnr-title {
            font-size: 20px;
            font-weight: 600;
            line-height: 1.2;
            color: #fff;
            text-shadow: 0 4px 4px #1f629f;
            background-image: linear-gradient(90deg, rgba(0, 122, 198, 0.6) 39.46%, rgba(255, 255, 255, 0.3) 75.64%);
            padding-inline: 24px;
            padding-block: 6px;
            margin-block-start: 14px;
            margin-inline-end: 33px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 14 * 1vw);
              padding-inline: calc((100 / 390) * 12 * 1vw);
              padding-block: calc((100 / 390) * 4 * 1vw);
              margin-block-start: calc((100 / 390) * 8 * 1vw);
              margin-inline-end: calc((100 / 390) * 23 * 1vw);
            }

            & span {
              display: inline;
            }

            .text-style-1 {
              font-size: 14px;
              line-height: 1.2;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 12 * 1vw);
              }
            }
            .text-style-2 {
              letter-spacing: -0.8px;

              @media (width <= 768px) {
                letter-spacing: calc((100 / 390) * -0.56 * 1vw);
              }
            }
            .text-style-3 {
              letter-spacing: -3px;

              @media (width <= 768px) {
                letter-spacing: calc((100 / 390) * -2.1 * 1vw);
              }
            }
            .text-style-4 {
              letter-spacing: -3.2px;

              @media (width <= 768px) {
                letter-spacing: calc((100 / 390) * -2.24 * 1vw);
              }
            }
            .text-style-5 {
              letter-spacing: -1.2px;

              @media (width <= 768px) {
                letter-spacing: calc((100 / 390) * -0.84 * 1vw);
              }
            }
            .text-style-6 {
              letter-spacing: -1.6px;

              @media (width <= 768px) {
                letter-spacing: calc((100 / 390) * -1.12 * 1vw);
              }
            }
            .text-style-7 {
              letter-spacing: 1.2px;

              @media (width <= 768px) {
                letter-spacing: calc((100 / 390) * 0.84 * 1vw);
              }
            }
            .text-style-8 {
              font-size: 16px;
              line-height: 1.2;
              letter-spacing: 1.44px;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 12 * 1vw);
                letter-spacing: calc((100 / 390) * 1.08 * 1vw);
              }
            }
          }
          .link-btn {
            display: block flex;
            align-items: center;
            gap: 8px;
            padding-inline: 24px;
            margin-block-start: 4px;

            @media (width <= 768px) {
              gap: calc((100 / 390) * 4 * 1vw);
              padding-inline: calc((100 / 390) * 12 * 1vw);
              margin-block-start: calc((100 / 390) * 1 * 1vw);
            }

            .u-arrow {
              inline-size: 26px;
              background-color: transparent;
              border: 1px solid var(--primary);

              @media (width <= 768px) {
                inline-size: calc((100 / 390) * 18 * 1vw);
              }

              &::after {
                inline-size: 10px;
                background-color: var(--primary);
              }

              @media (width <= 768px) {
                &::after {
                  inline-size: calc((100 / 390) * 9 * 1vw);
                }
              }
            }
            .btn-txt {
              font-weight: 500;
              letter-spacing: -0.96px;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 14 * 1vw);
                letter-spacing: calc((100 / 390) * -0.84 * 1vw);
              }

              .fc-b {
                font-weight: 600;
                color: #003f97;
                letter-spacing: normal;

                @media (width <= 768px) {
                  font-size: calc((100 / 390) * 15 * 1vw);
                }
              }
              .fs13 {
                font-size: 13px;
                display: inline-block;
                margin-inline-start: 8px;

                @media (width <= 768px) {
                  font-size: calc((100 / 390) * 11 * 1vw);
                  margin-inline-start: calc((100 / 390) * 4 * 1vw);
                  letter-spacing: calc((100 / 390) * -0.66 * 1vw);
                }
              }
            }
          }
        }
      }
    }
    /* =====================
      Scroll
    ===================== */
    /* スクロールダウンの位置 */
    .scroll {
      position: absolute;
      left: 40px;
      bottom: 133px;
      z-index: 12;

      @media (width <= 768px) {
        left: calc((100 / 390) * 13 * 1vw);
        bottom: calc((100 / 390) * 100 * 1vw);
      }

      /* 線のアニメーション部分 */
      &::before {
        animation: scroll 2s cubic-bezier(1, 0, 0, 1) infinite;
        background-color: #fff;
        top: 40px;
        border-radius: 50rem;
        content: '';
        height: 80px;
        left: 50%;
        margin: auto;
        position: absolute;
        width: 2px;
        z-index: 2;
      }
      /* 線の背景色 */
      &::after {
        background-color: transparent;
        top: 40px;
        border-radius: 50rem;
        content: '';
        height: 80px;
        left: 50%;
        margin: auto;
        position: absolute;
        width: 2px;
      }
      & > span {
        display: block flow;
        font-weight: 500;
        text-transform: uppercase;
        color: #fff;
      }

      @media (width <= 768px) {
        &::before {
          bottom: calc((100 / 390) * -56 * 1vw);
          height: calc((100 / 390) * 60 * 1vw);
          width: 1px;
        }
        &::after {
          bottom: calc((100 / 390) * -56 * 1vw);
          height: calc((100 / 390) * 60 * 1vw);
          width: 1px;
        }
        & > span {
          font-size: calc((100 / 390) * 14 * 1vw);
        }
      }
    }
  }
  /* =====================
  news
===================== */
  .news {
    position: relative;
    background-color: #fff;
    .u-hover {
      display: block grid;
      grid-template-columns: max-content auto max-content;
      align-items: center;
      column-gap: 48px;
      min-block-size: 99px;
      padding-inline: 80px;

      @media (width <= 768px) {
        grid-template-columns: 1fr;
        padding-inline: calc((100 / 390) * 16 * 1vw);
        padding-block: calc((100 / 390) * 19 * 1vw) calc((100 / 390) * 26 * 1vw);
      }

      & > h2.title {
        position: relative;
        font-family: var(--title);
        font-size: 32px;
        background-image: linear-gradient(to bottom, #007ac6, rgba(0, 122, 198, 0.2));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        opacity: 0.8;
        text-transform: uppercase;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 24 * 1vw);
        }
      }
      .content {
        display: block flex;
        align-items: center;
        gap: 32px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 14 * 1vw);
          flex-direction: column;
          align-items: start;
          gap: calc((100 / 390) * 4 * 1vw);
          line-height: 1.4;

          .date {
            opacity: 0.8;
          }
        }
      }
      & span[lang='en'] {
        display: block flex;
        align-items: center;
        gap: 20px;
        font-size: 14px;
        color: var(--primary);

        @media (width <= 768px) {
          gap: calc((100 / 390) * 17 * 1vw);
          font-size: calc((100 / 390) * 12 * 1vw);
          justify-content: end;
          margin-block-start: calc((100 / 390) * 4 * 1vw);
        }
        &::after {
          content: '';
          display: block;
          inline-size: 20px;
          aspect-ratio: 1 / 1;
          mask-repeat: no-repeat;
          mask-size: contain;
          mask-position: center;
          mask-image: var(--icon-arrow);
          background-color: var(--primary);
        }

        @media (width <= 768px) {
          &::after {
            inline-size: calc((100 / 390) * 20 * 1vw);
          }
        }
      }
    }
  }

  /* =====================
    about
  ===================== */
  .about {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/top/about_bg.png');
    inline-size: 100%;
    min-block-size: 480px;
    z-index: 1;
    display: block grid;
    place-content: center;

    @media (width <= 768px) {
      background-image: url('../img/top/about_bg_2x.png');
      inline-size: 100%;
      min-block-size: calc((100 / 390) * 478 * 1vw);
    }
    .u-inner {
      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 32 * 1vw);
      }
      .description {
        text-shadow: 1px 1px 5px #001c65;
        line-height: 2;
        text-align: center;
        color: #fff;

        @media (width <= 768px) {
          text-shadow: 1px 1px calc((100 / 390) * 5 * 1vw) #001c65;
          text-align: left;
        }
        & + .description {
          margin-block-start: 32px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 32 * 1vw);
          }
        }
      }
    }
  }

  /* =====================
    service
  ===================== */
  .service {
    position: relative;
    padding-block-start: 104px;
    padding-block-end: 120px;
    z-index: 2;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 58 * 1vw);
      padding-block-end: calc((100 / 390) * 64 * 1vw);
    }

    .u-inner {
      padding-inline: 80px;
      display: block grid;
      align-items: end;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }

      .u-h2-title {
        grid-area: 1/1/2/2;
      }

      .u-anchor {
        grid-area: 1/2/2/3;
        margin-inline: auto 0;
        margin-block-end: 12px;

        @media (width <= 768px) {
          grid-area: 3/1/4/2;
          margin-block-end: 0;
          margin-block-start: calc((100 / 390) * 40 * 1vw);
        }
      }

      .service-list {
        grid-area: 2/1/3/3;
        display: block flex;
        flex-wrap: wrap;
        gap: 40px;
        margin-block-start: 45px;

        @media (width <= 768px) {
          grid-area: 2/1/3/2;
          gap: calc((100 / 390) * 8 * 1vw);
          margin-block-start: calc((100 / 390) * 33 * 1vw);
        }

        .item {
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;

          &[data-id='01'] {
            background-image: url('../img/top/service_01.png');
            inline-size: 620px;
            block-size: 332px;

            @media (width <= 768px) {
              background-image: url('../img/top/service_01_2x.png');
              inline-size: calc((100 / 390) * 358 * 1vw);
              block-size: calc((100 / 390) * 160 * 1vw);
            }
          }
          &[data-id='02'] {
            background-image: url('../img/top/service_02.png');
            inline-size: 620px;
            block-size: 332px;

            @media (width <= 768px) {
              background-image: url('../img/top/service_02_2x.png');
              inline-size: calc((100 / 390) * 358 * 1vw);
              block-size: calc((100 / 390) * 160 * 1vw);
            }
          }
          &[data-id='03'] {
            background-image: url('../img/top/service_03.png');
            inline-size: 400px;
            block-size: 332px;

            @media (width <= 768px) {
              background-image: url('../img/top/service_03_2x.png');
              inline-size: calc((100 / 390) * 358 * 1vw);
              block-size: calc((100 / 390) * 160 * 1vw);
            }
          }
          &[data-id='04'] {
            background-image: url('../img/top/service_04.png');
            inline-size: 400px;
            block-size: 332px;

            @media (width <= 768px) {
              background-image: url('../img/top/service_04_2x.png');
              inline-size: calc((100 / 390) * 358 * 1vw);
              block-size: calc((100 / 390) * 160 * 1vw);
            }
          }
          &[data-id='05'] {
            background-image: url('../img/top/service_05.png');
            inline-size: 400px;
            block-size: 332px;

            @media (width <= 768px) {
              background-image: url('../img/top/service_05_2x.png');
              inline-size: calc((100 / 390) * 358 * 1vw);
              block-size: calc((100 / 390) * 160 * 1vw);
            }
          }
          .anchor {
            position: relative;
            display: block grid;
            grid-template-columns: auto max-content;
            justify-items: end;
            align-items: end;
            column-gap: 20px;
            inline-size: 100%;
            block-size: 100%;
            padding: 32px;

            @media (width <= 768px) {
              padding: calc((100 / 390) * 10 * 1vw) calc((100 / 390) * 16 * 1vw);
              column-gap: calc((100 / 390) * 18 * 1vw);
            }

            &::before {
              content: '';
              display: block;
              inline-size: 100%;
              block-size: 100%;
              background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%);
              transition: opacity 350ms ease 0s;
              position: absolute;
              bottom: 0;
              left: 0;
              border-radius: 10px;
            }

            @media (width <= 768px) {
              &::before {
                border-radius: calc((100 / 390) * 10 * 1vw);
              }
            }

            &:hover {
              &::before {
                opacity: 0;
              }

              .u-arrow {
                background-color: #fff;
                &::after {
                  background-color: var(--secondary);
                }
              }
            }

            .title {
              position: relative;
              font-size: 24px;
              font-weight: bold;
              color: #fff;
              z-index: 3;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 20 * 1vw);
              }
            }
            .u-arrow {
              inline-size: 40px;
              background-color: transparent;
              border: 1px solid #fff;

              @media (width <= 768px) {
                inline-size: calc((100 / 390) * 32 * 1vw);
              }
              &::after {
                inline-size: 15px;
              }

              @media (width <= 768px) {
                &::after {
                  inline-size: calc((100 / 390) * 12 * 1vw);
                }
              }
            }
          }
        }
      }
    }
  }

  /* =====================
    mice
  ===================== */
  .mice {
    position: relative;
    padding-block-end: 120px;
    z-index: 1;

    @media (width <= 768px) {
      padding-block-end: calc((100 / 390) * 60 * 1vw);
    }

    .u-inner {
      padding-inline: 80px;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }

      .wrap {
        padding-inline: 80px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/top/mice_bg.png');
        inline-size: 100%;
        min-block-size: 360px;
        display: block grid;
        grid-template-columns: max-content auto;
        grid-template-rows: repeat(2, max-content);
        align-items: center;
        align-content: center;
        column-gap: 111px;

        @media (width <= 768px) {
          background-image: url('../img/top/mice_bg_2x.png');
          min-block-size: calc((100 / 390) * 651 * 1vw);
          padding-inline: calc((100 / 390) * 16 * 1vw);
          grid-template-columns: 1fr;
          grid-template-rows: repeat(3, max-content);
          align-items: start;
          align-content: start;
          column-gap: 0;
          padding-block-start: calc((100 / 390) * 48 * 1vw);
        }

        .u-h2-title {
          grid-area: 1/1/2/2;

          @media (width <= 768px) {
            margin-inline-start: calc((100 / 390) * 6 * 1vw);
          }
        }

        .u-anchor {
          grid-area: 2/1/3/2;
          margin-block-start: 64px;

          @media (width <= 768px) {
            grid-area: 3/1/4/2;
            margin-block-start: calc((100 / 390) * 40 * 1vw);
            margin-inline: auto 0;
          }
        }
        .unit {
          grid-area: 1/2/3/3;

          @media (width <= 768px) {
            grid-area: 2/1/3/2;
            margin-block-start: calc((100 / 390) * 33 * 1vw);
          }
          .description + .description {
            margin-block-start: 32px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 27 * 1vw);
            }
          }
        }
      }
    }
  }
  /* =====================
    works
  ===================== */
  .works {
    position: relative;
    padding-block-start: 106px;
    padding-block-end: 120px;
    z-index: 1;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 62 * 1vw);
      padding-block-end: calc((100 / 390) * 64 * 1vw);
    }

    &::before {
      content: '';
      display: block flow;
      background-position: center;
      background: url(../img/_common/bg.png) lightgray 0% 0% / 100% repeat;
      inline-size: 100%;
      block-size: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      opacity: 0.1;
    }

    @media (width <= 768px) {
      &::before {
        background: url(../img/_common/bg.png) lightgray 0% 0% / 150% repeat;
      }
    }

    .u-inner {
      padding-inline: 80px;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }

      .wrap {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: repeat(5, max-content);
        align-items: start;
        column-gap: 40px;

        @media (width <= 768px) {
          grid-template-columns: 1fr;
          grid-template-rows: auto;
          column-gap: 0;
        }

        .u-h2-title {
          grid-area: 1/1/2/2;
        }
        .description {
          grid-area: 2/1/3/2;
          margin-block-start: 53px;

          @media (width <= 768px) {
            grid-area: 2/1/3/2;
            margin-block-start: calc((100 / 390) * 32 * 1vw);
          }
        }

        .thumbnails-container {
          grid-area: 3/1/5/2;
          display: grid;
          grid-template-columns: repeat(2, 244px);
          gap: 21px;
          margin-block-start: 64px;

          @media (width <= 768px) {
            grid-area: 4/1/5/2;
            grid-template-columns: repeat(4, calc((100 / 390) * 84 * 1vw));
            gap: calc((100 / 390) * 7 * 1vw);
            margin-block-start: calc((100 / 390) * 24 * 1vw);
          }

          .thumbnail-wrapper {
            cursor: pointer;
            overflow: hidden;
            border-radius: 8px;
            transition:
              transform 0.3s ease,
              box-shadow 0.3s ease;

            &:hover {
              transform: translateY(-4px);
            }

            .thumbnail {
              width: 244px;
              height: 170px;
              object-fit: cover;
              display: block;
              transition: transform 0.3s ease;

              @media (width <= 768px) {
                width: calc((100 / 390) * 84 * 1vw);
                height: calc((100 / 390) * 60 * 1vw);
              }
            }

            &:hover .thumbnail {
              transform: scale(1.05);
            }
          }
        }

        .main-image-container {
          grid-area: 1/2/4/3;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
          margin-block-start: 14px;

          @media (width <= 768px) {
            grid-area: 3/1/4/2;
            margin-block-start: calc((100 / 390) * 40 * 1vw);
          }

          .main-image {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
          }
        }

        .u-anchor {
          grid-area: 4/2/5/3;
          margin-block-start: 64px;
          margin-inline: auto 0;

          @media (width <= 768px) {
            grid-area: 5/1/6/2;
            margin-block-start: calc((100 / 390) * 42 * 1vw);
          }
        }
      }
    }
  }

  /* =====================
    links
  ===================== */
  .links {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-block: 120px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 64 * 1vw);
    }

    .split-section_inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      max-width: 1440px;
      margin-inline: auto;
      padding-inline: 80px;
      position: relative;

      @media (width <= 768px) {
        grid-template-columns: 1fr;
        max-width: 100%;
        padding-inline: 0;
      }
    }
    /* 各アイテムの基本スタイル */
    .split-section_item {
      position: relative;
      padding-block: 50px 63px;

      @media (width <= 768px) {
        padding-block: calc((100 / 390) * 48 * 1vw) calc((100 / 390) * 42 * 1vw);
      }
    }

    /* 背景を画面全体に広げるための疑似要素 */
    .split-section_item::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: -1;
      min-block-size: calc((100 / 390) * 360 * 1vw);
    }

    /* 左側の背景 */
    .split-section_item-left::before {
      background-image: linear-gradient(300deg, #fff 0%, #d5e5ed 30%);
      right: -65px;
      left: calc(-100vw + 100%);
      clip-path: polygon(0 0, /* 左上 */ 100% 0, /* 右上 */ calc(100% - 226px) 100%, /* 右下（斜めにカット） */ 0 100% /* 左下 */);
    }
    @media (width <= 768px) {
      .split-section_item-left::before {
        background-image: linear-gradient(0deg, #fff 0%, #d5e5ed 30%);
        left: 0;
        top: 0;
        right: 0;
        bottom: calc(0% - calc((100 / 390) * 30 * 1vw));
        clip-path: polygon(0 0, 100% 0, 100% 74%, 0 100%);
      }
    }

    /* 右側の背景 */
    .split-section_item-right::before {
      background: linear-gradient(98.01deg, #cde9f8 2.14%, #fff 97.86%);
      left: -144px;
      right: calc(-100vw + 100%);
      clip-path: polygon(224px 0, /* 左上（斜めにカット） */ 100% 0, /* 右上 */ 100% 100%, /* 右下 */ 0 100% /* 左下 */);
    }
    @media (width <= 768px) {
      .split-section_item-right::before {
        background: linear-gradient(180deg, #cde9f8 2.14%, #fff 97.86%);
        left: 0;
        top: calc(0% - calc((100 / 390) * 45 * 1vw));
        right: 0;
        bottom: 0;
        clip-path: polygon(0 26%, 100% 0, 100% 100%, 0 100%);
      }
    }

    /* コンテンツエリア */
    .split-section_content {
      width: 100%;
      max-inline-size: 500px;
      z-index: 3;

      @media (width <= 768px) {
        max-inline-size: 100%;
        padding-inline: calc((100 / 390) * 32 * 1vw);
      }

      .u-h2-title {
        & span[lang='en'] {
          background-image: linear-gradient(to bottom, #fff, rgba(255, 254, 254, 0) 200%);
        }
      }

      .description {
        margin-block-start: 54px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 32 * 1vw);
        }
      }
      .u-anchor {
        margin-block-start: 40px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 25 * 1vw);
        }
      }
    }
    .split-section_item-right {
      @media (width <= 768px) {
        padding-block: 0 calc((100 / 390) * 70 * 1vw);
      }
      .split-section_content {
        padding-inline-start: 120px;

        @media (width <= 768px) {
          padding-inline: calc((100 / 390) * 32 * 1vw);
          padding-block: calc((100 / 390) * 17 * 1vw) 0;

          .u-h2-title {
            margin-inline: auto 0;
          }

          .u-anchor {
            margin-inline: auto 0;
          }
        }
      }
    }
  }

  /* =====================
    recruit
  ===================== */
  .recruit {
    position: relative;
    padding-block-start: 50px;
    padding-block-end: 64px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/top/recruit_bg.png');
    inline-size: 100%;
    min-block-size: 767px;

    @media (width <= 768px) {
      background-image: url('../img/top/recruit_bg_2x.png');
      min-block-size: calc((100 / 390) * 890 * 1vw);
      padding-block-start: calc((100 / 390) * 48 * 1vw);
      padding-block-end: calc((100 / 390) * 248 * 1vw);
    }

    .u-inner {
      padding-inline: 80px;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }

      .wrap {
        display: block grid;
        grid-template-columns: 654px auto;
        grid-template-rows: max-content max-content;
        align-items: start;
        column-gap: 34px;

        @media (width <= 768px) {
          grid-template-columns: 1fr;
          grid-template-rows: auto;
          column-gap: 0;
        }

        .u-h2-title {
          grid-area: 1/1/2/2;
        }

        .picture {
          grid-area: 2/1/3/2;
          margin-block-start: 72px;

          @media (width <= 768px) {
            grid-area: 2/1/3/2;
            margin-block-start: calc((100 / 390) * 25 * 1vw);

            & img {
              width: calc((100 / 390) * 278 * 1vw);
            }
          }
        }

        .content_wrap {
          position: relative;
          block-size: 100%;
          grid-area: 1/2/3/3;

          @media (width <= 768px) {
            grid-area: 3/1/4/2;
          }

          .title {
            font-size: 32px;
            line-height: 1.6;
            font-weight: 500;
            margin-block-start: 50px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 20 * 1vw);
              margin-block-start: calc((100 / 390) * 25 * 1vw);
            }
          }

          .description {
            margin-block-start: 24px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 23 * 1vw);
            }
          }
          .u-anchor {
            margin-block-start: 40px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 40 * 1vw);
            }
          }

          &::before {
            content: '';
            position: absolute;
            bottom: 220px;
            right: -40px;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/top/recruit_txt.png');
            inline-size: 259px;
            block-size: 99px;
          }

          @media (width <= 768px) {
            &::before {
              background-image: url('../img/top/recruit_txt_2x.png');
              inline-size: calc((100 / 390) * 130 * 1vw);
              block-size: calc((100 / 390) * 48 * 1vw);
              bottom: calc((100 / 390) * -68 * 1vw);
              right: calc((100 / 390) * 0 * 1vw);
            }
          }

          &::after {
            content: '';
            position: absolute;
            bottom: 0px;
            right: 60px;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/top/recruit_01.png');
            inline-size: 336px;
            block-size: 263px;
          }

          @media (width <= 768px) {
            &::after {
              background-image: url('../img/top/recruit_01_2x.png');
              inline-size: calc((100 / 390) * 220 * 1vw);
              block-size: calc((100 / 390) * 173 * 1vw);
              bottom: calc((100 / 390) * -212 * 1vw);
              right: calc((100 / 390) * 48 * 1vw);
            }
          }
        }
      }
    }
  }
}
/* =====================
animation
===================== */
@keyframes zoom {
  0% {
    scale: 1;
  }
  100% {
    scale: 1.15;
  }
}

/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* ==== js-parallax ==== */

.mv {
  .js-parallax {
    --_transition: filter 1s ease, opacity 0.4s ease;
    opacity: 0;
    filter: blur(0.2em);
    transform: translateY(0);
    transition: var(--_transition);
    transition-delay: var(--_delay, 200ms), var(--_delay, 200ms);

    &.on {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
    }
  }
}
.about,
.service,
.mice,
.works,
.links,
.recruit {
  .js-parallax {
    opacity: 0;
    transition: all 0.5s ease-in-out 0s;
    transform: translateX(-1em);
    &.on {
      opacity: 1;
      transform: translateX(0);
    }
  }
}