<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">:root {
  --Color-SyRed: #f3270f;
  --Color-SyDarkGreen: #2fc5c8;
  --Color-SyGreen: #6dd2d3;
  --Color-SyPink: #ffc5bb;
  --Color-SyLightRed: #fff0ed;
  --Color-SyLightGreen: #eaf9fa;
  --Color-Grey-50: #f5f5f5;
  --Color-White: #fff;
  --Color-Grey-800: #333;
  --Color-SyGrey: #5d5a5a;
  --Color-Grey-400: #999;
  --Color-Grey-150: #d9d9d9;
  --Easing-Bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

#header-spacer {
  height: calc(112px + 72px);
  
  @media screen and (max-width: 991px) {
    height: calc(64px + 51px);
  }
}
#global-header {
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
  background: var(--Color-White, #fff);
}
#content {
  margin-bottom: 0;
}
#main section {
  margin-bottom: 0;
}
#main section p, #main section figure {
  margin-bottom: 0;
}
.category-title {
  display: none;
}
#category-nav {
  position: fixed;
  width: 100%;
  z-index: 999;
  top: 64px;

  @media screen and (min-width: 992px) {
    top: 113px;
  }
}

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

  .sp-only {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .pc-only {
    display: block;
  }

  .sp-only {
    display: none;
  }
}

/* SP */
@media screen and (max-width: 767px) {
  html {
    font-size: calc(100vw * 16 / 375);
  }
}

@media screen and (max-width: 1920px) and (min-width: 768px) {
  html {
    font-size: calc(100vw * 16 / 1440);
  }
}

@media screen and (min-width: 1921px) {
  html {
    font-size: calc(1920px * 16 / 1440);
  }
}

/* ---------- loading ---------- */
.sy-brand {
  overflow: hidden;
  height: 100%;

  &amp;.phase-01 {
    .sy-brand-content {
      .loading {
        .num {
          .plus-one {
            opacity: 1;
            transform: translateX(0);
            scale: 1;
            transform: translateY(0);

            /* SP */
            @media screen and (max-width: 767px) {
            }
          }
        }
      }
    }
  }

  &amp;.phase-02 {
    .sy-brand-content {
      .loading {
        .num {
          .counter {
            opacity: 0;
          }

          .plus-one {
            opacity: 0;
            transform: translateX(-4rem);

            /* SP */
            @media screen and (max-width: 767px) {
              transform: translateY(4rem);
            }
          }

          .one-zero-one {
            opacity: 1;
            animation: poyon 0.5s ease-out;
            animation-delay: 150ms;
            /* scale: 1.2; */
          }
        }
      }
    }
  }

  &amp;.is-complete {
    overflow: visible;
    height: auto;

    .sy-brand-content {
      .loading {
        transition: transform 1200ms cubic-bezier(0.485, 0.045, 0.22, 0.98),
          opacity 900ms ease;
        transform: translateY(-30rem);
        opacity: 0;
      }

      .content {
        transform: translate(0);
        /* opacity: 1; */

        .hero {
          opacity: 1;

          .ttl-v2 {
            p {
              transform: translate(0);
            }
          }
        }
      }
    }
  }
}

/* ---------- loading縺薙％縺ｾ縺ｧ ---------- */

