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

/* 共通 */
/*--------------------*/
/* ページタイトル */
hgroup.page_title_wrap {
  position: relative;
  &.backtelop {
    margin: 4.8rem 0 5.6rem;
    padding-top: 11rem;
    width: 100%;
    @media screen and (max-width: 480px) {
      margin: 2rem 0 3rem;
      padding-top: 5.8rem;
    }
    h1 {
      position: relative;
      max-width: 120rem;
      padding: 0 2rem;
      margin: 0 auto;
      line-height: 1.5;
      color: var(--color-gray);
      font-size: 4.8rem;
      letter-spacing: 0.05em;
      font-weight: 500;
      @media screen and (max-width: 480px) {
        font-size: 2.8rem;
      }
    }
  }
}

/* テロップ */
.telop_wrap {
  align-items: center;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  ul {
    overflow: hidden;
    display: flex;
    width: 100vw;
    margin-inline: calc(50% - 50vw);

    li {
      flex-shrink: 0;
      white-space: nowrap;
      padding: 0 2vw;
      @media screen and (max-width: 480px) {
        padding: 0 5vw;
      }
      &:nth-child(odd) {
        animation: MoveLeft 20s -10s infinite linear;
      }
      &:nth-child(even) {
        animation: MoveLeft2 20s infinite linear;
      }
    }
    /* ニュース */
    &.news {
      li {
        width: 37.628vw;
        @media screen and (max-width: 480px) {
          width: 72vw;
        }
      }
    }
    &.company {
      li {
        width: 167.72vw;
        &:nth-child(odd) {
          animation: MoveLeft 80s -40s infinite linear;
        }
        &:nth-child(even) {
          animation: MoveLeft2 80s infinite linear;
        }
        @media screen and (max-width: 480px) {
          width: 321.6vw;
        }
      }
    }
    &.business {
      li {
        width: 69.03vw;
        &:nth-child(odd) {
          animation: MoveLeft 34s -17s infinite linear;
        }
        &:nth-child(even) {
          animation: MoveLeft2 34s infinite linear;
        }
        @media screen and (max-width: 480px) {
          width: 132.53vw;
        }
      }
    }
    &.products {
      li {
        width: 69.03vw;
        &:nth-child(odd) {
          animation: MoveLeft 34s -17s infinite linear;
        }
        &:nth-child(even) {
          animation: MoveLeft2 34s infinite linear;
        }
        @media screen and (max-width: 480px) {
          width: 132.53vw;
        }
      }
    }
  }
}

@keyframes MoveLeft {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes MoveLeft2 {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-200%);
  }
}

/*--------------------*/
/* グラデタイトル */

