@charset "UTF-8";

#header {
  .white {
    color: #fff;
    @media screen and (max-width: 767px) {
      color: #000;
    }

    @media print {
      color: #000 !important;
    }
  }
}

.top-wrapper {
  --fv-bg-height: 500rem;
  --fv-header-height-sp: 5.6rem;
  /* Left pull (viewport align) + extra right width for sub-pixel gutter gap */
  --fv-bleed-left: 0.1vw;
  --fv-bleed-right-extra: -3px;
  /* Full-bleed layer origin vs #fv — re-align duplicate content */
  --fv-layer-offset-x: calc(50vw + var(--fv-bleed-left) - 50%);
  position: relative;
  @media screen and (max-width: 767px) {
    --fv-bleed-right-extra: 0px;
  }
  > .fv-bg-map {
    z-index: 0;
  }

  > section {
    position: relative;
    z-index: 1;
  }
}

/*
 * Red ribbon bg — fixed tall canvas (--fv-bg-height). Do not use height: auto.
 * Clip vars live on each overlay layer — upper (% + vw) and lower (rem) tune separately.
 */
#fv {
  position: relative;

  > .slogan {
    position: relative;
    z-index: 2;
  }

  > .intro-slot {
    position: relative;
    z-index: 2;
  }

  > .intro-slot .intro {
    color: #000;
  }

  > .hollow-text-slot {
    position: relative;
    z-index: 2;
  }

  .main-img-container,
  > .fv2,
  > .fv3 {
    z-index: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .main-img-container .fv1 {
      animation: none;

      &:not(:first-child) {
        display: none;
      }

      &:first-child {
        opacity: 1;
      }
    }
  }

  @media screen and (max-width: 767px) {
    --fv-slogan-width-sp: 33.5rem;
    --fv-slogan-width: var(--fv-slogan-width-sp);
  }
}

#fv.fv-mask {
  /* height は 1-fv1.jpg の実アスペクト比(1696x2196)から算出 */
  --fv-mask-photo-top: 10rem;
  --fv-mask-photo-right: 0px;
  --fv-mask-photo-w: 84rem;
  --fv-mask-photo-h: calc(var(--fv-mask-photo-w) * 2196 / 1696);

  @media screen and (max-width: 767px) {
    --fv-mask-photo-top: 7.7rem;
    --fv-mask-photo-w: 20.1rem;
  }

  .main-img-container {
    top: var(--fv-mask-photo-top);
    right: var(--fv-mask-photo-right);
    width: var(--fv-mask-photo-w);
  }

  .fv-on-red-layer-mask {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(100vw + var(--fv-bleed-left, 0px));
    height: var(--fv-bg-height, 500rem);
    margin-left: calc(-50vw - var(--fv-bleed-left, 0px));
    pointer-events: none;
    z-index: 3;

    -webkit-mask-image: url("../img/index/main-bg.png");
    -webkit-mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top left;
    -webkit-mask-size: 100% auto;
    mask-image: url("../img/index/main-bg.png");
    mask-mode: alpha;
    mask-repeat: no-repeat;
    mask-position: top left;
    mask-size: 100% auto;

    clip-path: polygon(
      0 0,
      100% 0,
      100% var(--fv-mask-photo-top),
      calc(100% - var(--fv-mask-photo-right) - var(--fv-mask-photo-w))
        var(--fv-mask-photo-top),
      calc(100% - var(--fv-mask-photo-right) - var(--fv-mask-photo-w))
        calc(var(--fv-mask-photo-top) + var(--fv-mask-photo-h)),
      100% calc(var(--fv-mask-photo-top) + var(--fv-mask-photo-h)),
      100% 100%,
      0 100%
    );

    @media screen and (max-width: 767px) {
      /* .fv-bg-mapのSP用画像に合わせる */
      -webkit-mask-image: url("../img/index/main-bg-sp.png");
      -webkit-mask-position: left var(--fv-header-height-sp, 5.6rem);
      -webkit-mask-size: contain;
      mask-image: url("../img/index/main-bg-sp.png");
      mask-position: left var(--fv-header-height-sp, 5.6rem);
      mask-size: contain;

      /* 写真に重なる部分も白文字のままでよい */
      -webkit-clip-path: none;
      clip-path: none;
    }
  }

  .fv-on-red-mask {
    margin-left: var(--fv-layer-offset-x, 0px);

    .intro-slot .intro {
      color: #fff;
      -webkit-text-fill-color: #fff;
    }

    /* main-img/fv2/fv3のコンテナは高さ確保のため残し、画像だけ非表示にする */
    .fv1,
    .fv2,
    .fv3 {
      visibility: hidden;
    }
  }
}

