@charset "utf-8";
/* CSS Document */

/* l-mv*/
.l-mv {
  position: relative;
  z-index: 0;
  &::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    background-image: url("../img/top/mv_dec01.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    width: 57.6rem;
    aspect-ratio: 576 /942;
  }
  .inner {
    height: 74rem;
    position: relative;
    margin: 0 auto;
    width: 122.4rem;
  }

  .l-mv_ttl {
    position: absolute;
    z-index: 2;
    bottom: 3.4%;
    left: 0.55rem;
    h1 {
      width: 33.1rem;
    }

    .en {
      position: relative;
      margin-top: 3rem;
      padding-top: 3rem;
      color: var(--ivory, #feeab4);
      font-size: 1.3rem;
      font-style: normal;
      line-height: calc(21 / 13);
      &::before {
        content: "";
        display: block;
        position: absolute;
        z-index: 0;
        background-color: #feeab4;
        top: 0;
        left: 0;
        width: 10.8rem;
        height: 1px;
      }
    }
  }

  .mv_img {
    overflow: hidden;
    position: absolute;
    z-index: 1;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    iframe {
      width: 105.7%;
    }
  }
  .l-mv_topics {
    position: absolute;
    z-index: 2;
    bottom: 2%;
    right: -7.2rem;
    overflow: hidden;
    width: 47.8rem;
    display: flex;
    align-items: flex-end;
    flex-flow: wrap;
    justify-content: space-between;
    gap: 1rem 0;
    .ttl_topics {
      color: #feeab4;
      font-size: 1.4rem;
    }

    .btn_topics {
      margin-right: 2.8rem;
      width: 8.8rem;
      padding: 0.7em 0;
      color: #feeab4;
      font-size: 1.2rem;
      border-radius: 9999px;
      border: 1px solid #feeab4;
      text-align: center;
      transition: 0.3s;
      &:hover {
        background: #feeab4;
        color: #004e2b;
      }
    }

    .area_topics {
      width: 100%;
      padding: 2.9rem 2rem 2.9rem 4.4rem;
      background: #fff;
      border-radius: 8rem 0 0 8rem;
      display: flex;
      overflow: hidden;
      /* gap: 0 1.2rem; */
    }

    .list_topics {
      display: flex;
      align-items: center;
      /* padding-right: 1.2rem; */
      /* gap: 0 1.2rem; */
      animation: 30s scroll_topics infinite linear;
    }

    .card_topics {
      /* width: calc(100% / 3); */
      padding-right: 1.2rem;
      a {
        display: flex;
        gap: 0 1.2rem;
        align-items: center;
      }

      data {
        color: #004e2b;
        font-size: 1.4rem;
      }

      .tag {
        padding: 0.3rem 1.1rem 0.7rem;
        color: #fff;
        font-size: 1.2rem;
        border-radius: 1.1rem;
        background: #d15555;
      }
      .ttl {
        flex: 1;
        color: #333;
        font-size: 1.6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    @media screen and (min-width: 1371px) {
      width: calc(47.8rem + (50vw - 50%));
      right: calc(50% - 50vw);
    }
  }
  @media screen and (max-width: 768px) {
    overflow: hidden;
    &::after {
      width: 19.2rem;
    }
    &::before {
      content: "";
      display: block;
      position: absolute;
      z-index: -1;
      background-image: url("../img/top/mv_dec02.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      top: 28.6rem;
      right: 0;
      width: 18.7rem;
      aspect-ratio: 187 /200;
    }
    .inner {
      height: 100svh;
      width: 31.5rem;
    }

    .l-mv_ttl {
      bottom: 18%;
      left: 0em;
      h1 {
        width: 22em;
      }
      .en {
        margin-top: 1.4rem;
        font-size: 1.2rem;
      }
    }

    .mv_img {
      top: 35%;
      width: 180%;
      transform: translate(-50%, -50%) scale(0.8);
      transform-origin: center center;
      iframe {
        width: 92.7%;
      }
    }
    .l-mv_topics {
      bottom: 1%;
      left: 0;
      right: -3rem;
      width: auto;
      gap: 1.2rem 0;
      align-items: center;

      .ttl_topics {
        font-size: 1.2rem;
      }

      .btn_topics {
        margin-right: 2.4rem;
        width: 7.4rem;
        font-size: 1rem;
      }

      .area_topics {
        width: 100%;
        padding: 2.1rem 1.6rem 2.1rem 3.6rem;
        align-items: center;
        border-radius: 6rem 0 0 6rem;
      }

      .list_topics {
        animation: 16s scroll_topics infinite linear;
        padding-right: 1.2rem;
      }

      .card_topics {
        padding-right: 2.4rem;
        a {
          flex-flow: row;
          gap: 0 1rem;
        }
        data {
          font-size: 1.2rem;
        }
        .tag {
          padding: 0.3rem 0.9rem 0.6rem;
          font-size: 1rem;
          border-radius: 0.9rem;
        }
        .ttl {
          font-size: 1.3rem;
        }
      }
      @media screen and (min-width: 1371px) {
        width: calc(47.8rem + (50vw - 50%));
        right: calc(50% - 50vw);
      }
    }
  }
}
@keyframes scroll_topics {
  100% {
    translate: -100% 0;
  }
}

/* l-product */
.l-product {
  position: relative;
  margin-top: 6rem;
  padding-bottom: 15rem;
  &::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    background-image: url("../img/top/product_dec01.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    top: -4.3rem;
    right: 0;
    width: 68.3rem;
    aspect-ratio: 683 /576;
  }
  &::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    background-image: url("../img/top/product_dec02.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    bottom: 0;
    left: 0;
    width: 96.4rem;
    aspect-ratio: 964 /576;
  }

  .l-product_ttl {
    margin-bottom: 11.1rem;
    overflow: hidden;
    display: flex;
    /* gap: 4.5rem; */
    .ttl_card {
      display: flex;
      animation: 30s product_topics infinite linear;
      padding-right: 4.5rem;
      gap: 4rem;
      .ttl_text {
        width: 95.4rem;
        display: flex;
        align-items: flex-end;
        gap: 4.5rem;
        .ttl_img_text {
          width: 69.3rem;
        }

        .ttl_img {
          width: 22rem;
          border-radius: 17.5rem;
        }
      }
    }
  }

  .l-product_inner {
    margin: 0 auto;
    width: 121.7rem;

    .list_product_scroller {
      position: relative;
      height: 500vh;
      margin-bottom: 5.8rem;
    }

    .list_product {
      position: sticky;
      top: calc((100vh - 46.78rem) / 2);
      padding-left: 6.3rem;
      display: flex;
      justify-content: space-between;

      .list_product_img {
        position: relative;
        width: 53.1rem;

        .img-stack {
          position: relative;
          width: 100%;
          aspect-ratio: 1060 / 934;
          border-radius: 4rem;
          overflow: hidden;

          .img-item {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 0.5s ease;
            &.is-active {
              opacity: 1;
            }
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }

        .img-pagination {
          position: absolute;
          z-index: 1;
          top: 50%;
          left: -6.6rem;
          transform: translateY(-50%);
          display: flex;
          flex-flow: column;
          justify-content: center;
          gap: 1.7rem;
          li {
            width: 1.3rem;
            height: 1.3rem;
            border: 1px solid #feeab4;
            border-radius: 50%;
            background: rgba(254, 234, 180, 0);
            cursor: pointer;
            transition: background 0.3s;
            &.is-active {
              background: rgba(254, 234, 180, 1);
            }
          }
        }
      }

      .list_product_text {
        position: relative;
        z-index: 0;
        width: 58.8rem;
        .no {
          position: absolute;
          z-index: 1;
          top: 0;
          right: 0;
          width: 9.2rem;
          padding: 0 2.2rem 6rem 3.3rem;
          border-radius: 0 0 0 1.7rem;
          color: #feeab4;
          font-size: 1.1rem;
          line-height: calc(16 / 11);
          /* border: solid #feeab4;
          border-width: 0 0 1px 1px; */
          &::before {
            content: "";
            display: block;
            position: absolute;
            z-index: 0;
            top: 0;
            left: -1.7rem;
            width: 1.7rem;
            aspect-ratio: 1;
            border: solid #feeab4;
            border-width: 1px 1px 0 0;
            border-radius: 0 1.7rem 0 0;
          }
          &::after {
            content: "";
            display: block;
            position: absolute;
            z-index: 0;
            bottom: -1.7rem;
            right: 0;
            width: 1.7rem;
            aspect-ratio: 1;
            border: solid #feeab4;
            border-width: 1px 1px 0 0;
            border-radius: 0 1.7rem 0 0;
          }
          .label {
            &::after {
              content: "";
              display: block;
              position: absolute;
              z-index: -1;
              border: solid #feeab4;
              border-width: 0 0 1px 1px;
              top: 1.7rem;
              left: -1px;
              width: calc(100% - 1.7rem + 1px);
              height: calc(100% - 1.7rem + 1px);
              border-radius: 0 0 0 1.7rem;
            }
          }
          .num-wrap {
            position: relative;
            z-index: 0;
            font-size: 3.4rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            .num {
              position: absolute;
              top: 0;
              left: 0;
              opacity: 0;
              transition:
                opacity 0.35s ease,
                transform 0.35s ease;
              &.is-active {
                opacity: 1;
                transform: translateY(0);
              }

              &.is-enter {
                opacity: 0;
                transform: translateY(1.4rem);
              }

              &.is-exit {
                opacity: 0;
                transform: translateY(-1.4rem);
              }
            }
          }
        }

        .text-item {
          height: 100%;
          position: absolute;
          z-index: -1;
          opacity: 0;
          pointer-events: none;
          display: flex;
          flex-flow: column;
          &.is-active {
            position: static;
            opacity: 1;
            pointer-events: auto;
          }
          .item_inner {
            flex: 1;
            height: calc(100% - 10rem);
            padding: 10rem 8.2rem 0 7.6rem;
            border: solid #feeab4;
            border-width: 1px 1px 0 1px;
            border-radius: 3.4rem 0 0 0;
            color: var(--ivory, #feeab4);
            font-size: 1.6rem;
            line-height: 2;
            /* clip-path: polygon(-1px -1px, 48.1rem -1px, 48.1rem 11rem, 100% calc(11rem - 1px), calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */

            mask-image: linear-gradient(black, black), linear-gradient(black, black);
            mask-size:
              calc(100% - 10.7rem) 100%,
              100% calc(100% - 10.7rem);
            mask-position:
              left top,
              left bottom;
            mask-repeat: no-repeat, no-repeat;
            -webkit-mask-image: linear-gradient(black, black), linear-gradient(black, black);
            -webkit-mask-size:
              calc(100% - 10.7rem) 100%,
              100% calc(100% - 10.7rem);
            -webkit-mask-position:
              left top,
              left bottom;
            -webkit-mask-repeat: no-repeat, no-repeat;
          }
          h3 {
            margin-bottom: 0.9rem;
            font-size: 2.8rem;
            font-weight: 700;
          }

          a {
            height: 10rem;
            color: #feeab4;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;

            border: 1px solid #feeab4;
            border-radius: 0 0 3.4rem 3.4rem;
            gap: 0 1rem;
            &::after {
              content: "";
              display: block;
              background-image: url("../img/common/arrow_y.svg");
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center center;
              width: 1.5rem;
              aspect-ratio: 15 / 12;
              transition: 0.3s;
            }
            &:hover {
              &::after {
                transform: translateX(0.8rem);
              }
            }
          }
        }
      }
    }

    .other_product {
      & + .other_product {
        margin-top: 8rem;
      }
      h3 {
        margin-bottom: 3.9rem;
        color: #feeab4;
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: 0;
        display: flex;
        align-items: center;
        gap: 1.8rem;
        padding-left: 0.8rem;

        .en {
          font-size: 2.2rem;
          font-weight: 600;
          letter-spacing: 0;
          display: flex;
          align-items: center;

          &::before {
            content: "";
            display: block;
            background-image: url("../img/top/icon_other.svg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            width: 2rem;
            aspect-ratio: 1;
            margin-right: 1.27rem;
          }
          &::after {
            content: "";
            display: block;
            background-image: url("../img/top/icon_other02.svg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            width: 0.3rem;
            aspect-ratio: 3/17;
            margin-left: 1.2rem;
          }
        }
      }
      .s-head__lead {
        margin: -2rem 0 3.9rem;
        color: rgba(254, 234, 180, 0.85);
        font-size: 1.4rem;
        line-height: 2;
      }
      .list_other {
        display: flex;
        justify-content: center;
        gap: 2.4rem;
        li {
          opacity: 0;
          transform: translateY(2.4em);
          transition:
            opacity 0.8s ease,
            transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
          &:nth-child(1) {
            transition-delay: 0.1s;
          }
          &:nth-child(2) {
            transition-delay: 0.3s;
          }
          &:nth-child(3) {
            transition-delay: 0.5s;
          }
          position: relative;
          z-index: 0;
          padding: 6rem 4rem 5.4rem 5rem;

          width: 38.8rem;
          &::after {
            content: "";
            display: block;
            position: absolute;
            z-index: 0;
            border: 1px solid #feeab4;
            border-radius: 3.4rem;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            /* clip-path: polygon(0px 0px, calc(100% + 1px) 0px, calc(100% + 1px) calc(100% - 11rem + 1px), calc(100% - 11rem + 1px) calc(100% - 11rem + 1px), calc(100% - 11.1rem + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */

            mask-image: linear-gradient(black, black), linear-gradient(black, black);
            mask-size:
              100% calc(100% - 11rem),
              calc(100% - 11rem) 100%;
            mask-position:
              left top,
              left bottom;
            mask-repeat: no-repeat, no-repeat;
            -webkit-mask-image: linear-gradient(black, black), linear-gradient(black, black);
            -webkit-mask-size:
              100% calc(100% - 11rem),
              calc(100% - 11rem) 100%;
            -webkit-mask-position:
              left top,
              left bottom;
            -webkit-mask-repeat: no-repeat, no-repeat;
          }
          figure {
            position: relative;
            z-index: 0;

            overflow: hidden;
            border-radius: 2rem;

            &::after {
              content: "";
              display: block;
              position: absolute;
              z-index: 0;
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center center;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              border-radius: 2rem;
              border: 1px solid #feeab4;
              pointer-events: none;
            }
          }

          h4 {
            margin: 4.2rem 0 3rem;
            color: #feeab4;
            font-size: 2.2rem;
            font-weight: 700;
          }

          p {
            width: 20.8rem;
            color: rgba(254, 234, 180, 0.85);
            font-size: 1.4rem;
            line-height: 2;
          }

          .btn_other {
            position: absolute;
            z-index: 1;
            bottom: -1px;
            right: -1px;
            width: 9.4rem;
            aspect-ratio: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #feeab4;
            font-size: 1.2rem;
            font-weight: 400;
            /* border: solid #feeab4;
            border-width: 1px 0 0 1px;
            border-radius: 1.7rem 0 0 0; */
            &::before {
              content: "";
              display: block;
              position: absolute;
              z-index: 1;
              top: -1.7rem;
              right: 1px;
              width: 1.7rem;
              aspect-ratio: 1;
              border: solid #feeab4;
              border-width: 0 1px 1px 0;
              border-radius: 0 0 1.7rem 0;
            }
            &::after {
              content: "";
              display: block;
              position: absolute;
              z-index: 1;
              bottom: 1px;
              left: -1.7rem;
              width: 1.7rem;
              aspect-ratio: 1;
              border: solid #feeab4;
              border-width: 0 1px 1px 0;
              border-radius: 0 0 1.7rem 0;
            }
            .dec_arrow {
              padding-top: 1.1rem;
              display: flex;
              flex-flow: column;
              align-items: center;
              justify-content: center;
              gap: 1rem;
              &::before {
                content: "";
                display: block;
                position: absolute;
                z-index: -1;
                border: solid #feeab4;
                border-top-width: medium;
                border-right-width: medium;
                border-bottom-width: medium;
                border-left-width: medium;
                border-width: 1px 0 0 1px;
                top: -1px;
                left: -1px;
                width: calc(100% - 1.7rem + 1px);
                height: calc(100% - 1.7rem + 1px);
                border-radius: 1.7rem 0 0;
              }
              &::after {
                content: "";
                display: block;
                background-image: url("../img/common/arrow_y.svg");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
                width: 1.5rem;
                aspect-ratio: 15 / 12;
                transition: 0.3s;
              }
              &:hover {
                &::after {
                  transform: translateX(0.8rem);
                }
              }
            }
            /* .dec_mask {
              &::before {
                content: "";
                display: block;
                position: absolute;
                z-index: 0;
                top: -1.7rem;
                right: 0;
                width: 1.7rem;
                aspect-ratio: 1;
                background: #004e2b;
              }
              &::after {
                content: "";
                display: block;
                position: absolute;
                z-index: 0;
                bottom: 0;
                left: -1.7rem;
                width: 1.7rem;
                aspect-ratio: 1;
                background: #004e2b;
              }
            } */
          }
        }
      }

      &.is-go .list_other li {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
  @media screen and (max-width: 768px) {
    margin-top: 7.8rem;
    padding-bottom: 8rem;
    &::before {
      display: none;
    }
    &::after {
      background-image: url("../img/top/product_dec02_sp.png");
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 37.5rem;
      aspect-ratio: 750 /866;
    }

    .l-product_ttl {
      margin-bottom: 4.1rem;
      overflow: hidden;
      display: flex;
      /* gap: 4.5rem; */
      .ttl_card {
        display: flex;
        animation: 30s product_topics infinite linear;
        gap: 2rem;
        .ttl_text {
          width: 34.4rem;
          display: flex;
          align-items: flex-end;
          gap: 2.4rem;
          .ttl_img_text {
            width: 17rem;
          }

          .ttl_img {
            width: 15.1rem;
            border-radius: 17.5rem;
          }
        }
      }
    }

    .l-product_inner {
      width: 31.4rem;

      .list_product_scroller {
        height: 500vh;
        margin-bottom: 9.6rem;
      }

      .list_product {
        top: calc((100vh - 56rem) / 2);
        padding-left: 0;
        flex-flow: column;
        align-items: center;
        gap: 1.8rem;

        .list_product_img {
          overflow: unset;
          position: relative;
          width: 27.8rem;

          .img-stack {
            border-radius: 2.7rem;
          }

          .img-pagination {
            z-index: 1;
            top: 50%;
            bottom: auto;
            left: -2.8rem;
            transform: translateY(-50%);
            display: flex;
            flex-flow: column;
            justify-content: center;
            gap: 1rem;

            li {
              margin: 0;
              width: 0.8rem;
              height: 0.8rem;
            }
          }
        }

        .list_product_text {
          width: 27.8rem;
          .no {
            position: absolute;
            z-index: 1;
            top: 0;
            right: 0;
            width: 5rem;
            padding: 0 0.2rem 1.1rem 1.1rem;
            border-radius: 0 0 0 1.7rem;
            font-size: 1rem;
            &::before {
              content: "";
              display: block;
              position: absolute;
              z-index: 0;
              top: 0;
              left: calc(-0.6rem - 1px);
              left: -0.7rem;
              width: 0.7rem;
              aspect-ratio: 1;
              border: solid #feeab4;
              border-width: 1px 1px 0 0;
              border-radius: 0 0.7rem 0 0;
            }
            &::after {
              content: "";
              display: block;
              position: absolute;
              z-index: 0;
              bottom: -3.8rem;
              right: 0;
              width: 1rem;
              aspect-ratio: 1;
              border: solid #feeab4;
              border-width: 1px 1px 0 0;
              border-radius: 0 0.7rem 0 0;
            }
            .label {
              margin-bottom: 0.5rem;
              display: block;
              line-height: 1.2;
              &::after {
                content: "";
                display: block;
                position: absolute;
                z-index: -1;
                border: solid #feeab4;
                border-width: 0 0 1px 1px;
                top: 0.7rem;
                left: 0;
                width: calc(100% - 0.7rem);
                height: 5.2rem;
                border-radius: 0 0 0 0.7rem;
              }
            }
            .num-wrap {
              font-size: 2.8rem;
              margin-top: -1rem;
            }
          }

          .text-item {
            /* height: 100%; */
            position: absolute;
            z-index: -1;
            opacity: 0;
            pointer-events: none;
            display: flex;
            flex-flow: column;
            height: 30.2rem;

            &.is-active {
              position: static;
              opacity: 1;
              pointer-events: auto;
            }
            .item_inner {
              flex: 1;
              height: calc(100% - 5rem);
              padding: 3.6rem 4.2rem 3.8rem 4rem;
              border: solid #feeab4;
              border-width: 1px 1px 0 1px;
              border-radius: 2.4rem 0 0 0;
              color: var(--ivory, #feeab4);
              font-size: 1.3rem;
              line-height: 2;
              /* clip-path: polygon(-1px -1px, 26rem -1px, 26rem 6.8rem, calc(31.5rem + 1px) 6.8rem, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */

              mask-size:
                calc(100% - 5.7rem) 100%,
                100% calc(100% - 6.8rem);

              -webkit-mask-size:
                calc(100% - 5.7rem) 100%,
                100% calc(100% - 6.8rem);
            }
            h3 {
              margin-bottom: 0.7rem;
              font-size: 2rem;
              font-weight: 700;
            }

            a {
              height: 5rem;
              color: #feeab4;
              font-size: 1.2rem;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 1px solid #feeab4;
              border-radius: 0 0 2.4rem 2.4rem;
              gap: 0 1rem;

              &::after {
                content: "";
                display: block;
                background-image: url("../img/common/arrow_y.svg");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
                width: 1.5rem;
                aspect-ratio: 15 / 12;
                transition: 0.3s;
              }
              &:hover {
                &::after {
                  transform: translateX(0.8rem);
                }
              }
            }
          }
        }
      }

      .other_product {
        h3 {
          margin-bottom: 5.2rem;
          color: #feeab4;
          font-size: 1.4rem;
          font-weight: 700;
          letter-spacing: 0;
          display: flex;
          align-items: center;
          gap: 1.8rem;
          padding-left: 0;

          .en {
            font-size: 2.2rem;
            font-weight: 600;
            letter-spacing: 0em;
            display: flex;
            align-items: center;

            &::before {
              content: "";
              display: block;
              background-image: url("../img/top/icon_other.svg");
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center center;
              width: 2rem;
              aspect-ratio: 1;
              margin-right: 1.27rem;
            }
            &::after {
              content: "";
              display: block;
              background-image: url("../img/top/icon_other02.svg");
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center center;
              width: 0.3rem;
              aspect-ratio: 3/17;
              margin-left: 1.2rem;
            }
          }
        }
        .s-head__lead {
          margin: -2.5rem 0 5.2rem;
        }

        .list_other {
          flex-flow: column;
          gap: 2rem;
          li {
            position: relative;
            z-index: 0;
            padding: 5rem 3.6rem 4rem 3.6rem;
            width: 100%;

            &::after {
              content: "";
              display: block;
              position: absolute;
              z-index: 0;
              border: 1px solid #feeab4;
              border-radius: 3.4rem;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              /* clip-path: polygon(0px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% - 8.7rem), calc(100% - 8.7rem + 1px) calc(100% - 8.7rem), calc(100% - 8.7rem + 1px) calc(100% + 1px), -1px calc(100% + 1px)); */

              mask-size:
                100% calc(100% - 8.7rem),
                calc(100% - 8.7rem) 100%;
              -webkit-mask-size:
                100% calc(100% - 8.7rem),
                calc(100% - 8.7rem) 100%;
            }
            figure {
              position: relative;
              z-index: 0;

              overflow: hidden;
              border-radius: 2rem;

              &::after {
                content: "";
                display: block;
                position: absolute;
                z-index: 0;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 2rem;
                border: 1px solid #feeab4;
                pointer-events: none;
              }
            }

            h4 {
              margin: 3.2rem 0 1.8rem;
              color: #feeab4;
              font-size: 2.2rem;
              font-weight: 700;
            }

            p {
              width: 17.1rem;
            }

            .btn_other {
              position: absolute;
              z-index: 1;
              bottom: -1px;
              right: -1px;
              width: 7.6rem;
              aspect-ratio: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #feeab4;
              font-size: 1.2rem;
              font-weight: 400;

              /* border: solid #feeab4;
            border-width: 1px 0 0 1px;
            border-radius: 1.7rem 0 0 0; */
              &::before {
                content: "";
                display: block;
                position: absolute;
                z-index: 1;
                top: -1.2rem;
                right: 1px;
                width: 1.2rem;
                aspect-ratio: 1;
                border: solid #feeab4;
                border-width: 0 1px 1px 0;
                border-radius: 0 0 1.2rem 0;
              }
              &::after {
                content: "";
                display: block;
                position: absolute;
                z-index: 1;
                bottom: 1px;
                left: -1.2rem;
                width: 1.2rem;
                aspect-ratio: 1;
                border: solid #feeab4;
                border-width: 0 1px 1px 0;
                border-radius: 0 0 1.2rem 0;
              }
              .dec_arrow {
                padding-top: 0.5rem;
                gap: 0.6rem;
                &::before {
                  content: "";
                  width: calc(100% - 1.2rem + 1px);
                  height: calc(100% - 1.2rem + 1px);
                  border-radius: 1.2rem 0 0;
                }
                &::after {
                  content: "";
                  display: block;
                  background-image: url("../img/common/arrow_y.svg");
                  background-repeat: no-repeat;
                  background-size: cover;
                  background-position: center center;
                  width: 1.2rem;
                  aspect-ratio: 15 / 12;
                  transition: 0.3s;
                }
                &:hover {
                  &::after {
                    transform: translateX(0.8rem);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
@keyframes product_topics {
  100% {
    translate: -100% 0;
  }
}

/*l-about*/
.l-about {
  position: relative;
  background: #feeab4;

  .image_about {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 2055 / 599;
    picture {
      display: block;
      width: 100%;
      height: 100%;
    }
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 150%;
      object-fit: cover;
      will-change: transform;
    }
    @media screen and (max-width: 768px) {
      aspect-ratio: 750 / 330;
    }
  }

  .l-about_inner {
    position: relative;
    z-index: 3;
    margin: 0 auto;
    padding: 12rem 0 0 16.3rem;
    width: 123rem;
    .ttl02 {
      position: absolute;
      z-index: 1;
      top: 12rem;
      left: 2.6rem;
      color: #044b2b;
      font-size: 2.8rem;
      font-weight: 700;
      letter-spacing: 0.62rem;
      writing-mode: vertical-rl;
      display: flex;
      align-items: center;
      gap: 1.7rem;
      &::before {
        content: "";
        display: block;
        background-image: url("../img/top/icon_about.svg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        width: 2rem;
        aspect-ratio: 1;
      }
    }

    .box_top {
      margin: -22.6rem 0 10rem;
      display: flex;
      gap: 9.7rem;
      align-items: flex-end;

      .ttl_about {
        margin-bottom: -1rem;
        color: #044b2b;
        font-size: 4.4rem;
        font-weight: 700;
        line-height: normal;
      }

      .img_about01 {
        width: 33.1rem;
        border-radius: 4.8rem;
        overflow: hidden;
      }
    }

    .box_bottom {
      margin-bottom: 9.3rem;
      display: flex;
      justify-content: space-between;
      .box_text {
        width: 34.6rem;
        color: #044b2b;
        font-size: 1.4rem;
        line-height: 1.75;
        display: flex;
        flex-flow: column;

        .img_about01 {
          margin-top: auto;
          width: 26.7rem;
          img {
            border-radius: 2.4rem;
          }
        }
      }

      .box_link {
        width: 61.4rem;
        .card_link {
          &:last-of-type {
            a {
              border-bottom: 2px solid #044b2b;
            }
          }
          a {
            position: relative;
            z-index: 0;
            padding: 4.6rem 2.4rem 5rem 17.2rem;
            border-top: 2px solid #044b2b;
            display: flex;
            align-items: center;
            color: #044b2b;
            font-size: 2.8rem;
            font-weight: 700;
            transition:
              background-color 0.4s ease,
              color 0.4s ease,
              padding 0.4s ease;

            .en {
              position: absolute;
              left: 2.4rem;
              top: 50%;
              transform: translateY(-50%);
              font-size: 1.4rem;
              font-style: italic;
              font-weight: 600;
              transition:
                left 0.4s ease,
                color 0.4s ease;
            }

            .en.dec_arrow {
              position: static;
              transform: translateY(0);
              margin-left: auto;
              font-size: 1.1rem;
              font-weight: 400;
              line-height: 2;
              align-self: stretch;
              font-style: normal;
              display: flex;
              flex-flow: column;
              align-items: flex-end;
              justify-content: center;
              gap: 0.8rem;
              transition: color 0.4s ease;
              &::after {
                content: "";
                display: block;
                width: 1.5rem;
                aspect-ratio: 15 / 12;
                background-image: url("../img/common/arrow_g.svg");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
                transition:
                  transform 0.3s ease,
                  background-image 0s 0.1s;
              }
            }

            &:hover {
              background: #044b2b;
              color: #feeab4;
              padding-left: 18.2rem;
              .en {
                color: #feeab4;
                left: 3.4rem;
              }
              .en.dec_arrow {
                color: #feeab4;
                &::after {
                  background-image: url("../img/common/arrow_y.svg");
                  transform: translateX(0.8rem);
                }
              }
            }
          }
        }
      }
    }
  }

  .scroll_about {
    overflow: hidden;
    display: flex;
    /* gap: 3rem; */
    transform: translateY(0.3rem);
    .scroll_card {
      display: flex;
      /* gap: 3rem; */
      animation: 30s scroll_about infinite linear;
      .scroll_text {
        width: 96.8rem;
        padding-left: 3rem;
      }
    }
  }
  @media screen and (max-width: 768px) {
    .l-about_inner {
      padding: 27.5rem 0 6.6rem 0;
      width: 31.5rem;
      display: flex;
      flex-flow: column;

      .ttl02 {
        top: 2.3rem;
        left: 0;
        font-size: 1.4rem;
        letter-spacing: 0.62rem;
        gap: 0.2rem;
      }

      .box_top {
        display: contents;

        .ttl_about {
          order: 2;
          margin-bottom: 3rem;
          font-size: 2.2rem;
        }

        .img_about01 {
          order: 1;
          position: absolute;
          top: -5.5rem;
          right: 3.3rem;
          width: 19.9rem;
          border-radius: 2.5rem;
        }
      }

      .box_bottom {
        display: contents;
        .box_text {
          display: contents;
          p {
            order: 3;
            margin-bottom: 4.3rem;
            width: 26.2rem;
            font-size: 1.4rem;
          }

          .img_about01 {
            order: 5;

            margin: 0 0 0 4.5rem;
            width: 17rem;
            img {
              border-radius: 1.5rem;
            }
          }
        }

        .box_link {
          order: 4;
          margin-bottom: 5rem;

          width: 24.8rem;
          .card_link {
            &:last-of-type {
              a {
                border-bottom: 1px solid #044b2b;
              }
            }
            a {
              padding: 2rem 1.2rem 2rem 8.6rem;
              border-top: 1px solid #044b2b;
              font-size: 1.6rem;

              .en {
                width: 6.7rem;
                left: 1.2rem;
                font-size: 1.2rem;
                line-height: calc(16 / 12);
              }

              .en.dec_arrow {
                width: 4.2rem;
                line-height: normal;
                &::after {
                  width: 1.2rem;
                }
              }

              &:hover {
                padding-left: 9.2rem;
                .en {
                  left: 1.8rem;
                }
              }
            }
          }
        }
      }
    }

    .scroll_about {
      pointer-events: none;
      position: absolute;
      z-index: -1;
      top: 0;
      right: 0;
      height: 100%;
      display: flex;
      flex-flow: column;
      /* gap: 2rem; */
      transform: translateY(0);
      .scroll_card {
        display: flex;
        flex-flow: column;
        /* gap: 2rem; */
        animation: 20s scroll_about infinite linear;
        .scroll_text {
          width: 3.02rem;
          padding: 0 0 2rem 0;
        }
      }
    }
  }
}
@keyframes scroll_about {
  100% {
    translate: -100% 0;
  }
}
@media screen and (max-width: 768px) {
  @keyframes scroll_about {
    100% {
      translate: 0 -100%;
    }
  }
}

@keyframes recruit_dec03_spin {
  from {
    transform: var(--dec03-tx, translateX(-50%)) rotate(0deg);
  }
  to {
    transform: var(--dec03-tx, translateX(-50%)) rotate(360deg);
  }
}

/*l-recruit */
.l-recruit {
  overflow: hidden;
  position: relative;
  z-index: 0;
  &::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    background-image: url("../img/top/recruit_dec01.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    top: 0;
    right: 0;
    width: 48.7rem;
    aspect-ratio: 487 /201;
  }
  &::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    background-image: url("../img/top/recruit_dec02.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    bottom: 0;
    left: 0;
    width: 51rem;
    aspect-ratio: 510 /765;
  }
  .l-recruit_inner {
    position: relative;
    z-index: 0;
    padding: 18rem 0 11rem 6.9rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* gap: 8rem; */
    flex-flow: row-reverse;
    margin: 0 auto;
    width: 123rem;

    .box_text {
      margin-bottom: 3rem;
      width: 28.9rem;

      color: #feeab4;
      font-size: 1.6rem;
      line-height: 2;
      .ttl02 {
        margin-bottom: 9.4rem;
        padding-bottom: 4.7rem;
        border-bottom: 1px solid #feeab4;
        color: #feeab4;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1;

        .en {
          display: block;
          margin-bottom: 1rem;
          font-size: 1.2rem;
          font-weight: 400;
        }
      }

      .btn_recruit {
        margin-top: 4.5rem;
        width: 14.7rem;
        aspect-ratio: 147/50;
        font-size: 1.2rem;
        color: #feeab4;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.2rem;
        border: 1px solid #feeab4;
        border-radius: 2.5rem;
        transition:
          background 0.3s,
          color 0.3s;

        &::after {
          content: "";
          display: block;
          background-image: url("../img/common/arrow_y.svg");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
          width: 1.5rem;
          aspect-ratio: 15 / 12;
          transition:
            transform 0.3s ease,
            background-image 0s 0.1s;
        }
        &:hover {
          background: #feeab4;
          color: #044b2b;
          &::after {
            background-image: url("../img/common/arrow_g.svg");
            transform: translateX(0.8rem);
          }
        }
      }
    }

    h3 {
      width: 22.2rem;
      transform: translateY(-11.2rem);
    }

    .ttl_recruit_split {
      position: relative;
      .ttl_col {
        display: block;
      }
      .c1 {
        clip-path: inset(0 66.5% 0 0);
        -webkit-clip-path: inset(0 66.5% 0 0);
      }
      .c2,
      .c3 {
        position: absolute;
        inset: 0;
      }
      .c2 {
        clip-path: inset(0 33% 0 33.5%);
        -webkit-clip-path: inset(0 33% 0 33.5%);
      }
      .c3 {
        clip-path: inset(0 0 0 66.5%);
        -webkit-clip-path: inset(0 0 0 66.5%);
      }
      @media screen and (max-width: 768px) {
        .c1 {
          clip-path: inset(0 50% 0 0);
          -webkit-clip-path: inset(0 50% 0 0);
        }
        .c2 {
          display: none;
        }
        .c3 {
          clip-path: inset(0 0 0 50%);
          -webkit-clip-path: inset(0 0 0 50%);
        }
      }
    }

    &.ani00 .ttl_col {
      opacity: 0;
      transform: translateY(2.4em);
      transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    &.ani00.is-go .c3 {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.25s;
    }
    &.ani00.is-go .c2 {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.45s;
    }
    &.ani00.is-go .c1 {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.65s;
    }

    .about_img {
      position: relative;
      z-index: -1;
      margin: 0 0 0 2.9rem;
      width: 45.6rem;
      &::after {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        background-image: url("../img/top/recruit_dec03.svg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        top: -18%;
        left: 50%;
        transform: translateX(-50%);
        width: 78.2rem;
        aspect-ratio: 782 /792;
        animation: recruit_dec03_spin 60s linear infinite;
      }
      .slide00 {
        position: absolute;
        top: 0;
        left: 0;
        transition: 0.3s;
      }
      .slide01 {
        position: relative;
        z-index: 3;
      }
      .slide02 {
        opacity: 2;
      }
      .slide03 {
        z-index: 1;
      }
    }
  }
  @media screen and (max-width: 768px) {
    padding: 6rem 0 10rem;
    &::before {
      background-image: url("../img/top/recruit_dec01_sp.png");
      width: 23.2rem;
      aspect-ratio: 232 /140;
    }
    &::after {
      background-image: url("../img/top/recruit_dec02_sp.png");
      width: 30.5rem;
      aspect-ratio: 305 /527;
    }
    .l-recruit_inner {
      position: relative;
      z-index: 0;
      padding: 4rem 0 0;
      flex-flow: column;
      margin: 0 auto;
      width: 31.5rem;

      .box_text {
        order: 3;
        margin: 4rem 0 0;
        width: 100%;
        font-size: 1.4rem;
        align-self: flex-start;

        .ttl02 {
          margin-bottom: 4.2rem;
          padding-bottom: 3.4rem;
          border-bottom: 1px solid #feeab4;
          color: #feeab4;
          font-size: 2.4rem;
          font-weight: 700;
          line-height: 1;

          .en {
            display: block;
            font-size: 1.2rem;
            font-weight: 400;
            margin-bottom: 1.2rem;
          }
        }

        .btn_recruit {
          margin-top: 4.5rem;
        }
      }

      h3 {
        order: 1;
        position: relative;
        z-index: 2;
        top: auto;
        left: auto;
        transform: none;
        margin: 0;
        width: 100%;
      }

      .about_img {
        order: 2;
        position: absolute;
        z-index: 1;
        top: 13.5rem;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        width: 17rem;
        &::after {
          --dec03-tx: translate(-50%, -50%);
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 44rem;
          margin: 0;
        }
      }
    }
  }
}

/* 採用ページ Page Hero 直下用：3カラム（左:見出し / 中:写真 / 右:本文）バリアント */
/* 本文に被る背景デコ(recruit_dec01/02)は PC/SP 共通で非表示 */
.l-recruit.l-recruit--intro::before,
.l-recruit.l-recruit--intro::after {
  display: none;
}

/* 3カラムレイアウトは PC のみに適用（769px 以上）。SP は TOP の .l-recruit SP スタイルをそのまま継承 */
@media screen and (min-width: 769px) {
  .l-recruit.l-recruit--intro {
    .l-recruit_inner {
      /* grid 1fr auto 1fr で写真コンテナを左右センターに固定 */
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 4rem;
      padding: 10rem 6.9rem;
      width: 123rem;

      h3 {
        position: relative;
        z-index: 1;
        transform: none;
        width: 22.2rem;
        margin: 0;
        justify-self: start;
      }
      .about_img {
        margin: 0;
        width: 34rem;
        justify-self: center;
        /* z-index: -1 は TOP のまま。回転デコは photo を少し超える程度に縮め中央配置 */
        &::after {
          --dec03-tx: translate(-50%, -50%);
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 68rem;
          aspect-ratio: 1 / 1;
        }
      }
      .box_text {
        width: auto;
        max-width: 33rem;
        margin: 0;
        justify-self: end;
        color: #feeab4;
        font-size: 1.5rem;
        line-height: 2;
        position: relative;
        z-index: 1;
        p {
          margin-bottom: 2rem;
        }
        p:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}