hgroup.title-en_jp {
  h2 {
    font-size: 7rem;
    margin-bottom: 0.4rem;
    span {
      background: var(--grade-light-blue_orange);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .ja_text {
    font-size: 2rem;
    letter-spacing: 0.05em;
  }
  @media screen and (max-width: 480px) {
    h2 {
      font-size: 3.5rem;
      margin-bottom: 0.2rem;
    }
    .ja_text {
      font-size: 1.4rem;
    }
  }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
企業情報
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

body.company {
  /* 共通 */
  section {
    padding: 0 2rem;
    max-width: 120rem;
    margin-right: auto;
    margin-left: auto;
    position: relative;
  }

  section.top_message {
    margin-bottom: 14.6rem;
    @media screen and (max-width: 480px) {
      margin-bottom: 8.4rem;
    }
    .inner {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10.6rem;
      @media screen and (max-width: 480px) {
        display: block;
        margin-bottom: 4.8rem;
      }

      .text_wrap {
        width: 60rem;
        @media screen and (max-width: 480px) {
          width: 100%;
          margin-bottom: 2rem;
        }

        hgroup {
          margin-bottom: 4rem;
          @media screen and (max-width: 480px) {
            margin-bottom: 2rem;
          }
        }

        p {
          font-size: 1.6rem;
          line-height: 1.875;
          @media screen and (max-width: 480px) {
            font-size: 1.4rem;
            line-height: 2;
          }

          &.signature {
            margin-top: 3em;
            @media screen and (max-width: 480px) {
              margin-top: 2em;
            }
            small {
              font-size: 0.875em;
            }
          }
        }
      }

      .img_wrap {
        position: relative;
        width: 51rem;
        @media screen and (max-width: 480px) {
          width: 91%;
          min-height: 32.1rem;
          margin: auto;
        }
        .item {
          position: absolute;
          &.img-01 {
            right: 0;
            top: 5.8rem;
            width: 19.6rem;
          }
          &.img-02 {
            width: 26.7rem;
            left: 0;
            top: 17.5rem;
          }
          &.img-03 {
            width: 24.8rem;
            top: 55rem;
            right: 12.4rem;
          }
          @media screen and (max-width: 480px) {
            &.img-01 {
              right: 0;
              top: 0;
              width: 11.2rem;
            }
            &.img-02 {
              width: 15.2rem;
              left: 0;
              top: 3.6rem;
            }
            &.img-03 {
              width: 14.2rem;
              bottom: 0;
              top: auto;
              right: 5.5rem;
            }
          }
        }
      }
    }
    a.button {
      margin: auto;
    }
  }

  section.outline {
    hgroup {
      margin-bottom: 4rem;
      @media screen and (max-width: 480px) {
        margin-bottom: 2rem;
      }
    }
    table {
      width: 100%;
      tbody {
        tr {
          &:nth-child(2n + 1) {
            background-color: #f5f6f6;
          }
          th,
          td {
            padding: 2.4rem 3.2rem;
            font-size: 1.8rem;
            line-height: 2;
            font-weight: normal;
            vertical-align: top;
            text-align: left;
            @media screen and (max-width: 480px) {
              font-size: 1.4rem;
              padding: 0.8rem 1.2rem;
              line-height: 1.75;
            }
          }
          th {
            width: 12.6rem;
            @media screen and (max-width: 480px) {
              width: 6.5rem;
            }
          }
        }
      }
    }
  }

  section.philosophy {
    margin-bottom: 12.8rem;
    background-image: url(../img/company/bg-philosophy.webp);
    background-repeat: no-repeat;
    background-position: center 4rem;
    background-size: 84.17% auto;
    @media screen and (max-width: 480px) {
      margin-bottom: 8.6rem;
    }
    hgroup {
      margin-bottom: 1.8rem;
    }

    .slogan_wrap {
      h4 {
        font-size: 3.2rem;
        color: var(--color-orange);
        text-align: center;
        opacity: 0.5;
        margin-bottom: 1.2rem;
        @media screen and (max-width: 480px) {
          font-size: 1.5rem;
        }
      }
      p {
        text-align: center;
        font-size: 4.8rem;
        letter-spacing: 0.05em;
        padding-left: 0.05em;
        font-weight: 800;
        color: var(--color-blue);
        @media screen and (max-width: 480px) {
          font-size: 2rem;
          line-height: 1.3;
        }
        span {
          display: inline-block;
          padding: 0.25em;
          border-bottom: 7px solid var(--color-orange);
          @media screen and (max-width: 480px) {
            border-width: 3px;
          }
        }
      }
    }

    .flow_wrap {
      position: relative;
      max-width: 110rem;
      margin: auto;

      .circle {
        width: 24.6rem;
        aspect-ratio: 1/1;
        padding: 2rem;
        box-sizing: border-box;
        background-color: var(--color-blue);
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2rem;
        color: #fff;
        position: relative;
        z-index: 10;
        @media screen and (max-width: 480px) {
          width: 9.5rem;
          padding: 1.2rem;
          gap: 0.7rem;
        }
        &.orange {
          background-color: var(--color-orange);
        }
        h5 {
          font-size: 3.3rem;
          @media screen and (max-width: 480px) {
            font-size: 1.5rem;
          }
        }
        p {
          font-size: 1.8rem;
          font-weight: 600;
          line-height: 1.5;
          text-align: center;
          @media screen and (max-width: 480px) {
            font-size: 1rem;
          }
        }
      }
      .whitebox {
        background-color: #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        line-height: 1.3;
        padding: 1.2rem;
        border-radius: 1rem;
        position: relative;
        z-index: 5;
        @media screen and (max-width: 480px) {
          border-radius: 0.4rem;
        }
      }

      /* vision */
      .vision_wrap {
        position: relative;
        .circle {
          margin: auto;
        }
        .whitebox {
          padding-top: 5.5rem;
          padding-bottom: 2.5rem;
          margin-top: -3rem;
          @media screen and (max-width: 480px) {
            padding-top: 3.6rem;
            padding-bottom: 1.2rem;
            width: 73%;
            margin-right: auto;
            margin-left: auto;
          }
          p {
            font-size: 3.2rem;
            font-weight: 700;
            text-align: center;
            letter-spacing: 0.025em;
            padding-left: 0.025em;
            line-height: 1.3;
            @media screen and (max-width: 480px) {
              font-size: 1.2rem;
              word-break: keep-all;
            }
          }
        }
      }
      /* 矢印 */
      .allow {
        &::before,
        &::after {
          content: "";
          display: block;
          width: 4.6rem;
          aspect-ratio: 1/1;
          background-image: url(../img/common/icon-allow.svg);
          background-size: contain;
          background-repeat: no-repeat;
          position: absolute;
        }
        @media screen and (max-width: 480px) {
          &::before,
          &::after {
            width: 2.4rem;
          }
        }
      }
      /* その他 */
      .blue_wrap {
        margin: 10.8rem 0 8.8rem;
        position: relative;
        display: flex;
        justify-content: space-between;
        @media screen and (max-width: 480px) {
          margin: 4.2rem 0 4rem;
          display: block;
          min-height: 37.4rem;
        }
        &.allow {
          &::before {
            top: -7.2rem;
            left: 50%;
            transform: translateX(-50%);
          }
          &::after {
            bottom: -7.2rem;
            left: 50%;
            transform: translateX(-50%) rotate(180deg);
          }
          @media screen and (max-width: 480px) {
            &::before {
              top: -3.2rem;
            }
            &::after {
              bottom: -3.2rem;
            }
          }
        }
        .item {
          width: 30.2rem;
          @media screen and (max-width: 480px) {
            width: auto;
          }
          .circle {
            margin: auto;
            @media screen and (max-width: 480px) {
              position: absolute;
              top: 0;
              &.value {
                left: 0;
                &::after {
                  content: "";
                  display: block;
                  position: absolute;
                  background-color: var(--color-blue);
                  width: 1px;
                  height: 18rem;
                  left: 50%;
                  bottom: 0;
                  transform: translateY(100%);
                }
              }
              &.mission {
                left: 0;
                right: 0;
              }
              &.spirit {
                right: 0;
                &::after {
                  content: "";
                  display: block;
                  position: absolute;
                  background-color: var(--color-blue);
                  width: 1px;
                  height: 18rem;
                  left: 50%;
                  bottom: 0;
                  transform: translateY(100%);
                }
              }
            }

            &.allow {
              &::before {
                top: 50%;
                left: -10rem;
                transform: translateY(-50%) rotate(-90deg);
              }
              &::after {
                top: 50%;
                right: -10rem;
                transform: translateY(-50%) rotate(90deg);
              }
              @media screen and (max-width: 480px) {
                &::before {
                  left: -2rem;
                  width: 1.6rem;
                }
                &::after {
                  right: -2rem;
                  width: 1.6rem;
                }
              }
            }
          }
          .whitebox {
            padding-top: 15.4rem;
            margin-top: -13.5rem;
            min-height: 46rem;
            box-sizing: border-box;
            @media screen and (max-width: 480px) {
              margin-top: auto;
              padding-top: 1.2rem;
              min-height: auto;
              width: 16.2rem;
              position: absolute;
              z-index: 15;

              &.value {
                bottom: 0;
                left: 0;
              }
              &.spirit {
                bottom: 0;
                right: 0;
              }
              &.mission {
                top: 10.8rem;
                left: 0;
                right: 0;
                margin: auto;
                width: 18.6rem;
                &::after {
                  content: "";
                  display: block;
                  position: absolute;
                  background-color: var(--color-blue);
                  width: 1px;
                  height: 1.4rem;
                  left: 50%;
                  top: 0;
                  transform: translateY(-100%);
                }
              }
            }
            ul,
            p {
              font-feature-settings: "palt";
              font-size: 2.4rem;
              font-weight: 600;
              text-align: left;
              max-width: 24rem;
              margin: auto;
              @media screen and (max-width: 480px) {
                font-size: 1.2rem;
                max-width: 100%;
              }
            }
            p {
              word-break: keep-all;
              line-height: 1.7;
            }
            ul {
              padding-left: 1em;
              line-height: 1.2;
              li {
                margin-bottom: 0.5em;
                position: relative;
                &::before {
                  content: "●";
                  color: var(--color-blue);
                  font-size: 0.5em;
                  position: absolute;
                  left: -1.5em;
                  top: 0.65em;
                }
                span {
                  font-size: 0.75em;
                }
              }
            }
          }
        }
      }
    }
  }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
トップページ
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

body.home {
  section {
    position: relative;
    z-index: 1;
    /* 共通 */
    hgroup.page_title_wrap {
      margin: auto;
      .title_inner {
        padding: 0 2rem;
        max-width: 120rem;
        margin: auto;
      }
    }
    .inner {
      padding: 0 2rem;
      max-width: 120rem;
      margin: auto;
      position: relative;
      /* タイトル下コピー */
      .lead_copy {
        font-size: 3.2rem;
        letter-spacing: 0.045em;
        line-height: 1.5;
        font-weight: 500;
        margin: 4rem 0;
        text-align: left;
        word-break: keep-all;
        @media screen and (max-width: 480px) {
          font-size: 1.6rem;
          margin: 1.8rem 0;
        }
      }
    }
  }
  /* ビジネス */
  section.business_wrap {
    background-image: url(../img/top/business-back.svg);
    background-repeat: no-repeat;
    background-size: 197rem auto;
    background-position: top 21.4rem center;
    padding-bottom: 27.4rem;
    .lead_copy {
      width: 60%;
      @media screen and (max-width: 480px) {
        width: 100%;
      }
    }
    .flex_wrap {
      display: flex;
      justify-content: center;
      gap: 4.6rem;
      @media screen and (max-width: 480px) {
        flex-direction: column;
        justify-content: flex-end;
        gap: 2.4rem;
      }

      .item {
        width: 47.6rem;
        height: 50.8rem;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        box-sizing: border-box;
        padding: 3rem 3.6rem;
        display: flex;
        align-items: flex-end;
        @media screen and (max-width: 480px) {
          width: 30.7rem;
          height: 22rem;
          padding: 2rem 2.4rem;
        }
        .text {
          color: #fff;
          h3 {
            font-size: 3.6rem;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 1.6rem;
            @media screen and (max-width: 480px) {
              font-size: 2.4rem;
              margin-bottom: 1.1rem;
            }
            + span {
              font-size: 2.4rem;
              color: #c7c8c8;
              @media screen and (max-width: 480px) {
                font-size: 1.8rem;
              }
            }
          }
        }
        &.sales {
          background-image: url(../img/top/business-img-01.webp);
          @media screen and (max-width: 480px) {
            background-image: url(../img/top/business-img-01-sp.webp);
          }
        }
        &.maintenance {
          margin-top: 10.2rem;
          background-image: url(../img/top/business-img-02.webp);
          @media screen and (max-width: 480px) {
            margin-top: 0;
            align-self: flex-end;
            background-image: url(../img/top/business-img-02-sp.webp);
          }
        }
      }
    }
    .sdgs {
      position: absolute;
      right: 12rem;
      top: -9.8rem;
      @media screen and (max-width: 480px) {
        position: static;
        margin-top: 4rem;
      }
      h4 {
        font-size: 2rem;
        line-height: 1.5;
        letter-spacing: 0.045em;
        padding-left: 0.045em;
        text-align: center;
        font-weight: 400;
        @media screen and (max-width: 480px) {
          font-size: 1.3rem;
        }
      }
      ul {
        display: flex;
        @media screen and (max-width: 480px) {
          margin: auto;
          width: 20rem;
        }
        li {
          width: 15.5rem;
          @media screen and (max-width: 480px) {
            width: 10rem;
          }
        }
      }
    }
  }

  /* 企業情報 */
  section.company_wrap {
    margin-bottom: 14rem;
    @media screen and (min-width: 481px) {
      .lead_copy {
        margin-bottom: 0;
      }
    }

    .flex_wrap {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      @media screen and (max-width: 480px) {
        flex-direction: column-reverse;
      }
      ul.link_list {
        min-width: 56.9rem;
        @media screen and (max-width: 480px) {
          width: 100%;
          min-width: auto;
        }
        li {
          border-bottom: 1px solid #000;

          a {
            display: block;
            padding: 2.6rem 7rem 4rem 0;
            box-sizing: border-box;
            font-size: 3.6rem;
            letter-spacing: 0.05em;
            color: #000;
            font-weight: 700;
            position: relative;
            @media screen and (max-width: 480px) {
              padding: 1.4rem 0 1.6rem;
              font-size: 2rem;
            }
            span {
              display: block;
              font-size: 2.4rem;
              color: #878787;
              margin-bottom: 0.5em;
              @media screen and (max-width: 480px) {
                font-size: 1.4rem;
              }
            }
            &::after {
              transition: all 0.2s ease-in-out;
              content: "";
              display: block;
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 5rem;
              aspect-ratio: 1/1;
              background-repeat: no-repeat;
              background-size: contain;
              background-image: url(../img/common/icon-yajirushi-blue-white.svg);
            }
            @media screen and (max-width: 480px) {
              &::after {
                width: 2.8rem;
              }
            }
            &:hover {
              &::after {
                transform: translate(10%, -50%);
              }
            }
          }
        }
      }

      .img_wrap {
        max-width: 54.4rem;
        @media screen and (max-width: 480px) {
          width: 100%;
          margin-bottom: 0.2rem;
        }
      }
    }
  }

  /* 製品紹介 */
  section.products_wrap {
    background-image: url(../img/top/products-back.webp);
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 8rem 0 12rem;
    @media screen and (max-width: 480px) {
      background-size: auto 100%;
      padding: 2.4rem 0 9rem;
    }
    hgroup.page_title_wrap {
      .title_inner {
        h2 {
          background: none;
          -webkit-text-fill-color: #fff;
          color: #fff !important;
        }
        .ja_text {
          color: #fff;
        }
      }
    }

    ul.item_list {
      display: flex;
      flex-wrap: wrap;
      @media screen and (max-width: 480px) {
        display: block;
      }
      > li {
        width: 50%;
        flex-shrink: 0;
        box-sizing: border-box;
        border-bottom: 1px solid #fff;
        padding-top: 4rem;
        padding-bottom: 4rem;
        @media screen and (max-width: 480px) {
          width: 100%;
          padding-top: 2.2rem;
          padding-bottom: 2.2rem;
        }
        &:nth-child(2n) {
          padding-left: 4rem;
        }
        &:nth-child(2n + 1) {
          border-right: 1px solid #fff;
          padding-right: 4rem;
        }
        &:nth-child(1),
        &:nth-child(2) {
          padding-top: 0;
        }
        &:nth-child(7),
        &:nth-child(8) {
          padding-bottom: 0;
          border-bottom: none;
        }
        @media screen and (max-width: 480px) {
          &:nth-child(2n) {
            padding-left: 0;
          }
          &:nth-child(2n + 1) {
            border-right: none;
            padding-right: 0;
          }
          &:nth-child(2) {
            padding-top: 2.2rem;
          }
          &:nth-child(7) {
            border-bottom: 1px solid #fff;
            padding-bottom: 2.2rem;
          }
          &:nth-child(8) {
            padding-bottom: 0;
            border-bottom: none;
          }
        }
        a {
          display: block;
          display: flex;
          gap: 3rem;
          color: #000;
          position: relative;
          height: 100%;
          @media screen and (max-width: 480px) {
            gap: 1.6rem;
          }
          &::after {
            content: "";
            display: block;
            position: absolute;
            width: 4.1rem;
            aspect-ratio: 1/1;
            background-image: url(../img/common/icon-yajirushi-touka-blue.svg);
            right: 1rem;
            bottom: 0;
            transition: all 0.2s ease-in-out;
          }
          @media screen and (max-width: 480px) {
            &::after {
              width: 3.2rem;
              right: 0;
            }
          }
          &:hover::after {
            transform: translateX(10%);
          }

          .img_wrap {
            width: 21.6rem;
            flex-shrink: 0;
            @media screen and (max-width: 480px) {
              width: 12.8rem;
            }
          }
          .text_wrap {
            letter-spacing: 0.045em;
            line-height: 1.4;
            font-weight: 500;
            h3 {
              font-size: 2rem;
              border-left: 4px solid var(--color-blue);
              padding-left: 0.5em;
              margin-bottom: 0.5em;
              @media screen and (max-width: 480px) {
                font-size: 1.4rem;
              }
            }
            p {
              font-size: 1.6rem;
              margin-bottom: 0.8em;
              @media screen and (max-width: 480px) {
                font-size: 1.2rem;
              }
            }
            ul {
              font-size: 1.6rem;
              @media screen and (max-width: 480px) {
                font-size: 1.2rem;
              }
              li {
                margin-bottom: 0.3em;
                &::before {
                  content: "・";
                }
              }
            }
          }
        }
      }
    }
    a.button {
      margin: 16rem auto 0;
      @media screen and (max-width: 480px) {
        margin: 6rem auto 0;
      }
    }
  }

  /* ニュース */
  section.news_wrap {
    margin-bottom: 12rem;
    @media screen and (max-width: 480px) {
      margin-bottom: 5rem;
    }
    .flex_wrap {
      display: flex;
      @media screen and (max-width: 480px) {
        display: block;
      }

      hgroup.page_title_wrap {
        width: 24%;
        flex-shrink: 0;
        margin: 0;
        position: relative;
        @media screen and (max-width: 480px) {
          width: 100%;
          margin-bottom: 1.5rem;
        }
        .title_inner {
          padding: 0 !important;
          margin-bottom: 3.6rem;
          @media screen and (max-width: 480px) {
            margin-bottom: 0;
            h2 {
              display: inline-block;
              margin-right: 0.75rem;
            }
            .ja_text {
              display: inline-block;
              vertical-align: 0.5em;
            }
          }
        }
        @media screen and (max-width: 480px) {
          a.button {
            position: absolute;
            right: 0;
            height: 3.8rem;
            top: 0;
            width: 12rem;
            font-size: 1.2rem;
            padding: 0 2rem;
            &::after {
              width: 1.5rem;
              right: 0.9rem;
            }
          }
        }
      }

      div.list_wrap {
        width: 76%;
        @media screen and (max-width: 480px) {
          width: 100%;
        }
        ul.post_list {
          dt.postdate {
            padding-top: 1.8rem;
            padding-bottom: 1.8rem;
            @media screen and (max-width: 480px) {
              padding-top: 1.2rem;
              padding-bottom: 1.2rem;
            }
          }

          .title_wrap {
            padding-top: 1.7rem;
            padding-bottom: 1.7rem;
            @media screen and (max-width: 480px) {
              padding-top: 1rem;
              padding-bottom: 1rem;
            }
          }
        }
      }
    }
  }

  /* メインイメージ */
  div.main_img_wrap {
    padding: 14vw 4vw 10vw;
    position: relative;
    @media screen and (max-width: 480px) {
      padding: 7rem 2rem 40rem;
    }
    .slide_text_wrap {
      position: relative;
      font-size: 8.5rem;
      font-weight: 500;
      font-feature-settings: "palt";
      text-align: left;
      z-index: 10;
      @media screen and (max-width: 480px) {
        font-size: 4.2rem;
      }

      .text-line {
        display: inline-block;
        position: relative;
        padding: 0.5rem;
        overflow: hidden;
        span {
          display: inline-block;
          transform: translateX(-102%);
        }
        &::before {
          visibility: hidden;
          content: "";
          display: block;
          background-color: #000;
          width: 100%;
          height: 100%;
          position: absolute;
        }
      }

      &.fade_in {
        .text-line {
          display: inline-block;
          position: relative;
          padding: 0.5rem;
          overflow: hidden;
          span {
            animation: spantext 1s ease-in-out forwards;
          }
          &::before {
            animation: sweep 1s ease-in-out forwards;
          }
          &.delay-1 {
            span {
              animation-delay: 1s;
            }
            &::before {
              animation-delay: 1s;
            }
          }
          &.delay-2 {
            span {
              animation-delay: 1.3s;
            }
            &::before {
              animation-delay: 1.3s;
            }
          }
        }
      }
    }

    /* infinite */
    .infinite_wrap {
      position: relative;
      width: 32.6rem;
      margin: 1.8rem 0;
      z-index: 15;
      animation: spinY 4s linear infinite;
      @media screen and (max-width: 480px) {
        width: 17.6rem;
      }
    }

    .en_copy {
      font-size: 3.6rem;
      line-height: 1.2;
      margin-top: 2.8rem;
      position: relative;
      z-index: 15;
      color: #878787;
      letter-spacing: 0.05em;
      @media screen and (max-width: 480px) {
        position: absolute;
        right: 2rem;
        top: 7.6rem;
        margin: 0;
        transform: rotate(90deg) translateX(100%);
        transform-origin: right top;
        font-size: 2.5rem;
      }
    }

    /* 背景画像 */
    .mv_wrap .bg {
      position: absolute;
      width: 52.7vw;
      top: 0;
      right: 3vw;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-duration: 4s;
      animation-name: anim_sc;
      transform: scale(0.95, 0.95);
      filter: blur(0px);
      z-index: 0;
      @media screen and (max-width: 480px) {
        width: 100%;
        top: 24rem;
        left: 0;
      }
    }
  }
}
@keyframes sweep {
  0% {
    visibility: visible;
    width: 0%;
    left: 0;
  }
  30% {
    width: 100%;
    left: 0;
  }
  70% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}
@keyframes spantext {
  0% {
    visibility: visible;
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

/* 回転アニメーション */
@keyframes spinY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
/* 画像変化 */
@keyframes anim_sc {
  100% {
    transform: scale(1, 1);
    filter: blur(6px);
  }
}

/* 英語の調整 */
html.translated-ltr {
  .blue_wrap {
    @media screen and (max-width: 480px) {
      min-height: 48.4rem !important;
    }
    .circle {
      @media screen and (max-width: 480px) {
        &.value {
          &::after {
            height: 26rem !important;
          }
        }
      }
    }
  }

  body.home {
    /* メインイメージ */
    .slide_text_wrap {
      font-size: 8rem !important;
      @media screen and (max-width: 480px) {
        font-size: 3rem !important;
      }
      .text-line {
        padding: 2rem 0.5rem !important;
        @media screen and (max-width: 480px) {
          padding: 1rem 0.5rem !important;
        }
      }
    }
  }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
製品情報
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

#contents_wrap.products {
  div.products_wrap {
    max-width: 120rem;
    margin: auto;
    padding: 0 2rem;

    /* トップページ */
    ul.item_list {
      display: flex;
      flex-wrap: wrap;
      @media screen and (max-width: 480px) {
        display: block;
      }
      > li {
        width: 50%;
        flex-shrink: 0;
        box-sizing: border-box;
        border-bottom: 1px solid var(--color-blue);
        padding-top: 4rem;
        padding-bottom: 4rem;
        @media screen and (max-width: 480px) {
          width: 100%;
          padding-top: 2.2rem;
          padding-bottom: 2.2rem;
        }
        &:nth-child(2n) {
          padding-left: 4rem;
        }
        &:nth-child(2n + 1) {
          border-right: 1px solid var(--color-blue);
          padding-right: 4rem;
        }
        &:nth-child(1),
        &:nth-child(2) {
          padding-top: 0;
        }
        &:nth-child(7),
        &:nth-child(8) {
          padding-bottom: 0;
          border-bottom: none;
        }
        @media screen and (max-width: 480px) {
          &:nth-child(2n) {
            padding-left: 0;
          }
          &:nth-child(2n + 1) {
            border-right: none;
            padding-right: 0;
          }
          &:nth-child(2) {
            padding-top: 2.2rem;
          }
          &:nth-child(7) {
            border-bottom: 1px solid var(--color-blue);
            padding-bottom: 2.2rem;
          }
          &:nth-child(8) {
            padding-bottom: 0;
            border-bottom: none;
          }
        }
        a {
          display: block;
          display: flex;
          gap: 3rem;
          color: #000;
          position: relative;
          height: 100%;
          @media screen and (max-width: 480px) {
            gap: 1.6rem;
          }
          &::after {
            content: "";
            display: block;
            position: absolute;
            width: 4.1rem;
            aspect-ratio: 1/1;
            background-image: url(../img/common/icon-yajirushi-light_blue-white.svg);
            right: 1rem;
            bottom: 0;
            transition: all 0.2s ease-in-out;
          }
          @media screen and (max-width: 480px) {
            &::after {
              width: 3.2rem;
              right: 0;
            }
          }
          &:hover::after {
            transform: translateX(10%);
          }

          .img_wrap {
            width: 21.6rem;
            flex-shrink: 0;
            @media screen and (max-width: 480px) {
              width: 12.8rem;
            }
          }
          .text_wrap {
            letter-spacing: 0.045em;
            line-height: 1.4;
            font-weight: 500;
            h3 {
              font-size: 2rem;
              border-left: 4px solid var(--color-blue);
              padding-left: 0.5em;
              margin-bottom: 0.5em;
              @media screen and (max-width: 480px) {
                font-size: 1.4rem;
              }
            }
            p {
              font-size: 1.6rem;
              margin-bottom: 0.8em;
              @media screen and (max-width: 480px) {
                font-size: 1.2rem;
              }
            }
            ul {
              font-size: 1.6rem;
              @media screen and (max-width: 480px) {
                font-size: 1.2rem;
              }
              li {
                margin-bottom: 0.3em;
                &::before {
                  content: "・";
                }
              }
            }
          }
        }
      }
    }

    /* 下層 */
    .title-en_jp {
      margin-bottom: 4.6rem;
    }
    /* 製品部分 */
    .text_img_wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 9rem;
      @media screen and (max-width: 480px) {
        margin-bottom: 4.5rem;
      }
      & > .img_wrap {
        width: 43.2rem;
        padding-top: 1rem;
        @media screen and (max-width: 480px) {
          width: 100%;
          margin-bottom: 2rem;
        }
      }
      h2 {
        width: 100%;
        font-size: 4rem;
        line-height: 1.375;
        font-weight: 800;
        color: var(--color-blue);
        letter-spacing: 0.12em;
        border-left: 9px solid var(--color-blue);
        padding-left: 0.675em;
        margin-bottom: 0.5em;
        @media screen and (max-width: 480px) {
          font-size: 2.4rem;
          border-left-width: 4px;
          letter-spacing: 0.05em;
          padding-left: 0.5em;
        }
      }

      .text_wrap {
        font-feature-settings: "palt";
        max-width: 60rem;
        @media screen and (max-width: 480px) {
          margin-bottom: 2rem;
        }
        p.chatch {
          margin-bottom: 5.6rem;
          font-size: 2.8rem;
          font-weight: 700;
          letter-spacing: 0.08em;
          line-height: 1.5;
          @media screen and (max-width: 480px) {
            font-size: 2rem;
            margin-bottom: 1.4rem;
            letter-spacing: 0.05em;
          }
        }
        h3 {
          font-size: 2.4rem;
          letter-spacing: 0.08em;
          line-height: 1.5;
          font-weight: 500;
          max-width: 60rem;
          margin-bottom: 2.4rem;
          @media screen and (max-width: 480px) {
            font-size: 1.6rem;
            margin-bottom: 1.4rem;
            letter-spacing: 0.05em;
          }
          &.no-margin-b {
            margin-bottom: 0.5em;
            margin-top: 1em;
          }
        }
        ul {
          max-width: 60rem;
          margin-bottom: 2.4rem;
          font-size: 1.8rem;
          line-height: 1.66;
          @media screen and (max-width: 480px) {
            font-size: 1.4rem;
          }
          li {
            margin: 0.34em 0;
            padding-left: 1em;
            &::before {
              content: "・";
            }
            &::first-letter {
              margin-left: -1em;
            }
          }
        }
        p.honbun {
          font-size: 1.8rem;
          line-height: 1.66;
          @media screen and (max-width: 480px) {
            font-size: 1.4rem;
          }
        }
      }

      /* モバイル型イメージング プレートスキャナー */
      .img_list_wrap {
        order: 4;
        margin-top: 4.8rem;
        width: 100%;
        @media screen and (max-width: 480px) {
          margin-top: 3rem;
        }
        h3 {
          font-size: 2.4rem;
          letter-spacing: 0.08em;
          line-height: 1.5;
          font-weight: 500;
          margin-bottom: 2.4rem;
          @media screen and (max-width: 480px) {
            font-size: 1.6rem;
            margin-bottom: 2rem;
          }
        }
        ul {
          display: flex;
          justify-content: space-between;
          @media screen and (max-width: 480px) {
            flex-direction: column;
            gap: 2rem;
            align-items: center;
          }
          li {
            width: 32%;
            @media screen and (max-width: 480px) {
              width: 100%;
            }
            .img_wrap {
              background-color: #f5f6f6;
              padding: 1.6rem 1rem 3.3rem;
              @media screen and (max-width: 480px) {
                padding: 1rem 1rem 2rem;
              }
              img {
                display: block;
                max-width: 31.6rem;
                width: 84%;
                margin: auto;
                @media screen and (max-width: 480px) {
                  max-width: 100%;
                }
              }
            }
            h4 {
              font-size: 1.8rem;
              letter-spacing: 0.04em;
              line-height: 1.5;
              font-weight: normal;
              font-feature-settings: "palt";
              margin: 1em 0.6em;
              padding-left: 0.75em;
              position: relative;
              @media screen and (max-width: 480px) {
                font-size: 1.4rem;
                margin: 0.5em 0.6em;
              }
              &::before {
                content: "";
                display: block;
                position: absolute;
                width: 0.2em;
                height: 4em;
                background-color: var(--color-blue);
                left: 0;
                bottom: -0.4em;
              }
            }
          }
        }
      }

      /* ハイコントラストモデル */

      &.flex_wgb {
        .text_wrap {
          width: 100%;
          max-width: 100%;
          display: flex;
          justify-content: space-between;
          @media screen and (max-width: 480px) {
            display: block;
            order: 1;
          }
          .inner {
            &.left {
              max-width: 60rem;
            }
            &.right {
              max-width: 55rem;
            }
          }
        }
        .img_wrap {
          width: 100%;
          max-width: 100%;
          order: 2;
          margin-top: 2rem;
        }
      }
    }
    /* 特徴 */

    section.tokutyo_wrap {
      margin-bottom: 8rem;
      @media screen and (max-width: 480px) {
        margin-bottom: 4rem;
      }
      ul.tokutyo_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        @media screen and (max-width: 480px) {
          display: block;
        }
        li.tokutyo_item {
          width: 47%;
          overflow: hidden;
          margin-bottom: 2.6rem;
          text-align: left;
          @media screen and (max-width: 480px) {
            width: 100%;
            margin-bottom: 2rem;
          }
          h3 {
            background: #0054a6;
            background: linear-gradient(
              60deg,
              rgba(0, 84, 166, 1) 0%,
              rgba(0, 84, 166, 1) 50%,
              rgba(255, 255, 255, 1) 90%
            );
            transform: skew(-30deg);
            transform-origin: left bottom;
            font-size: 1.8rem;
            line-height: 1.5;
            color: #fff;
            padding: 0.53em 1em 0.53em 2em;
            @media screen and (max-width: 480px) {
              font-size: 1.4rem;

              transform: skew(-20deg);
            }
            span {
              display: inline-block;
              transform: skew(30deg);
              @media screen and (max-width: 480px) {
                transform: skew(20deg);
              }
            }
          }
          p {
            font-size: 1.8rem;
            line-height: 1.66;
            padding: 2.4rem;
            background-color: #eee;
            margin-left: 2em;
            height: 100%;
            min-height: 3.32em;
            @media screen and (max-width: 480px) {
              font-size: 1.4rem;
              margin-left: 1.5em;
              padding: 1em;
            }
          }
        }
      }
    }
  }

  /*テーブル*/

  /* 横スクロール用 */
  div.table_scroll_wrap {
    padding-bottom: 1rem;
    position: relative;

    @media screen and (max-width: 480px) {
      overflow-x: scroll;
    }
    /* オーバーフロー */
    .scrolltext {
      display: none;
    }
    &.scroll {
      .scrolltext {
        display: block;
        position: sticky;
        left: 0;
        margin-bottom: 1rem;
        span {
          display: inline-block;
          position: relative;
          font-size: 1.2rem;
          &::before {
            content: "";
            display: block;
            width: 2rem;
            height: 0.4rem;
            border-bottom: 1px solid var(--color-blue);
            border-right: 1px solid var(--color-blue);
            transform: translate(100%, -50%) skew(45deg);
            position: absolute;
            top: 50%;
            right: 0;
            animation: scrollarrow 1s ease-in-out infinite alternate;
          }
        }
      }
    }
    .caption {
      font-size: 1.4rem;
      line-height: 1.5;
      margin: 1em 0;
      position: sticky;
      left: 0;
      @media screen and (max-width: 480px) {
        font-size: 1.2rem;
      }
    }

    & + a.button {
      max-width: 55.2rem;
      margin: 6.8rem auto auto;
      @media screen and (max-width: 480px) {
        margin-top: 3rem;
        width: 85%;
        font-size: 1.4rem;
      }
    }
  }

  /* データシート */
  table.datasheet {
    width: 100%;
    margin: auto;
    font-size: 1.6rem;
    line-height: 1.5;
    font-feature-settings: "palt";
    @media screen and (max-width: 480px) {
      font-size: 1.2rem;
    }
    td,
    th {
      text-align: center;
      padding: 0.5em 1em;

      @media screen and (max-width: 480px) {
        padding: 0.25em 0.5em;
      }
      small {
        font-size: 0.75em;
      }
    }
    th {
      word-break: keep-all;
    }
    thead {
      tr {
        th {
          background-color: var(--color-orange);
          color: #fff;
          border-right: 1px solid #fff;
          font-size: 1.8rem;
          min-width: 8em;
          @media screen and (max-width: 480px) {
            font-size: 1.2rem;
            white-space: nowrap;
          }
          &:first-child {
            background-color: #fff;
            position: -webkit-sticky;
            position: sticky;
            left: 0;
            border-right: none;
            min-width: 0;
          }
          &:last-child {
            border-right: none;
          }
          &.gray {
            background-color: #9fa0a0;
          }
        }
      }
    }
    ul {
      text-align: left;
      max-width: 72rem;
      margin: auto;

      li {
        padding-left: 1em;
        &::before {
          content: "・";
        }
        &::first-letter {
          margin-left: -1em;
        }
      }
    }
    &:not(:has(.has_rowspan)) {
      tbody {
        tr {
          border-bottom: 1px solid #000;

          th {
            background-color: #eee;
            text-align: left;
            font-weight: normal;
            position: -webkit-sticky;
            position: sticky;
            left: 0;
            width: 13em;
            @media screen and (max-width: 480px) {
              width: 6em;
            }
          }
          td {
            border-right: 1px solid #000;
            &:last-child {
              border-right: none;
            }
          }
        }
      }
    }
    &.has_rowspan {
      tbody {
        tr {
          th {
            width: 21.8rem;
            @media screen and (max-width: 480px) {
              width: 9.5em;
            }
          }
        }
        tr:not(:has(th[rowspan])) {
          th {
            width: 10.9rem;
            @media screen and (max-width: 480px) {
              width: 4.75em;
              left: 4.75em;
            }
          }
        }
        tr {
          th:nth-child(2) {
            width: 10.9rem;
            @media screen and (max-width: 480px) {
              width: 4.75em;
              left: 4.75em;
            }
          }
          th[colspan] {
            width: 21.8rem;
            @media screen and (max-width: 480px) {
              width: 9.5em;
              left: 0 !important;
            }
          }
          th[rowspan] {
            width: 10.9rem;
            @media screen and (max-width: 480px) {
              width: 4.75em;
            }
            &::after {
              content: "";
              display: block;
              position: absolute;
              right: 0;
              top: 0;
              width: 1px;
              height: 100%;
              background-color: #000;
            }
          }
        }
      }
    }
  }
}
@keyframes scrollarrow {
  0% {
    transform: translate(100%, -50%) skew(45deg);
  }
  100% {
    transform: translate(130%, -50%) skew(45deg);
  }
}
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
事業案内
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
body.business {
  section.naiyou_wrap {
    max-width: 120rem;
    padding: 0 2rem;
    margin: auto;
  }

  section.sustainability_wrap {
    background: #f5f6f6;
    background: linear-gradient(0deg, #f5f6f6 0%, #f5f6f6 calc(100% - 3.5rem), #fff calc(100% - 3.5rem), #fff 100%);
    @media screen and (max-width: 480px) {
      background: linear-gradient(0deg, #f5f6f6 0%, #f5f6f6 calc(100% - 1.5rem), #fff calc(100% - 1.5rem), #fff 100%);
    }
    .inner {
      max-width: 120rem;
      padding: 0 2rem 8rem;
      margin: auto;
      @media screen and (max-width: 480px) {
        padding: 0 2rem 4rem;
      }
      hgroup {
        margin-bottom: 3.6rem;
        @media screen and (max-width: 480px) {
          margin-bottom: 2.4rem;
        }
        & + p {
          font-size: 2.6rem;
          font-weight: 600;
          line-height: 1.5;
          margin-bottom: 5.6rem;
          @media screen and (max-width: 480px) {
            font-size: 1.6rem;
            margin-bottom: 3rem;
          }
        }
      }
      ul {
        display: flex;
        justify-content: space-between;
        @media screen and (max-width: 480px) {
          flex-direction: column;
          gap: 2rem;
        }
        li {
          background-color: #fff;
          box-sizing: border-box;
          max-width: 58rem;
          border-bottom: 8px solid #7f2835;
          padding: 5.4rem 5rem 4.8rem;
          position: relative;
          @media screen and (max-width: 480px) {
            max-width: 100%;
            border-bottom: 4px solid #7f2835;
            padding: 3.6rem 2rem 3rem;
          }
          &.sdgs09 {
            border-bottom-color: #cf773e;
          }
          .badge {
            position: absolute;
            top: 0;
            right: 0;
            width: 14.4rem;
            @media screen and (max-width: 480px) {
              width: 10rem;
            }
          }
          h3 {
            font-size: 2.4rem;
            line-height: 1.6;
            letter-spacing: 0.2em;
            margin-bottom: 2.1em;
            @media screen and (max-width: 480px) {
              font-size: 1.8rem;
            }
          }
          p {
            font-size: 1.6rem;
            line-height: 1.875;
            @media screen and (max-width: 480px) {
              font-size: 1.4rem;
              line-height: 1.75;
            }
          }
        }
      }
    }
  }

  section.naiyou_wrap {
    max-width: 120rem;
    padding: 0 2rem;
    margin-bottom: 15.4rem;
    @media screen and (max-width: 480px) {
      margin-bottom: 6rem;
    }
    ul {
      max-width: 108rem;
      margin: 10rem auto 9.2rem;
      @media screen and (max-width: 480px) {
        margin: 6rem auto 4.6rem;
      }
      li {
        box-sizing: border-box;
        border: 0.6rem solid var(--color-blue);
        padding: 0 4.4rem 4.4rem;

        margin-bottom: 7.6rem;
        position: relative;
        @media screen and (max-width: 480px) {
          border: 0.4rem solid var(--color-blue);
          padding: 0 2rem 2.6rem;
          margin-bottom: 4rem;
        }
        &:last-child {
          margin-bottom: 0;
        }
        h3 {
          margin: -5rem auto 1em -5rem;
          @media screen and (max-width: 480px) {
            margin: -2.5rem auto 1em -2.4rem;
          }
          span {
            background-color: #fff;
            font-size: 3.6rem;
            letter-spacing: 0.08em;
            display: inline-block;
            padding: 0.5em 0.25em 0.5em 0;
            line-height: 1.3;
            color: var(--color-blue);
            @media screen and (max-width: 480px) {
              font-size: 2rem;
            }
          }
        }
        p {
          font-size: 1.8rem;
          line-height: 1.88;
          @media screen and (max-width: 480px) {
            font-size: 1.4rem;
            line-height: 1.75;
          }
        }
      }
    }

    .text_illust_wrap {
      position: relative;
      .text_wrap {
        width: 36.4rem;
        @media screen and (max-width: 480px) {
          width: 100%;
        }
        p {
          font-size: 1.8rem;
          line-height: 2.22;
          @media screen and (max-width: 480px) {
            font-size: 1.4rem;
            line-height: 1.75;
          }
        }
        p.annotation {
          font-size: 1.2rem;
          line-height: 1.5;
          padding-left: 1em;
          margin-top: 2em;
          &::first-letter {
            margin-left: -1em;
          }
          @media screen and (max-width: 480px) {
            font-size: 1rem;
          }
        }
      }
      .illust_wrap {
        width: 88.4rem;
        position: absolute;
        top: -2rem;
        left: 40.8rem;
        @media screen and (max-width: 480px) {
          width: 100%;
          position: static;
          margin-bottom: 2rem;
        }
      }
    }
  }
}