.sy-brand-content {
  position: relative;
  background-color: var(--Color-SyLightRed);
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.12em;
  color: var(--Color-Grey-800);

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

  /* loading animation */
  .loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding-top: 3rem;
    align-items: center;
    z-index: 100;

    .lottie {
      width: 30rem;
    }

    .num {
      display: flex;
      gap: 1rem;
      position: relative;

      .counter {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--Color-SyRed);
        font-weight: 700;
        font-family: "Roboto";
        font-size: 2rem;
        width: 8rem;
        height: 5rem;
        background: url(../img/counter-cloud-01.svg) 0 0 no-repeat;
        background-size: 100% 100%;
        line-height: 1;
        transition: opacity 300ms ease, transform 300ms ease, scale 300ms ease;
      }

      .plus-one {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--Color-White);
        margin-left: 0.125rem;
        width: 5rem;
        aspect-ratio: 219/229;
        position: relative;
        font-family: "Roboto";
        font-weight: 700;
        font-size: 1.25rem;
        background: url(../img/sy-silhouette.svg) 0 0 no-repeat;
        background-size: 100% 100%;
        line-height: 1;
        opacity: 0;

        transition: scale var(--Easing-Bounce) 400ms;
        transition: opacity 300ms ease, transform 300ms ease, scale 300ms ease;
        scale: 0.5;

        position: absolute;
        top: 0rem;
        left: 9.5rem;

        /* SP */
        @media screen and (max-width: 767px) {
          top: -6.5rem;
          left: 1.5rem;
        }

      }

      .one-zero-one {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 6.75rem;
        aspect-ratio: 219/229;
        top: 1rem;
        left: 1rem;
        margin-top: -2rem;
        background: url(../img/sy-silhouette.svg) 0 0 no-repeat;
        background-size: 100% 100%;
        color: var(--Color-White);
        font-weight: 700;
        font-family: "Roboto";
        font-size: 1.5rem;

        scale: 1.2;
        opacity: 0;
        transition: opacity 300ms ease, scale 300ms ease;
      }
    }

    .loading-img {
      position: absolute;

      &amp;.--01 {
        top: 30%;
        left: 20%;
        width: 9.625rem;
      }

      &amp;.--02 {
        top: 35%;
        right: 15%;
        width: 5.625rem;
      }

      &amp;.--03 {
        bottom: 30%;
        right: 20%;
        width: 10.875rem;
      }

      &amp;.--04 {
        top: 55%;
        left: -1%;
        width: 9.625rem;
      }

      &amp;.--05 {
        bottom: 20%;
        left: 30%;
        width: 7.125;
      }

      &amp;.--06 {
        bottom: 35%;
        right: -3%;
        width: 10rem;
      }
    }
  }

  .content {
    transform: translateY(55svh);
    transition: transform 1200ms cubic-bezier(0.485, 0.045, 0.22, 0.98);

    .hero {
      transition: opacity 800ms cubic-bezier(0.485, 0.045, 0.22, 0.98);

      .ttl-v2 {
        .line {
          overflow: hidden;

          &gt; p {
            width: max-content;
            white-space: nowrap;
            transform: translateY(100%);
          }

          &amp;.--01 {
            p {
              transition: transform 700ms cubic-bezier(0.485, 0.045, 0.22, 0.98);
              transition-delay: 700ms;
            }
          }

          &amp;.--02 {
            p {
              transition: transform 900ms cubic-bezier(0.485, 0.045, 0.22, 0.98);
              transition-delay: 600ms;
            }
          }
        }
      }
    }
  }

  .content::before {
    content: "";
    position: absolute;
    top: -90svh;
    /* TODO */
    left: 0;
    width: 100%;
    height: 120svh;
    /* TODO */
    z-index: -1;
    background-color: var(--Color-SyLightGreen);
  }

  .section-ttl {
    text-align: center;

    .jabox {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;

      .circle {
        display: flex;

        span {
          display: block;
          width: 10px;
          height: 10px;
          border-radius: 100%;
        }

        span:first-child {
          background-color: var(--Color-SyGreen);
        }

        span:last-child {
          background-color: var(--Color-SyPink);
        }
      }

      .ja {
        font-size: 1rem;
        font-weight: 700;
        font-family: "Roboto", "Noto Sans JP", sans-serif;

        /* SP */
        @media screen and (max-width: 767px) {
          font-size: 0.875rem;
        }
      }
    }

    .en {
      margin-top: 1rem;
      font-size: 3rem;
      color: var(--Color-SyRed);
      font-weight: 700;

      /* SP */
      @media screen and (max-width: 767px) {
        font-size: 2.25rem;
        margin-top: 0.25rem;
      }
    }
  }

  .hero {
    position: relative;
    /* aspect-ratio: 1440 / 809; */
    aspect-ratio: 1920/1080;

    /* SP */
    @media screen and (max-width: 767px) {
      aspect-ratio: 375 / 746;
    }

    .bg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }

    .ttl-v2 {
      position: absolute;
      bottom: 14rem;
      left: 3rem;
      width: 36.25rem;
      font-family: "Roboto", "M PLUS 1p", sans-serif;
      letter-spacing: 0.3em;
      font-weight: 700;
      width: max-content;

      /* SP */
      @media screen and (max-width: 767px) {
        left: 1rem;
        width: 21.4375rem;
      }

      /* PC large */
      @media screen and (min-width: 1441px) {
        bottom: 12.5rem;
      }

      @media screen and (min-width: 1801px) {
        bottom: 15.5rem;
      }

      @media screen and (min-width: 2001px) {
        bottom: 20rem;
      }

      .line {
        font-size: 1rem;

        /* SP */
        @media screen and (max-width: 767px) {
          font-size: 0.75rem;
        }

        /* PC large */
        @media screen and (min-width: 2001px) {
          font-size: 1.25rem;
        }

        &amp;.--01 {
          font-size: 1rem;
          line-height: 1.5;

          /* SP */
          @media screen and (max-width: 767px) {
            line-height: 1.6;
          }
        }

        &amp;.--02 {
          color: var(--Color-SyRed);
          margin-left: 1.5rem;
          line-height: 1.125;

          p {
            display: flex;
            align-items: center;
          }

          .plus {
            font-size: 5em;
            font-weight: 400;
          }

          .one {
            font-size: 5.1875em;
            margin-right: -0.375rem;
          }

          .s {
            font-size: 2.375em;
          }

          .l {
            font-size: 3.75em;
          }

          /* SP */
          @media screen and (max-width: 767px) {
            margin-left: 0;
            .plus {
              font-size: 3em;
            }
            .one {
              margin-left: -0.3725rem;
              font-size: 4em;
            }
            .s {
              font-size: 1.625em;
            }
            .l {
              font-size: 3em;
            }
          }
        }
      }
    }
  }

  .introduction {
    display: flex;
    justify-content: center;
    padding-top: 5rem;
    position: relative;
    overflow-x: clip;

    /* SP */
    @media screen and (max-width: 767px) {
      padding-top: 3rem;
    }

    .inner {
      max-width: 70rem;
      margin: 0 1.5rem;
      display: flex;
      gap: 8rem;
      align-items: center;

      /* SP */
      @media screen and (max-width: 767px) {
        margin: 0 1rem;
        gap: 3rem;
        flex-direction: column;
        flex-flow: column-reverse;
      }

      .img {
        width: 21.25rem;

        /* SP */
        @media screen and (max-width: 767px) {
          width: 16.4375rem;
        }
      }

      .txt {
        font-size: 1.125rem;
        line-height: 2.5;
        font-weight: 700;

        /* SP */
        @media screen and (max-width: 767px) {
          font-size: 0.875rem;
        }

        span {
          color: var(--Color-SyRed);
          border-bottom: 4px solid var(--Color-SyPink);
        }
      }

      p + p {
        margin-top: 1.5rem;

        /* SP */
        @media screen and (max-width: 767px) {
          margin-top: 1rem;
        }
      }
    }

    .introduce-text-line {
      position: absolute;
      top: 8rem;
      left: 0;
      z-index: -1;
      margin-top: 2rem;
      display: flex;
      gap: 3rem;
      opacity: 0.7;

      /* SP */
      @media screen and (max-width: 767px) {
        top: 38rem;
        gap: 2rem;
      }

      &gt; div {
        display: flex;
        gap: 3rem;
        animation: slide-x-animation 60s linear infinite 0.5s both;

        /* SP */
        @media screen and (max-width: 767px) {
          gap: 2rem;
        }

        .sy-txt {
          font-size: 8rem;
          font-weight: 700;
          color: var(--Color-White);

          /* SP */
          @media screen and (max-width: 767px) {
            font-size: 4rem;
          }
        }
      }
    }
  }

  .value {
    padding-top: 18rem;
    padding-bottom: 5rem;
    position: relative;
    overflow-x: clip;

    /* SP */
    @media screen and (max-width: 767px) {
      padding-top: 20rem;
      padding-bottom: 5rem;
    }

    .bg {
      transition: transforms 100ms ease-out;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      .road {
        width: 100%;
        aspect-ratio: 1440/209;
        position: absolute;
        top: 5rem;
        left: 0;

        /* SP */
        @media screen and (max-width: 767px) {
          aspect-ratio: 375/56;
        }
      }

      .value-img {
        position: absolute;

        &amp;.--car {
          width: 4.5rem;
          top: 3.635rem;
          left: 15rem;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 2.5rem;
            top: 4rem;
            left: 5rem;
          }
        }

        &amp;.--triangle-r {
          width: 12rem;
          top: 13.75rem;
          left: 0;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 5rem;
            top: 19rem;
          }
        }

        &amp;.--triangle-g {
          width: 12rem;
          top: 70rem;
          right: 0;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 5rem;
            top: 110rem;
          }
        }

        &amp;.--01 {
          width: 21.875rem;
          top: 4.375rem;
          left: 6.25rem;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 12rem;
            top: 4rem;
            left: 1rem;
          }
        }

        &amp;.--02 {
          width: 24.125rem;
          top: 13.75rem;
          right: 3.125rem;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 14rem;
            top: -1rem;
            right: -6rem;
          }
        }

        &amp;.--03 {
          width: 20rem;
          top: 60rem;
          left: 0;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 10rem;
            top: 78rem;
            left: 0;
          }
        }

        &amp;.--04 {
          width: 22.5rem;
          top: 42rem;
          right: 0;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 10rem;
            top: 47rem;
            right: 0;
          }
        }

        &amp;.--05 {
          width: 6.25rem;
          left: 3.125rem;
          top: -5rem;

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

        &amp;.--06 {
          width: 6.75rem;
          right: 6.25rem;
          top: 3.25rem;

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

    .outer-cloud {
      .cloud-img {
        position: absolute;

        &amp;.--01 {
          width: 13rem;
          top: 65rem;
          left: -3rem;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 10rem;
            top: 61rem;
            left: -2rem;
          }
        }

        &amp;.--02 {
          width: 13rem;
          top: 90rem;
          right: -3rem;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 11rem;
            top: 99rem;
            right: -3rem;
          }
        }

        &amp;.--03 {
          width: 13rem;
          top: 90rem;
          left: -3rem;
        }

        &amp;.--04 {
          width: 13rem;
          top: 120rem;
          right: -3rem;
        }

        &amp;.--05 {
          width: 13rem;
          top: 125rem;
          left: -3rem;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 9rem;
            top: 138rem;
            left: -2rem;
          }
        }

        &amp;.--06 {
          width: 10rem;
          top: 34rem;
          right: 8rem;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 8rem;
            top: 26rem;
            right: -2rem;
          }
        }
      }
    }

    .inner {
      max-width: 73.75rem;
      margin: 0 1.5rem;
      margin: 0 auto;
      position: relative;

      /* SP */
      @media screen and (max-width: 767px) {
        width: 100%;
        margin: 0;
      }

      .inner-cloud {
        .cloud-img {
          position: absolute;

          &amp;.--01 {
            width: 8.125rem;
            top: 15rem;
            right: 27rem;

            /* SP */
            @media screen and (max-width: 767px) {
              /* width: 5rem;
              top: 8rem;
              right: 8rem; */
              display: none;
            }
          }

          &amp;.--02 {
            width: 6.875rem;
            top: 21rem;
            right: 20rem;

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

          &amp;.--03 {
            width: 5.25rem;
            bottom: 10rem;
            left: 20rem;

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

          &amp;.--04 {
            width: 9.375rem;
            bottom: 5rem;
            left: 12rem;

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

      .value-img {
        position: absolute;

        &amp;.--05 {
          width: 8.5rem;
          top: 16rem;
          right: 18rem;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 5rem;
            top: 5rem;
            right: 1.5rem;
          }
        }

        &amp;.--06 {
          width: 9.375rem;
          bottom: 7.5rem;
          left: 6.25rem;
        }
      }

      ul {
        margin-top: 4rem;

        /* SP */
        @media screen and (max-width: 767px) {
          margin-top: 2rem;
        }

        li {
          width: 40.625rem;

          /* animation */
          opacity: 0;
          scale: 0.8;

          &amp;.is-animation {
            transition: scale var(--Easing-Bounce) 400ms, opacity ease-out 200ms;
            /* animation: poyon 0.5s ease-out; */
            opacity: 1;
            scale: 1;
          }

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

          &amp;:nth-child(2n) {
            margin-left: auto;
            margin-top: -17rem;

            /* SP */
            @media screen and (max-width: 767px) {
              margin-top: 5rem;
            }
          }

          &amp;:nth-child(2n + 1) {
            margin-right: auto;
            margin-top: -12.75rem;

            /* SP */
            @media screen and (max-width: 767px) {
              margin-top: 5rem;
            }
          }

          &amp;:first-child {
            margin-top: 5rem;

            /* SP */
            @media screen and (max-width: 767px) {
              margin-top: 2rem;
            }
          }

          .img-box {
            width: 23rem;
            aspect-ratio: 393/410;
            background-image: url(../img/value-item-bg.svg);
            background-size: 100% 100%;
            margin: 0 auto;
            z-index: 10;
            position: relative;

            /* SP */
            @media screen and (max-width: 767px) {
              width: 16.25rem;
            }
          }

          .img {
            width: 100%;
            display: block;
            position: relative;

            
          }

          .txtbox {
            width: 40.625rem;
            background: url(../img/value-cloud-w.svg) 0 0 no-repeat;
            background-size: 100% 100%;
            position: relative;
            box-sizing: border-box;
            padding: 5rem 6rem;
            margin-top: -3.75rem;

            /* SP */
            @media screen and (max-width: 767px) {
              width: 34rem;
              margin-left: -5.5rem;
              padding: 5rem 7rem;
              background-position: 50% 50%;
              background-size: 100% auto;
            }

            .numbox {
              position: absolute;
              top: 0.625rem;
              left: 1.5rem;
              width: 8.125rem;
              aspect-ratio: 130/94;
              background: url(../img/value-cloud-r.svg) 0 0 no-repeat;
              background-size: contain;
              color: var(--Color-White);
              font-weight: 700;
              box-sizing: border-box;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;

              /* SP */
              @media screen and (max-width: 767px) {
                width: 5.5rem;
                top: 0.25rem;
                left: 6.5rem;
              }

              .en {
                display: block;
                font-size: 1rem;
                line-height: 1;

                /* SP */
                @media screen and (max-width: 767px) {
                  font-size: 0.6875rem;
                }
              }

              .num {
                display: block;
                font-size: 2.25rem;
                line-height: 1;

                /* SP */
                @media screen and (max-width: 767px) {
                  font-size: 1.5rem;
                }
              }
            }

            .subhead {
              font-size: 2rem;
              color: var(--Color-SyRed);
              font-weight: 700;
              text-align: center;
              font-family: "Roboto", "M PLUS 1p", sans-serif;
              letter-spacing: 0.03em;
              transform: rotate(0.05deg);
              font-weight: 700;

              /* SP */
              @media screen and (max-width: 767px) {
                font-size: 1.375rem;
              }
            }

            .txt {
              margin-top: 1rem;
              font-size: 1rem;
              line-height: 2;

              /* SP */
              @media screen and (max-width: 767px) {
                font-size: 0.875rem;
              }
            }
          }
        }
      }
    }
  }

  .city {
    .bg {
      position: relative;
      z-index: -1;
    }
  }

  .sy-logo {
    margin-top: -7.8125rem;
    height: 350vh;
    clip-path: ellipse(230% 100% at 50% 100%);
    background-color: var(--Color-SyRed);

    @media screen and (min-width: 1921px) {
      margin-top: -9.5rem;
    }

    /* SP */
    @media screen and (max-width: 767px) {
      clip-path: ellipse(220% 100% at 50% 100%);
      overflow-x: clip;
      margin-top: -2.5rem;
      height: auto;
    }

    .sy-logo-inner {
      z-index: 3;
      position: sticky;
      top: 0;
      height: 100svh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 2rem;

      background-image: url(../img/sy-mark.svg), url(../img/triangle-dr.svg);
      background-position: 110% 3%, 0 110%;
      background-repeat: no-repeat, no-repeat;
      background-size: 33rem auto, 25rem auto;

      /* SP */
      @media screen and (max-width: 767px) {
        position: relative;
        height: auto;
        background-position: 120% -3%, 0 80%;
        background-size: 16rem auto, 12rem auto;
      }
    }

    /* SP */
    @media screen and (max-width: 767px) {
      background-size: 18rem auto;
      background-position: 180% -2%;
      padding-bottom: 3rem;
    }

    .scroll-logo {
      position: relative;
      overflow-x: clip;

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

      .sy-logo-scroll-animation {
        width: 70rem;
        margin: 0 auto;

        /* SP */
        @media screen and (max-width: 767px) {
          width: 100%;
          margin-top: 2rem;
        }
      }
    }

    .detail {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;

      /* SP */
      @media screen and (max-width: 767px) {
        /* top: 10rem; */
        position: relative;
        width: auto;
        height: auto;
        top: auto;
        left: auto;
        padding: 0 1rem;
      }

      /* animation */
      .txtbox {
        scale: 0.7;
        opacity: 0;
      }

      .colorbox {
        scale: 0.7;
        opacity: 0;
      }

      &amp;.is-visible {
        .txtbox {
          opacity: 1;
          scale: 1;
          transition: scale var(--Easing-Bounce) 400ms, opacity ease-out 200ms;
        }

        .colorbox {
          opacity: 1;
          scale: 1;
          transition: scale var(--Easing-Bounce) 400ms, opacity ease-out 200ms;
          transition-delay: 200ms;
        }
      }

      .inner {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        width: 70rem;

        /* SP */
        @media screen and (max-width: 767px) {
          flex-direction: column;
        }

        .section-ttl {
          text-align: left;
          margin-bottom: 2rem;

          /* SP */
          @media screen and (max-width: 767px) {
            margin-bottom: 1rem;
          }

          .jabox {
            justify-content: left;
          }

          .ja {
            color: var(--Color-White);
          }

          .en {
            color: var(--Color-White);
          }
        }

        .txtbox {
          width: 22.5rem;

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

          .txt {
            color: var(--Color-White);
            font-size: 1rem;
            line-height: 2;

            /* SP */
            @media screen and (max-width: 767px) {
              font-size: 0.875rem;
            }
          }
        }

        .colorbox {
          padding: 2rem;
          border-radius: 1.5rem;
          width: 15rem;
          background-color: var(--Color-White);

          /* SP */
          @media screen and (max-width: 767px) {
            padding: 1.5rem 1.25rem;
            width: 100%;
            margin: 2rem auto 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            gap: 1rem;
            align-items: stretch;
          }

          .ttl {
            font-size: 1.25rem;
            font-weight: 700;
            padding-bottom: 1rem;
            /* margin-bottom: 1rem; */
            text-align: center;
            border-bottom: 1px solid var(--Color-Grey-150);

            /* SP */
            @media screen and (max-width: 767px) {
              border-bottom: 0;
              border-right: 1px solid var(--Color-Grey-150);
              font-size: 1rem;
              padding: 0 1rem 0 0;
              display: flex;
              align-items: center;
              margin-bottom: 0;
            }
          }

          ul {
            display: flex;
            flex-direction: column;
            justify-content: start;
            width: 14rem;
            gap: 1.5rem;
            margin-top: 1rem;

            /* SP */
            @media screen and (max-width: 767px) {
              flex-direction: column;
              gap: 1.25rem;
              margin-top: 0;
            }

            li {
              display: flex;
              align-items: center;
              gap: 1rem;

              /* SP */
              @media screen and (max-width: 767px) {
                width: 100%;
                flex-direction: row;
                gap: 1rem;
              }

              .col {
                width: 3rem;
                height: 3rem;
                border-radius: 0.5rem;

                /* SP */
                @media screen and (max-width: 767px) {
                  width: 2.5rem;
                  height: 2.5rem;
                }

                &amp;.--sy-red {
                  background-color: var(--Color-SyRed);
                }

                &amp;.--sy-green {
                  background-color: var(--Color-SyGreen);
                }

                &amp;.--sy-pink {
                  background-color: var(--Color-SyPink);
                }
              }

              .txt {
                color: var(--Color-Grey-800);
                text-align: left;

                /* SP */
                @media screen and (max-width: 767px) {
                  text-align: left;
                }

                .en {
                  font-weight: 700;
                  font-size: 0.875rem;
                  line-height: 1;

                  /* SP */
                  @media screen and (max-width: 767px) {
                    font-size: 0.875rem;
                  }
                }

                .ja {
                  line-height: 1;
                  font-size: 0.75rem;
                  color: var(--Color-Grey-400);
                  margin-top: 0.75rem;

                  /* SP */
                  @media screen and (max-width: 767px) {
                    margin-top: 0.5rem;
                  }
                }
              }
            }
          }
        }
      }
    }

    .progress {
      position: absolute;
      top: 50%;
      left: 4rem;
      height: 20rem;
      transform: translateY(-50%);

      /* SP */
      @media screen and (max-width: 767px) {
        left: 1rem;
        display: none;
      }

      .rect {
        width: 0.25rem;
        height: 0;
        position: absolute;
        top: 0;
        left: calc(-0.25rem / 2);
        background-color: var(--Color-White);
        border-radius: 1rem;
      }

      .line {
        width: 1px;
        height: 100%;
        background-color: var(--Color-White);
        opacity: 0.4;
      }
    }
  }

  .novelty {
    position: relative;
    z-index: 10;

    background-color: var(--Color-SyRed);
    margin-top: -8rem;

    /* SP */
    @media screen and (max-width: 767px) {
      padding-top: 1.5rem;
      margin-top: 0;
    }

    .novelty-inner {
      background-color: var(--Color-White);
      overflow: hidden;
      padding: 5rem 0 5rem;
      position: relative;
      margin: 0 2rem;
      border-radius: 5rem;

      /* SP */
      @media screen and (max-width: 767px) {
        margin: 0 1rem;
        border-radius: 1.5rem;
        padding: 4rem 0 3rem;
      }
    }

    .inner {
      position: relative;
      z-index: 10;
      display: flex;
      justify-content: center;
      max-width: 70rem;
      margin: 0 auto;
    }

    .section-ttl {
      position: relative;
      margin-bottom: 2rem;
      line-height: 1.25;

      /* SP */
      @media screen and (max-width: 767px) {
        margin-bottom: 1rem;
      }
    }

    .novelty-gallery {
      position: relative;
      margin-top: 2rem;
      overflow: clip;
      z-index: 10;

      /* SP */
      @media screen and (max-width: 767px) {
        margin-top: 0rem;
      }

      .slide {
        position: relative;
        display: flex;
        gap: 2rem;
        z-index: 10;

        /* SP */
        @media screen and (max-width: 767px) {
          margin-top: 0;
        }

        .slide-inner {
          display: flex;
          gap: 2rem;
          animation: slide-x-animation 60s linear infinite both;
          align-items: center;

          /* SP */
          @media screen and (max-width: 767px) {
            padding-top: 1.5rem;
            gap: 1rem;
            padding-bottom: 1rem;
          }

          .item {
            position: relative;
            &amp;.--rect {
              width: 22rem;
              aspect-ratio: 1/1;
            }

            &amp;.--circle {
              width: 14rem;
              aspect-ratio: 1/1;
            }

            &amp;.--sy-logo {
              width: 20rem;
              aspect-ratio: 320/333;
            }

            /* SP */
            @media screen and (max-width: 767px) {

              &amp;.--rect {
                width: 15rem;
              }
              &amp;.--circle {
                width: 11rem;
              }
              &amp;.--sy-logo {
                width: 14rem;
              }
            }
          }
        }
      }

      
      .flipper {
        transition: transform 0.6s ease-out; /* 繝輔Μ繝��繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ縺ｮ譎る俣 */
        transform-style: preserve-3d;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      
      .front, .back {
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      
      .front {
        z-index: 2;
      }
      
      .back {
        transform: rotateY(180deg);
      }
      
      /* 閾ｪ蜍輔ヵ繝ｪ繝��逕ｨ縺ｮ繧ｯ繝ｩ繧ｹ */
      .flipper.flipped {
        transform: rotateY(180deg);
      }
    }

    .novelty-illust {
      position: absolute;

      &amp;.--01 {
        top: 7.5rem;
        right: 10rem;
        width: 7.5rem;
        z-index: 11;

        /* SP */
        @media screen and (max-width: 767px) {
          width: 5rem;
          right: 1rem;
          top: 8rem;
          display: none;
        }
      }

      &amp;.--02 {
        top: 5rem;
        right: 17.5rem;
        width: 6rem;
        z-index: 11;

        /* SP */
        @media screen and (max-width: 767px) {
          width: 4rem;
          top: 3rem;
          right: 2.5rem;
          display: none;
        }
      }

      &amp;.--pink {
        width: 21.25rem;
        top: -19rem;
        left: 0;
        z-index: 2;

        /* SP */
        @media screen and (max-width: 767px) {
          top: -7rem;
          width: 7rem;
        }
      }

      &amp;.--green {
        width: 21.25rem;
        bottom: -19rem;
        right: 0;
        z-index: 2;

        /* SP */
        @media screen and (max-width: 767px) {
          bottom: -6.5rem;
          width: 7rem;
        }
      }
    }

    .wave-txt {
      overflow-x: clip;
      position: absolute;
      bottom: 10rem;
      left: 0;
      width: 100%;

      svg {
        width: 100%;
        height: auto;
      }

      .txt {
        position: absolute;
        width: 100%;
        /* white-space: nowrap; */
        top: 50%;
        translate: 0 -50%;
      }

      .char {
        position: absolute;
        font-size: 5rem;
        animation: moveAlongPath 50s linear infinite;
        font-weight: 700;
        color: var(--Color-SyLightRed);
      }
    }
  }

  .conclusion {
    position: relative;
    z-index: 4;
    text-align: center;
    background-color: var(--Color-SyRed);

    .masked-container {
      position: relative;
      width: 100%;
      clip-path: circle(0% at 50% 50%);
      /* 蛻晄悄迥ｶ諷九〒蜀�ｒ蟆上＆縺� */
      transition: clip-path 100ms ease-out;

      background-color: var(--Color-SyLightRed);

      .inner {
        padding-top: 2rem;
        padding-bottom: 4rem;
        width: 100%;
        position: relative;

        .lead {
          width: 45rem;
          margin: 0 auto;
          
          /* SP */
          @media screen and (max-width: 767px) {
            width: 21rem;
          }
        }

        .ttl {
          margin-bottom: 4rem;
          font-size: 3.25rem;
          font-weight: 700;
          color: var(--Color-SyRed);
          font-family: "Roboto", "M PLUS 1p", sans-serif;
          letter-spacing: 0.05em;
          line-height: 1.5;

          /* SP */
          @media screen and (max-width: 767px) {
            font-size: 1.375rem;
            margin-top: 1rem;
            margin-bottom: 1rem;
          }
        }

        .lead-img {
          position: absolute;

          &amp;.--01 {
            width: 4.875rem;
            top: 3rem;
            left: 9.5rem;
          }

          &amp;.--02 {
            width: 5.75rem;
            top: 3.5rem;
            right: 12rem;
          }

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

    .img-inner {
      width: 85rem;
      margin: 0 auto;
      position: relative;
      height: 18rem;
      margin-top: -10rem;

      /* SP */
      @media screen and (max-width: 767px) {
        width: 100%;
        margin-top: -8rem;;
      }

      .img {
        position: absolute;
        bottom: 0;

        &amp;.--04 {
          width: 10.875rem;
          left: 0rem;
          animation-delay: 200ms;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 5rem;
            display: none;
          }

        }

        &amp;.--02 {
          width: 14.6875rem;
          left: 12rem;
          animation-delay: 100ms;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 7rem;
            left: 0.5rem;
          }
        }

        &amp;.--01 {
          width: 26rem;
          left: 29rem;
          animation-delay: 0;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 17rem;
            left: 3.5rem;
          }
        }

        &amp;.--03 {
          width: 12.5rem;
          left: 57rem;
          animation-delay: 100ms;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 6rem;
            left: 17rem;
          }
        }

        &amp;.--05 {
          width: 15.75rem;
          left: 70rem;
          animation-delay: 200ms;

          /* SP */
          @media screen and (max-width: 767px) {
            width: 5rem;
            display: none;
          }
        }
      }
    }

    /* animation */
    .img-inner {
      .img {
        opacity: 0;
        /* transform: translateY(1rem); */
      }
    }

    &amp;.is-animation {
      .img {
        animation: jump-fade-in 800ms cubic-bezier(0.33, 1, 0.68, 1) both;
      }
    }
  }
}

@keyframes jump-fade-in {
  0% {
    opacity: 0;
    transform: translateY(2.5rem);
  }

  25% {
    opacity: 1;
    transform: translateY(-1.5rem);
    animation-timing-function: ease-out;
  }

  45% {
    transform: translateY(0.3rem);
    animation-timing-function: ease-in;
  }

  65% {
    transform: translateY(-0.2rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-x-animation {
  from {
    transform: translateX(0);
  }

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

@keyframes slide-y-animation {
  from {
    transform: translateY(0);
  }

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

@keyframes poyon {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.1, 0.9);
  }

  50% {
    transform: scale(0.9, 1.1);
  }

  70% {
    transform: scale(1.05, 0.95);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes moveAlongPath {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}
</pre></body></html>