.fv-bg-map,
.fv-on-red-layer {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100vw + var(--fv-bleed-left) + var(--fv-bleed-right-extra));
  height: var(--fv-bg-height);
  margin-left: calc(-50vw - var(--fv-bleed-left));
  pointer-events: none;
}

.fv-bg-map {
  overflow: hidden;
  background: url("../img/index/main-bg.png") no-repeat top left / 100% auto;
  z-index: 0;

  @media screen and (max-width: 767px) {
    /* Offset image only — keep layer aligned with white-text overlay */
    background: url("../img/index/main-bg-sp.png") no-repeat left
      var(--fv-header-height-sp) / contain;
  }
}

.fv-on-red-layer {
  z-index: 3;

  .fv-on-red {
    margin-left: var(--fv-layer-offset-x);
  }

  .main-img-container,
  .fv2,
  .fv3 {
    visibility: hidden;
  }

  .main-img-container .fv1 {
    animation: none;
  }

  &.fv-on-red-layer--upper {
    /* Slogan / intro — % coords + vw-scaled Y (main-bg upper band) */
    --fv-upper-ribbon-y-end: calc(100vw * 1360.4 / 1920);
    --fv-upper-top-left: 51.1%;
    --fv-upper-top-right: 80.4%;
    --fv-upper-bottom-right: 21.4%;
    --fv-upper-bottom-left: 0.1%;
    --fv-red-clip-upper: polygon(
      var(--fv-upper-top-left) 0,
      var(--fv-upper-top-right) 0,
      var(--fv-upper-bottom-right) var(--fv-upper-ribbon-y-end),
      var(--fv-upper-bottom-left) var(--fv-upper-ribbon-y-end)
    );
    clip-path: var(--fv-red-clip-upper);

    .intro-slot .intro {
      color: #fff;
      -webkit-text-fill-color: #fff;
    }

    @media screen and (max-width: 767px) {
      --fv-upper-sp-band-y: 730;
      --fv-upper-sp-y-top: var(--fv-header-height-sp);
      --fv-upper-sp-ribbon-y-end: calc(100vw * var(--fv-upper-sp-band-y) / 590);
      --fv-upper-sp-top-left-x: 65.75%;
      --fv-upper-sp-top-right-x: 132.83%;
      --fv-upper-sp-bottom-right-x: 42.1%;
      --fv-upper-sp-bottom-left-x: -31%;
      --fv-red-clip-upper: polygon(
        var(--fv-upper-sp-top-left-x) var(--fv-upper-sp-y-top),
        var(--fv-upper-sp-top-right-x) var(--fv-upper-sp-y-top),
        var(--fv-upper-sp-bottom-right-x)
          calc(var(--fv-upper-sp-y-top) + var(--fv-upper-sp-ribbon-y-end)),
        var(--fv-upper-sp-bottom-left-x)
          calc(var(--fv-upper-sp-y-top) + var(--fv-upper-sp-ribbon-y-end))
      );
    }
  }

  &.fv-on-red-layer--lower {
    --fv-hollow-bleed-left: 0.5vw;
    --fv-hollow-layer-offset-x: calc(50vw + var(--fv-hollow-bleed-left) - 50%);
    width: calc(
      100vw + var(--fv-hollow-bleed-left) + var(--fv-bleed-right-extra)
    );
    margin-left: calc(-50vw - var(--fv-hollow-bleed-left));

    --fv-lower-y-start: 130rem;
    --fv-lower-y-end: 208rem;
    --fv-lower-x-top: 63rem;
    --fv-lower-x-bottom: 1rem;
    --fv-red-clip-lower: polygon(
      0 var(--fv-lower-y-start),
      var(--fv-lower-x-top) var(--fv-lower-y-start),
      var(--fv-lower-x-bottom) var(--fv-lower-y-end),
      0 var(--fv-lower-y-end)
    );
    z-index: 4;
    clip-path: var(--fv-red-clip-lower);

    .fv-on-red {
      margin-left: var(--fv-hollow-layer-offset-x);
    }

    .slogan,
    .intro-slot {
      visibility: hidden;
    }
  }

  .hollow-text-slot--on-red {
    visibility: visible;
  }
}

@media print {
  .fv-bg-map,
  .fv-on-red-layer {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    margin-left: calc(-50vw - var(--fv-bleed-left)) !important;
  }
}

@keyframes fv1-slide-1 {
  0%,
  25% {
    opacity: 1;
  }

  33.33%,
  86.67% {
    opacity: 0;
  }

  93.33%,
  100% {
    opacity: 1;
  }
}

@keyframes fv1-slide-2 {
  0%,
  25% {
    opacity: 0;
  }

  33.33%,
  58.33% {
    opacity: 1;
  }

  66.66%,
  100% {
    opacity: 0;
  }
}

@keyframes fv1-slide-3 {
  0%,
  58.33% {
    opacity: 0;
  }

  66.66%,
  86.67% {
    opacity: 1;
  }

  93.33%,
  100% {
    opacity: 0;
  }
}

section {
  position: relative;
}

#fv,
.fv-on-red {
  padding: 32rem 10rem 25.3rem;
  @media screen and (max-width: 767px) {
    padding: 13rem 1rem 2.8rem 2rem;
  }

  .slogan {
    position: relative;
    margin: 0;

    .slogan__img {
      display: block;
      width: var(--fv-slogan-width, 104.56rem);
      height: auto;
      @media screen and (max-width: 767px) {
        width: 19.44rem;
      }
    }
  }

  .intro-slot {
    position: relative;
    margin-top: 8rem;
    min-height: var(--fv-intro-height, 18rem);

    @media screen and (max-width: 767px) {
      margin-top: 8rem;
      min-height: 18.5rem;
    }
  }

  .intro-slot .intro {
    position: absolute;
    inset: 0;
    margin: 0;
  }

  .intro {
    font-weight: 600;
    font-size: 2rem;
    line-height: 180%;
    letter-spacing: 0.02em;
    @media screen and (max-width: 767px) {
      font-size: 1.4rem;
    }
  }

  .main-img-container {
    position: absolute;
    top: 10rem;
    right: 0;
    width: 84rem;
    @media screen and (max-width: 767px) {
      width: 20.1rem;
      top: 7.7rem;
    }

    .fv1 {
      width: 100%;
      animation-duration: 12s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-fill-mode: both;

      &:first-child {
        position: relative;
        animation-name: fv1-slide-1;
      }

      &:not(:first-child) {
        position: absolute;
        inset: 0;
      }

      &:nth-child(2) {
        animation-name: fv1-slide-2;
      }

      &:nth-child(3) {
        animation-name: fv1-slide-3;
      }
    }
  }

  .fv2-img-container {
    margin-top: 10.9rem;
    width: 87.3rem;
    position: relative;
    @media screen and (max-width: 767px) {
      margin-top: 0;
      width: 17.8rem;
    }

    .fv2 {
      width: 100%;
      animation-duration: 12s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-fill-mode: both;
      animation-delay: 0.2s;

      &:first-child {
        position: relative;
        animation-name: fv1-slide-1;
      }

      &:not(:first-child) {
        position: absolute;
        inset: 0;
      }

      &:nth-child(2) {
        animation-name: fv1-slide-2;
      }

      &:nth-child(3) {
        animation-name: fv1-slide-3;
      }
    }
  }

  .fv3-img-container {
    position: absolute;
    bottom: 9rem;
    right: 10rem;
    width: 56.6rem;
    @media screen and (max-width: 767px) {
      width: 11.5rem;
      bottom: 8.8rem;
      right: 2rem;
    }

    .fv3 {
      width: 100%;
      animation-duration: 12s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-fill-mode: both;
      animation-delay: 0.4s;

      &:first-child {
        position: relative;
        animation-name: fv1-slide-1;
      }

      &:not(:first-child) {
        position: absolute;
        inset: 0;
      }

      &:nth-child(2) {
        animation-name: fv1-slide-2;
      }

      &:nth-child(3) {
        animation-name: fv1-slide-3;
      }
    }
  }

  .hollow-text-slot {
    position: relative;
    margin-top: 5rem;
    width: 125rem;
    line-height: 0;
    @media screen and (max-width: 767px) {
      width: 32.9rem;
      margin-top: 1rem;
    }
  }

  .hollow-text__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
  }

  .hollow-text__img--white {
    height: 100%;
    object-fit: contain;
    object-position: left top;
  }

  .hollow-text__spacer {
    visibility: hidden;
    width: 100%;
    height: auto;
    display: block;
  }

  @media (prefers-reduced-motion: reduce) {
    .main-img-container .fv1 {
      animation: none;

      &:not(:first-child) {
        display: none;
      }

      &:first-child {
        opacity: 1;
      }
    }
  }
}

.big-text {
  margin-top: 9rem;
  font-weight: 700;
  font-size: 4.8rem;
  line-height: 160%;
  letter-spacing: 0.04em;
  @media screen and (max-width: 767px) {
    margin-top: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 2.3rem;
    line-height: 160%;
    letter-spacing: 0.2rem;
  }
}

.small-text {
  margin-top: 3.2rem;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 180%;
  letter-spacing: 0.1em;
  @media screen and (max-width: 767px) {
    margin-top: 2.4rem;
    font-size: 1.4rem;
  }
}

#service {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  @media screen and (max-width: 767px) {
    padding-top: 6.4rem;
    padding-bottom: 6rem;
    &::before {
      content: "";
      position: absolute;
      top: 51.4rem;
      left: 50%;
      width: calc(100vw + var(--fv-bleed-left) + var(--fv-bleed-right-extra));
      height: 100%;
      margin-left: calc(-50vw - var(--fv-bleed-left));
      background: url("../img/index/service-bg-sp.png") no-repeat top left /
        contain;
      pointer-events: none;
      z-index: 0;
    }
  }

  .inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 8rem;
    box-sizing: border-box;
    @media screen and (max-width: 767px) {
      display: flex;
      flex-direction: column;
      gap: 2.4rem;
      padding: 0;
    }
    .left-area {
      width: 76.8rem;
      max-width: 100%;
      min-width: 0;
      @media screen and (max-width: 767px) {
        width: 100%;
      }
    }

    .right-area {
      padding-top: 5rem;
      min-width: 0;
      @media screen and (max-width: 767px) {
        padding-top: 1rem;
        width: 100%;
      }
    }
  }

  .scroll-horizontal-block {
    position: relative;
    z-index: 1;

    @media screen and (max-width: 1200px) {
      height: auto !important;
      margin-top: 10rem;
      margin-bottom: 20rem;
      padding-left: 5rem;
      box-sizing: border-box;
      min-width: 0;
      max-width: 100%;
      overflow-x: clip;
    }

    @media screen and (max-width: 767px) {
      padding-left: 0;
      margin-top: 4.8rem;
      margin-bottom: 0;
    }

    @media print {
      height: auto !important;
      margin-top: 4rem;
    }

    .scroll-horizontal-sticky {
      position: sticky;
      top: 0;
      height: 100dvh;
      overflow: hidden;
      display: flex;
      align-items: center;

      @media screen and (max-width: 1200px) {
        position: static;
        height: auto;
        overflow: visible;
        display: block;
        min-width: 0;
        max-width: 100%;
        width: 100%;
      }

      @media print {
        position: static;
        height: auto;
        overflow: visible;
        display: block;
      }

      .scroll-horizontal-track {
        display: flex;
        gap: 6.4rem;
        padding: 0 4rem;
        will-change: transform;

        @media screen and (max-width: 1200px) {
          width: 100%;
          min-width: 0;
          max-width: 100%;
          overflow-x: auto;
          overflow-y: visible;
          gap: 4rem;
          padding: 0 4rem 0 0;
          transform: none !important;
          will-change: auto;
          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          overscroll-behavior-x: contain;

          &::-webkit-scrollbar {
            display: none;
          }
        }

        @media screen and (max-width: 767px) {
          overflow-x: visible;
          overflow-y: visible;
          overscroll-behavior: auto;
          gap: 2.4rem;
          padding: 0 1.5rem;
          flex-direction: column;
          scroll-snap-type: none;
        }

        @media print {
          flex-direction: column;
          gap: 4rem;
          padding: 0;
          transform: none !important;
          will-change: auto;
        }

        .scroll-horizontal-item {
          flex-shrink: 0;
          width: calc((100vw - 8rem - 6.4rem) / 1.2);
          display: grid;
          grid-template-columns: 4fr 3fr;

          @media screen and (max-width: 1200px) {
            flex: 0 0 calc(100% - 4rem);
            width: calc(100% - 4rem);
            max-width: calc(100% - 4rem);
            scroll-snap-align: start;
            scroll-snap-stop: always;
          }

          @media screen and (max-width: 767px) {
            max-width: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            scroll-snap-align: none;
            scroll-snap-stop: normal;
          }

          @media print {
            width: 100%;
            display: grid;
            grid-template-columns: 4fr 3fr;
            page-break-inside: avoid;
          }

          & img {
            height: 100%;
            object-fit: cover;
            @media screen and (max-width: 767px) {
              width: 100%;
              height: 20rem;
              object-fit: cover;
            }

            @media print {
              width: 100%;
              height: auto;
            }
          }

          .texts {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(2rem);
            height: 100%;
            padding: 0 6.4rem;
            display: flex;
            flex-direction: column;
            justify-content: center;

            @media screen and (max-width: 1200px) {
              height: auto;
              padding: 3.2rem;
            }

            @media screen and (max-width: 767px) {
              height: auto;
              padding: 2rem;
              backdrop-filter: none;
              -webkit-backdrop-filter: none;
            }

            @media print {
              height: auto;
              padding: 2.4rem 3.2rem;
              -webkit-print-color-adjust: exact;
              print-color-adjust: exact;
            }

            .position {
              font-family: "Montserrat", sans-serif;
              font-weight: 700;
              font-size: 2rem;
              line-height: 100%;
              letter-spacing: 0.02em;
              color: var(--color-primary);

              @media screen and (max-width: 767px) {
                font-size: 1.4rem;
              }

              & span {
                font-weight: 700;
                font-size: 2rem;
                line-height: 100%;
                letter-spacing: 0.05em;
                color: #000000;

                @media screen and (max-width: 767px) {
                  font-size: 1.4rem;
                }
              }
            }

            .title {
              margin-top: 4.8rem;
              font-weight: 800;
              font-size: 5.6rem;
              line-height: 140%;
              letter-spacing: 0.05em;

              @media screen and (max-width: 767px) {
                margin-top: 1.6rem;
                font-size: 2rem;
              }
            }

            .desc {
              margin-top: 2.8rem;
              font-weight: 500;
              font-size: 1.8rem;
              line-height: 180%;
              letter-spacing: 0.02em;

              @media screen and (max-width: 767px) {
                margin-top: 1.6rem;
                font-size: 1.4rem;
              }
            }

            .black-btn {
              margin-top: 4rem;

              @media screen and (max-width: 767px) {
                margin-top: 1.6rem;
                width: 100%;
                height: 4.8rem;
              }
            }
          }
        }
      }
    }

    .scroll-horizontal-dots {
      display: none;

      @media screen and (max-width: 1200px) {
        margin-top: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
      }

      @media screen and (max-width: 767px) {
        display: none;
      }
    }

    .scroll-horizontal-dot {
      display: block;
      width: 2.8rem;
      height: 2.8rem;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background-color: #d1d5db;
      transition: background-color 0.2s ease;
      appearance: none;

      &.is-active {
        background-color: #1f2937;
      }
    }
  }
}

/* iPad: flattened (do NOT nest `html.view-ipad &` — Safari drops the rest of the nest) */
html.view-ipad #service {
  .scroll-horizontal-block {
    height: auto !important;
    margin-top: 10rem;
    margin-bottom: 20rem;
    padding-left: 5rem;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  .scroll-horizontal-sticky {
    position: static;
    height: auto;
    overflow: visible;
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .scroll-horizontal-track {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    gap: 4rem;
    padding: 0 4rem 0 0;
    transform: none !important;
    will-change: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .scroll-horizontal-item {
    flex: 0 0 calc(100% - 4rem);
    width: calc(100% - 4rem);
    max-width: calc(100% - 4rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .scroll-horizontal-item .texts {
    height: auto;
    padding: 3.2rem;
  }

  .scroll-horizontal-dots {
    margin-top: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }
}

#company {
  background-color: var(--color-bg-muted);
  padding: 28rem 0 0 24rem;

  @media screen and (max-width: 767px) {
    padding: 6.4rem 0 4rem;
  }

  .format {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 4rem;

    @media screen and (max-width: 767px) {
      display: flex;
      flex-direction: column;
      gap: 2.4rem;
      padding: 0 2rem;
    }

    .righty {
      & img {
        border-radius: 1.6rem 0 0 1.6rem;

        @media screen and (max-width: 767px) {
          border-radius: 1.6rem;
        }
      }
    }
  }

  .big-watermark {
    margin: -6rem 0 -2.5rem -17rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 18rem;
    line-height: 100%;
    letter-spacing: 0;
    color: #f4f4f4;
    mix-blend-mode: multiply;
    position: relative;
    z-index: -1;
    @media screen and (max-width: 767px) {
      margin: -1.3rem -2rem 0 -0.5rem;
      padding: 0;
      font-size: 5.28rem;
      line-height: 110%;
      letter-spacing: 0.124px;
      color: #f4f4f4;
    }
  }
  .small-text {
    margin-top: 9rem;
    @media screen and (max-width: 767px) {
      margin-top: 1.6rem;
      font-size: 1.4rem;
      letter-spacing: 2px;
    }
  }
}

#network {
  background-image: url("../img/index/4-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 10rem 8rem 15rem 24rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
    padding: 6.4rem 2rem 8.7rem;
    background: url("../img/index/network-bg.jpg") no-repeat top center /
      contain;
  }

  .text-region {
    @media screen and (max-width: 767px) {
      width: 100%;
      margin-bottom: 23.6rem;
    }
  }

  .picture-region {
    width: 75.7rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 7.4rem;

    @media screen and (max-width: 767px) {
      width: 100%;
      display: block;
      gap: 0;
      height: 38.751rem;
      background: url("../img/index/network-sp.png") no-repeat center / contain;
    }

    .pic1 {
      grid-column: span 2;
      width: calc(100% - 20rem);
      justify-self: end;

      @media screen and (max-width: 767px) {
        display: none;
      }
    }
    .pic2 {
      margin-top: 16.8rem;
      @media screen and (max-width: 767px) {
        display: none;
      }
    }
    .pic3 {
      width: calc(100% - 4.7rem);
      justify-self: start;
      @media screen and (max-width: 767px) {
        display: none;
      }
    }
  }
}

#recruit {
  position: relative;
  padding: 64rem 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: 100%;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: stretch;
    padding: 17rem 4rem 13.1rem;
    /* Clips position:fixed descendant without JS — kills top scroll lag/gap */
    clip-path: inset(0);
  }

  .recruit-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background-image: url("../img/index/5-bg-new-back.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    @media screen and (max-width: 767px) {
      /* Scroll fallback — fills full section when fixed+clip misses bottom pixels */
      background: url("../img/index/5-bg-new-back-sp.png") no-repeat top
        center / cover;
      background-attachment: scroll;
      filter: none !important;
      /* Don’t trap fixed; #recruit clip-path contains it */
      overflow: visible;
    }

    .recruit-bg-fixed {
      display: none;

      @media screen and (max-width: 767px) {
        display: block;
        position: fixed;
        /* Fill viewport — 100svh can leave a light gap on taller screens */
        inset: 0;
        z-index: 0;
        width: auto;
        height: auto;
        margin: 0;
        background: url("../img/index/5-bg-new-back-sp.png") no-repeat top
          center / cover;
        pointer-events: none;
      }
    }

    .recruit-bg-inner {
      position: absolute;
      inset: -1%;
      z-index: 0;
      background-image: url("../img/index/5-bg-new.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      will-change: filter;
      background: #e4eaf0;
      opacity: 0.8;

      @media screen and (max-width: 767px) {
        display: block;
        inset: 0;
        z-index: 1;
        background: url("../img/index/5-bg-new-sp.png") no-repeat top center /
          100% auto;
        filter: none !important;
        will-change: auto;
        opacity: 1;
      }
    }
  }

  .recruit-item--content {
    position: relative;
    z-index: 1;

    @media screen and (max-width: 767px) {
      width: 100%;
    }
  }

  .recruit-item-inner {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
    transition:
      opacity 1.2s ease,
      transform 1.2s ease;

    &.is-visible {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    @media screen and (max-width: 767px) {
      opacity: 1;
      transform: none;
    }
  }

  .recruit-item:not(.recruit-item--content) {
    position: absolute;
    z-index: 1;

    @media screen and (max-width: 767px) {
      position: static;
      width: 100%;
      margin-top: 5rem;
    }

    &.recruit-item--img1 {
      width: 53rem;
      top: 21.4rem;
      right: 26.1rem;
      @media screen and (max-width: 767px) {
        top: auto;
        right: auto;
        width: 110%;
        margin-left: -5%;
      }
      .recruit-item-inner {
        width: 100%;
        & img {
          width: 100%;
        }
      }
    }

    &.recruit-item--img2 {
      width: 30.4rem;
      top: 75.4rem;
      right: 13.8rem;

      @media screen and (max-width: 767px) {
        display: none;
      }
    }

    &.recruit-item--img3 {
      width: 36.3rem;
      top: 96.8rem;
      left: 10.3rem;

      @media screen and (max-width: 767px) {
        display: none;
      }
    }

    &.recruit-item--img4 {
      width: 58.6rem;
      bottom: 25.6rem;
      right: 9.4rem;

      @media screen and (max-width: 767px) {
        display: none;
      }
    }

    &.recruit-item--img5 {
      width: 47.5rem;
      bottom: 12.7rem;
      left: 28.1rem;

      @media screen and (max-width: 767px) {
        display: none;
      }
    }
  }
}

#news {
  background-color: #fff;
  padding: 28rem 0;

  @media screen and (max-width: 767px) {
    padding: 6.4rem 0;
  }

  .inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11.8rem;

    @media screen and (max-width: 767px) {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 0 1.5rem;
    }

    .right-area {
      .news-list {
        border-top: 0.1rem solid #d1d5db;

        .news-item {
          padding: 3.2rem 2.4rem;
          border-bottom: 0.1rem solid #d1d5db;
          display: grid;
          grid-template-columns: auto auto 1fr;
          align-items: center;
          gap: 2.4rem;

          @media screen and (max-width: 767px) {
            grid-template-columns: auto 1fr;
            grid-template-rows: auto auto;
            gap: 0.8rem 1.2rem;
            padding: 2.4rem 0;
          }

          .date {
            font-family: "Montserrat", sans-serif;
            font-weight: 600;
            font-size: 1.6rem;
            line-height: 100%;
            letter-spacing: 0.05em;

            @media screen and (max-width: 767px) {
              font-size: 1.2rem;
            }
          }

          .category {
            background-color: var(--color-bg-muted);
            width: 12rem;
            font-weight: 500;
            font-size: 1.4rem;
            line-height: 150%;
            text-align: center;
            letter-spacing: 0.05em;

            @media screen and (max-width: 767px) {
              width: fit-content;
              min-width: 8rem;
              padding: 0.2rem 0.8rem;
              font-size: 1.2rem;
              line-height: 1;
              display: inline-block;
            }
          }

          .title {
            font-weight: 500;
            font-size: 1.8rem;
            line-height: 180%;
            letter-spacing: 0.05em;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            @media screen and (max-width: 767px) {
              grid-column: 1 / -1;
              font-size: 1.4rem;
              line-height: 160%;
            }
          }
        }
      }
    }
  }
  .black-btn {
    margin-top: 9rem !important;
    width: 24rem;
    @media screen and (max-width: 767px) {
      margin-top: 3.2rem !important;
      width: 100%;
    }
  }
}