@charset "utf-8";

header {
  opacity: 0;
}

/* ↓↓↓ animation ↓↓↓ */
@keyframes scroll-circle {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: -360deg;
  }
}
/* ↑↑↑ animation ↑↑↑ */

/* ↓↓↓ fv ↓↓↓ */
.fv {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 764;
  overflow-x: clip;
  @media (max-width: 768px) {
    aspect-ratio: 375 / 667;
  }
  .copy {
    position: absolute;
    top: 11.40625vw;
    left: 11.40625vw;
    width: 14.531250000000002vw;
    height: fit-content;
    z-index: 1;
    opacity: 0;
    @media (max-width: 768px) {
      top: 23.200000000000003vw;
      right: 6.4vw;
      left: unset;
      width: 34.66666666666667vw;
    }
  }
  .image01 {
    position: absolute;
    top: -1.5625vw;
    right: -22.65625vw;
    width: 87.34375vw;
    aspect-ratio: 1118 / 728;
    opacity: 0;
    filter: blur(10px);
    will-change: filter, opacity;
    @media (max-width: 768px) {
      top: unset;
      right: unset;
      bottom: 14.399999999999999vw;
      left: 0;
      width: 136.53333333333333vw;
      aspect-ratio: 512 / 334;
    }

    svg {
      width: 100%;
      height: auto;
      image {
        width: 100%;
        height: auto;
      }
    }
  }
  .image02 {
    position: absolute;
    top: 36.25vw;
    left: -13.4375vw;
    width: 45.78125vw;
    aspect-ratio: 586 / 382;
    opacity: 0;
    filter: blur(10px);
    will-change: filter, opacity;
    @media (max-width: 768px) {
      top: 33.33333333333333vw;
      left: -19.2vw;
      width: 71.73333333333333vw;
      aspect-ratio: 269 / 175;
    }
    svg {
      width: 100%;
      height: auto;
      image {
        width: 100%;
        height: auto;
      }
    }
  }
  .scroll {
    position: absolute;
    right: 2.96875vw;
    bottom: 7.03125vw;
    width: 7.421875vw;
    aspect-ratio: 1 / 1;
    opacity: 0;
    @media (max-width: 768px) {
      right: 4vw;
      bottom: 4.266666666666667vw;
      width: 17.599999999999998vw;
    }
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(../img/top/scroll-circle.svg) no-repeat;
      background-size: cover;
      animation: scroll-circle 40s linear infinite;
    }
    &::before {
      content: '';
      position: absolute;
      translate: -50% -50%;
      top: 50%;
      left: 50%;
      width: 1.640625vw;
      height: 1.640625vw;
      background: url(../img/common/menu-arrow.svg) no-repeat;
      background-size: cover;
      rotate: 90deg;
      @media (max-width: 768px) {
        width: 4vw;
        height: 4vw;
      }
    }
  }
  div[class*="deco"] {
    position: absolute;
    z-index: 1;
    opacity: 0;
  }
  .deco01 {
    top: -6.484375000000001vw;
    left: 40.9375vw;
    width: 12.96875vw;
    @media (max-width: 768px) {
      top: -16.53333333333333vw;
      left: 40vw;
      width: 33.33333333333333vw;
    }
  }
  .deco02 {
    top: 2.578125vw;
    right: 30.546875vw;
    width: 2.5vw;
    @media (max-width: 768px) {
      top: unset;
      bottom: 16vw;
      right: 56.00000000000001vw;
      width: 5.866666666666666vw;
    }
  }
  .deco03 {
    top: 6.09375vw;
    right: 24.21875vw;
    width: 4.140625vw;
    @media (max-width: 768px) {
      top: unset;
      bottom: 3.2vw;
      right: 41.86666666666667vw;
      width: 9.333333333333334vw;
    }
  }
  .deco04 {
    top: 0vw;
    right: 17.265625vw;
    width: 5.078125vw;
    @media (max-width: 768px) {
      top: unset;
      bottom: 16vw;
      right: 26.400000000000002vw;
      width: 11.466666666666667vw;
    }
  }
  .deco05 {
    top: 21.71875vw;
    left: -1.5625vw;
    width: 5.859375vw;
    @media (max-width: 768px) {
      top: 84.26666666666667vw;
      left: 5.6vw;
      width: 15.466666666666667vw;
    }
  }
  .deco06 {
    top: 4.84375vw;
    left: 28.984375vw;
    width: 9.0625vw;
    @media (max-width: 768px) {
      top: 22.400000000000002vw;
      left: 35.733333333333334vw;
      width: 18.4vw;
    }
  }
  .deco07 {
    bottom: 3.59374999999999965vw;
    left: 33.59375vw;
    width: 12.734375vw;
    @media (max-width: 768px) {
      bottom: 0vw;
      left: 3.2vw;
      width: 27.73333333333333vw;
    }
  }
}
/* ↑↑↑ fv ↑↑↑ */

/* ↓↓↓ news ↓↓↓ */
.news {
  position: relative;
  margin-top: 2.03125vw;
  @media (max-width: 768px) {
    margin-top: 12vw;
  }
  .ttl-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    .en {
      font-size: 1.25vw;
      font-weight: 700;
      font-family: var(--text-lato);
      color: var(--color-orange);
      @media (max-width: 768px) {
        font-size: 3.4666666666666663vw;
      }
    }
    .ttl {
      font-size: 2.421875vw;
      font-weight: 700;
      @media (max-width: 768px) {
        font-size: 6.933333333333333vw;
      }
    }
    .line {
      width: 12.109375vw;
      rotate: 8deg;
      @media (max-width: 768px) {
        width: 32.800000000000004vw;
      }
    }
  }
  .content {
    position: relative;
    width: 66.875vw;
    aspect-ratio: 856/331;
    margin: 1.328125vw auto 0;
    border-radius: 2.5vw;
    background-color: #fff;
    padding: 3.75vw 1.640625vw 1.015625vw 4.375vw;
    z-index: 1;
    @media (max-width: 768px) {
      width: 79.73333333333333vw;
      height: 97.33333333333334vw;
      min-height: fit-content;
      margin: 4.8vw auto 0;
      border-radius: 6.4vw;
      padding: 6.666666666666667vw 2.666666666666667vw 6.666666666666667vw 5.866666666666666vw; 
    }
    .list {
      width: 100%;
      height: 100%;
      padding: 0 3.125vw 2.734375vw 0;
      @media (max-width: 768px) {
        padding: 0 4vw 0 0;
      }
      .item {
        width: 100%;
        padding-bottom: 1.09375vw;
        border-bottom: 1px solid #EDDBC6;
        @media (max-width: 768px) {
          padding-bottom: 3.733333333333334vw;
        }
        + .item {
          margin-top: 1.09375vw;
          @media (max-width: 768px) {
            margin-top: 3.733333333333334vw;
          }
        }
        .wrap {
          display: flex;
          gap: 1.25vw;
          align-items: center;
          @media (max-width: 768px) {
            gap: 2.1333333333333333vw;
          }
          .date {
            font-size: 0.9375vw;
            font-weight: 700;
            @media (max-width: 768px) {
              font-size: 3.2vw;
            }
          }
          .tag {
            font-size: 0.9375vw;
            font-weight: 700;
            color: #fff;
            line-height: 1.5;
            padding: 0.15625vw 1.25vw 0.234375vw;
            border-radius: 1.875vw;
            @media (max-width: 768px) {
              font-size: 3.2vw;
              padding: 0.5333333333333333vw 4vw 0.8vw;
              border-radius: 6.4vw;
              letter-spacing: 0;
            }

            &.-orange {
              background-color: var(--color-orange);
            }
            &.-pink {
              background-color: var(--color-pink);
            }
            &.-blue {
              background-color: #51BCC6;
            }
            &.-yellow {
              background-color: #F7B600;
            }
          }
        }
        .head {
          font-size: 1.171875vw;
          font-weight: 700;
          margin-top: 0.625vw;
          text-align: justify;
          word-break: break-all;
          @media (max-width: 768px) {
            font-size: 4vw;
            margin-top: 2.1333333333333333vw;
          }
        }
      }
      .simplebar-vertical {
        width: 0.234375vw;
        border-radius: 10px;
        background-color: #D5D5D5;
        @media (max-width: 768px) {
          width: 0.8vw;
        }
        .simplebar-scrollbar {
          min-width: 100%;
          width: 100%;
          background-color: var(--color-orange);
          border-radius: 10px;
          &::before {
            display: none;
          }
        }
      }
    }
  }
  div[class*="deco"] {
    position: absolute;
  }
  .deco01 {
    top: 0;
    right: 6.640625vw;
    width: 3.75vw;
    @media (max-width: 768px) {
      top: -7.466666666666668vw;
      right: 10.4vw;
      width: 7.466666666666668vw;
    }
  }
  .deco02 {
    top: 7.8125vw;
    right: 8.4375vw;
    width: 4.6875vw;
    @media (max-width: 768px) {
      top: 7.466666666666668vw;
      right: 13.866666666666665vw;
      width: 9.333333333333334vw;
    }
  }
  .deco03 {
    top: 13.359375000000002vw;
    right: 2.421875vw;
    width: 2.421875vw;
    @media (max-width: 768px) {
      top: 18.666666666666668vw;
      right: 4.533333333333333vw;
      width: 4.8vw;
    }
  }
  .deco04 {
    top: 19.921875vw;
    left: 5.625vw;
    width: 12.968750000000002vw;
    @media (max-width: 768px) {
      top: 12.8vw;
      left: 0;
      width: 22.933333333333334vw;
    }
  }
  .deco05 {
    top: 25vw;
    right: 5.234375vw;
    width: 6.484375000000001vw;
    @media (max-width: 768px) {
      display: none;
    }
  }
  .deco06 {
    top: -4.6875vw;
    right: 21.484375vw;
    width: 9.53125vw;
    @media (max-width: 768px) {
      top: -3.2vw;
      right: unset;
      left: 8.533333333333333vw;
      width: 21.066666666666666vw;
    }
  }
}
/* ↑↑↑ news ↑↑↑ */

/* ↓↓↓ contents ↓↓↓ */
.contents {
  position: relative;
  margin-top: 7.656250000000001vw;
  padding-block: 10.15625vw 21.875vw;
  background-image: linear-gradient(180deg, transparent 0vw, transparent 11.71875vw, #fff 11.71875vw, #fff calc(100% - 11.71875vw), transparent calc(100% - 11.71875vw), transparent 100%);
  z-index: 0;
  overflow-x: clip;
  @media (max-width: 768px) {
    margin-top: 15.2vw;
    padding-block: 21.6vw 48.266666666666666vw;
    background-image: linear-gradient(180deg, transparent 0vw, transparent 15.2vw, #fff 15.2vw, #fff calc(100% - 15.2vw), transparent calc(100% - 15.2vw), transparent 100%);
  }
  &::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%;
    height: 11.71875vw;
    background: url(../img/common/sec-deco.svg) no-repeat;
    background-size: cover;
    z-index: -1;
    @media (max-width: 768px) {
      height: 15.2vw;
      background: url(../img/common/sec-deco_sp.svg) no-repeat;
      background-size: cover;
    }
  }
  &::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 11.71875vw;
    background: url(../img/common/sec-deco.svg) no-repeat;
    background-size: cover;
    scale: 1 -1;
    z-index: -1;
    @media (max-width: 768px) {
      height: 15.2vw;
      background: url(../img/common/sec-deco_sp.svg) no-repeat;
      background-size: cover;
    }
  }
  .ttl-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    .en {
      font-size: 1.25vw;
      font-weight: 700;
      font-family: var(--text-lato);
      color: var(--color-orange);
      @media (max-width: 768px) {
        font-size: 3.4666666666666663vw;
      }
    }
    .ttl {
      font-size: 2.421875vw;
      font-weight: 700;
      @media (max-width: 768px) {
        font-size: 6.933333333333333vw;
      }
    }
    .line {
      width: 12.109375vw;
      rotate: 8deg;
      @media (max-width: 768px) {
        width: 32.800000000000004vw;
      }
    }
  }
  .block {
    display: flex;
    gap: 3.75vw;
    margin-top: 3.75vw;
    @media (max-width: 768px) {
      flex-direction: column;
      gap: 6.4vw;
      margin-top: 4.8vw;
    }
    + .block {
      margin-top: 9.375vw;
      @media (max-width: 768px) {
        margin-top: 21.333333333333336vw;
      }
    }
    .image {
      width: 49.0625vw;
      height: fit-content;
      border-radius: 0 2.5vw 2.5vw 0;
      @media (max-width: 768px) {
        width: 86.93333333333332vw;
        border-radius: 0 8.533333333333333vw 8.533333333333333vw 0;
      }
    }
    .text-wrap {
      width: 30.625000000000004vw;
      @media (max-width: 768px) {
        width: 90.4vw;
        margin: 0 auto;
      }
      .head {
        font-size: 2.5vw;
        font-weight: 700;
        @media (max-width: 768px) {
          font-size: 6.933333333333333vw;
        }
        .-orange {
          color: var(--color-orange);
        }
        .-pink {
          color: var(--color-pink);
        }
        .-blue {
          color: #51BCC6;
        }
        .-yellow {
          color: #F7B600;
        }
      }
      .text {
        font-size: 1.171875vw;
        font-weight: 700;
        text-align: justify;
        word-break: break-all;
        line-height: 2.13333;
        margin-top: 1.875vw;
        @media (max-width: 768px) {
          font-size: 4vw;
          margin-top: 3.2vw;
        }
      }
      .btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30.625000000000004vw;
        aspect-ratio: 392/84;
        margin-top: 3.75vw;
        box-sizing: border-box;
        border-radius: 4.375vw;
        overflow: hidden;
        z-index: 1;
        @media (max-width: 768px) {
          width: 90.4vw;
          aspect-ratio: 339/73;
          margin: 8.533333333333333vw auto 0;
          border-radius: 14.933333333333335vw;
        }
        &::before {
          content: '';
          position: absolute;
          translate: -50% -50%;
          top: 50%;
          left: 50%;
          width: 100%;
          height: auto;
          aspect-ratio: 1 / 1;
          background-color: #fff;
          border-radius: 50%;
          z-index: -1;
          scale: 0;
          transition: scale 500ms ease;
        }
        .btn-text {
          font-size: 1.7187500000000002vw;
          font-weight: 700;
          color: #fff;
          transition: color 300ms ease;
          @media (max-width: 768px) {
            font-size: 4.8vw;
          }
        }
        .arrow {
          display: block;
          position: absolute;
          translate: 0 -50%;
          top: 50%;
          right: 2.8125vw;
          width: 1.25vw;
          height: 1.25vw;
          mask-image: url(../img/common/menu-arrow.svg);
          mask-repeat: no-repeat;
          mask-size: cover;
          background-color: #fff;
          transition: color 300ms ease;
          @media (max-width: 768px) {
            right: 8.266666666666666vw;
            width: 3.733333333333334vw;
            height: 3.733333333333334vw;
          }
        }

        &.-orange {
          background-color: var(--color-orange);
          border: 2px solid var(--color-orange);
        }
        &.-pink {
          background-color: var(--color-pink);
          border: 2px solid var(--color-pink);
        } 
        &.-blue {
          background-color: #51BCC6;
          border: 2px solid #51BCC6;
        }
        &.-yellow {
          background-color: #F7B600;
          border: 2px solid #F7B600;
        }
        
        @media (min-width: 769px) {
          &:hover {
            &::before {
              scale: 1;
            }
            &.-orange {
              .btn-text {
                color: var(--color-orange);
              }
              .arrow {
                background-color: var(--color-orange);
              }
            }
            &.-pink {
              .btn-text {
                color: var(--color-pink);
              }
              .arrow {
                background-color: var(--color-pink);
              }
            }
            &.-blue {
              .btn-text {
                color: #51BCC6;
              }
              .arrow {
                background-color: #51BCC6;
              }
            }
            &.-yellow {
              .btn-text {
                color: #F7B600;
              }
              .arrow {
                background-color: #F7B600;
              }
            }
          }
        }
      }
    }
    &:nth-of-type(2n+1) {
      justify-content: flex-end;
      @media (max-width: 768px) {
        flex-direction: column-reverse;
        align-items: flex-end;
      }
      .image {
        border-radius: 2.5vw 0 0 2.5vw;
        @media (max-width: 768px) {
          border-radius: 8.533333333333333vw 0 0 8.533333333333333vw;
        }
      }
    }

    &:nth-of-type(4) {
      position: relative;
      display: block;
      width: 66.875vw;
      aspect-ratio: 856 / 663;
      margin: 13.90625vw auto 0;
      @media (max-width: 768px) {
        width: 90.4vw;
        height: 188vw;
        aspect-ratio: unset;
        margin: 29.333333333333332vw auto 0;
      }
      .bg-image {
        width: 100%;
        height: 100%;
        border-radius: 3.125vw;
        overflow: hidden;
        @media (max-width: 768px) {
          border-radius: 8.533333333333333vw;
        }
      }
      .text-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .head {
          position: absolute;
          translate: -50% 0;
          top: 2.5vw;
          left: 50%;
          width: max-content;
          font-size: 2.5vw;
          padding: 1.015625vw 2.96875vw;
          border-radius: 3.125vw;
          background-color: #fff;
          letter-spacing: 0.1em;
          @media (max-width: 768px) {
            top: 8.533333333333333vw;
            font-size: 6.666666666666667vw;
            padding: 1.6vw 4vw;
            border-radius: 10.666666666666668vw;
            letter-spacing: 0;
          }
        }
        .sns-btn-wrap {
          display: flex;
          position: absolute;
          bottom: 17.578125vw;
          left: 22.65625vw;
          width: 18.59375vw;
          justify-content: space-between;
          @media (max-width: 768px) {
            bottom: 82.66666666666667vw;
            left: 7.199999999999999vw;
            width: 48.266666666666666vw;
          }
          .sns-icon {
            width: calc((100% - 1.40625vw) / 2);
            transition: opacity 300ms ease;
            @media (max-width: 768px) {
              width: calc((100% - 2.4vw) / 2);
            }
            &:not([href]) {
              pointer-events: none;
            }
            @media (min-width: 769px) {
              &:hover {
                opacity: 0.7;
              }
            }
          }
        }
      }
      .container {
        position: absolute;
        bottom: 5.703125vw;
        left: 5.46875vw;
        display: flex;
        justify-content: space-between;
        width: 56.25vw;
        @media (max-width: 768px) {
          flex-direction: column;
          bottom: 14.133333333333335vw;
          left: 6.666666666666667vw;
          width: 77.06666666666668vw;
          margin: 6.4vw auto 0;
          gap: 4vw;
        }
        .card {
          display: flex;
          gap: 1.5625vw;
          justify-content: center;
          align-items: center;
          position: relative;
          width: 27.34375vw;
          aspect-ratio: 350 / 135;
          border: 0.234375vw solid #fff;
          border-radius: 1.875vw;
          box-sizing: border-box;
          background-color: #F7B600;
          overflow: hidden;
          @media (max-width: 768px) {
            width: 77.06666666666668vw;
            aspect-ratio: 289 / 111;
            border-radius: 6.4vw;
            gap: 5.333333333333334vw;
            border: 0.8vw solid #fff;
          }
          &::before {
            content: '';
            position: absolute;
            translate: -50% -50%;
            top: 50%;
            left: 50%;
            width: 100%;
            height: auto;
            aspect-ratio: 1 / 1;
            background-color: #fff;
            border-radius: 50%;
            scale: 0;
            transition: scale 500ms ease;
          }
          .icon {
            position: relative;
            width: 2.734375vw;
            aspect-ratio: 35/33;
            @media (max-width: 768px) {
              width: 7.733333333333333vw;
            }
            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              mask-image: url(../img/common/contact-icon01.svg);
              mask-size: cover;
              mask-repeat: no-repeat;
              background-color: #fff;
              transition: background-color 300ms ease;
            }
          }
          .text {
            position: relative;
            font-size: 2.1875vw;
            font-weight: 700;
            color: #fff;
            transition: color 300ms ease;
            z-index: 1;
            margin-top: 0;
            line-height: 1;
            @media (max-width: 768px) {
              font-size: 6.933333333333333vw;
            }
          }
          &:nth-of-type(2) {
            .icon {
              width: 2.734375vw;
              aspect-ratio: 35 / 25;
              @media (max-width: 768px) {
                width: 8.266666666666666vw;
              }
              &::before {
                mask-image: url(../img/common/contact-icon02.svg);
              }
            }
            .text {
              font-size: 1.7187500000000002vw;
              @media (max-width: 768px) {
                font-size: 5.333333333333334vw;
              }
            }
          }
          @media (min-width: 769px) {
            &:hover {
              &::before {
                scale: 1.1;
              }
              .icon {
                &::before {
                  background-color: #F7B600;
                }
              }
              .text {
                color: #F7B600;  
              }
            }
          }
        }
      }
      .btn {
        position: absolute;
        translate: -50% 0;
        bottom: -2.8125vw;
        left: 50%;
        border: 3px solid #F7B600;
        background-color: #fff;
        @media (max-width: 768px) {
          width: 84.53333333333333vw;
          aspect-ratio: 317 / 73;
          bottom: -9.6vw;
        }
        &:not([href]) {
          pointer-events: none;
        }
        .btn-text {
          color: #313131;
          @media (max-width: 768px) {
            font-size: 5.333333333333334vw;
          }
        }
      }
    }
  }
  
  div[class*="deco"] {
    position: absolute;
  }
  .deco01 {
    top: 8.203125vw;
    left: 9.453125vw;
    width: 10.15625vw;
    @media (max-width: 768px) {
      top: 18.133333333333333vw;
      left: 5.333333333333334vw;
      width: 24.266666666666666vw;
    }
  }
  .deco02 {
    top: 4.453125vw;
    left: 23.828125vw;
    width: 3.75vw;
    @media (max-width: 768px) {
      top: -7.733333333333333vw;
      left: 25.6vw;
      width: 7.733333333333333vw;
    }
  }
  .deco03 {
    top: 9.296875vw;
    left: 29.921874999999996vw;
    width: 2.421875vw;
    @media (max-width: 768px) {
      top: 4.533333333333333vw;
      left: 37.333333333333336vw;
      width: 4.8vw;
    }
  }
  .deco04 {
    top: 4.84375vw;
    right: 15.078125vw;
    width: 9.84375vw;
    @media (max-width: 768px) {
      top: 6.4vw;
      right: 5.866666666666666vw;
      width: 21.333333333333336vw;
    }
  }
  .deco05 {
    top: 34.453125vw;
    right: 6.25vw;
    width: 8.828125vw;
    z-index: 1;
    @media (max-width: 768px) {
      top: 78.4vw;
      right: 3.4666666666666663vw;
      width: 18.133333333333333vw;
    }
  }
  .deco06 {
    top: 29.453125000000004vw;
    right: -6.640625vw;
    width: 17.734375vw;
    @media (max-width: 768px) {
      top: 67.46666666666667vw;
      right: -24vw;
      width: 42.66666666666667vw;
      z-index: -1;
    }
  }
  .deco07 {
    bottom: 71.09375vw;
    left: 0;
    width: 15.46875vw;
    @media (max-width: 768px) {
      top: 189.33333333333334vw;
      bottom: unset;
      left: 1.6vw;
      width: 30.133333333333333vw;
    }
  }
  .deco08 {
    bottom: 65.625vw;
    right: 3.9843749999999996vw;
    width: 4.6875vw;
    @media (max-width: 768px) {
      bottom: 248vw;
      right: 1.3333333333333335vw;
      width: 10.4vw;
    }
  }
  .deco09 {
    bottom: 58.59375vw;
    right: 8.4375vw;
    width: 3.75vw;
    @media (max-width: 768px) {
      bottom: 238.66666666666669vw;
      right: 10.666666666666668vw;
      width: 8.266666666666666vw;
    }
  }
  .deco10 {
    bottom: 54.6875vw;
    right: 3.28125vw;
    width: 2.421875vw;
    @media (max-width: 768px) {
      bottom: 233.33333333333334vw;
      right: 0vw;
      width: 5.333333333333334vw;
    }
  }
  .deco11 {
    bottom: 39.0625vw;
    right: 5.78125vw;
    width: 5.78125vw;
    z-index: -1;
    @media (max-width: 768px) {
      bottom: 98.66666666666667vw;
      right: unset;
      left: -4.8vw;
      width: 16vw;
    }
  }
  .deco12 {
    bottom: 0;
    right: 27.500000000000004vw;
    width: 9.21875vw;
    @media (max-width: 768px) {
      bottom: 1.0666666666666667vw;
      right: 28.000000000000004vw;
      width: 22.400000000000002vw;
    }
  }
  .deco13 {
    bottom: 0;
    right: 17.5vw;
    width: 8.515625vw;
    @media (max-width: 768px) {
      bottom: 1.0666666666666667vw;
      right: 5.333333333333334vw;
      width: 20.533333333333335vw;
    }
  }
}
/* ↑↑↑ contents ↑↑↑ */

/* ↓↓↓ company ↓↓↓ */
.company {
  position: relative;
  padding-block: 5vw 9.375vw;
  @media (max-width: 768px) {
    padding-block: 14.399999999999999vw 27.200000000000003vw;
  }
  .ttl-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    .en {
      font-size: 1.25vw;
      font-weight: 700;
      font-family: var(--text-lato);
      color: var(--color-orange);
      @media (max-width: 768px) {
        font-size: 3.4666666666666663vw;
      }
    }
    .ttl {
      font-size: 2.421875vw;
      font-weight: 700;
      @media (max-width: 768px) {
        font-size: 6.933333333333333vw;
      }
    }
    .line {
      width: 12.109375vw;
      rotate: 8deg;
      @media (max-width: 768px) {
        width: 32.800000000000004vw;
      }
    }
  }
  .content {
    width: 66.875vw;
    margin: 1.875vw auto 0;
    padding: 5vw 6.875000000000001vw;
    border-radius: 2.5vw;
    background-color: #fff;
    @media (max-width: 768px) {
      width: 80vw;
      margin: 4.533333333333333vw auto 0;
      padding: 8.533333333333333vw 6.4vw;
      border-radius: 6.4vw;
    }
    .item {
      display: flex;
      @media (max-width: 768px) {
        flex-direction: column;
        gap: 1.6vw;
      }
      + .item {
        margin-top: 1.7187500000000002vw;
        @media (max-width: 768px) {
          margin-top: 2.666666666666667vw;
        }
      }
      .head {
        width: 13.359375000000002vw;
        font-size: 1.171875vw;
        font-weight: 700;
        padding-bottom: 1.7187500000000002vw;
        border-bottom: 1px solid var(--color-orange);
        @media (max-width: 768px) {
          width: 31.2vw;
          font-size: 4vw;
          padding-bottom: 1.6vw;
        }
      }
      .detail {
        flex: 1;
        font-size: 1.171875vw;
        font-weight: 700;
        padding: 0 0 1.7187500000000002vw 3.28125vw;
        border-bottom: 1px solid #EDDBC6;
        @media (max-width: 768px) {
          width: 100%;
          font-size: 4vw;
          padding: 0 0 4.266666666666667vw 0;
        }
      }
    }
  }
  div[class*="deco"] {
    position: absolute;
    z-index: 1;
  }
  .deco01 {
    top: -8.75vw;
    left: -1.7187500000000002vw;
    width: 15.390625vw;
    @media (max-width: 768px) {
      top: 4.8vw;
      left: 3.2vw;
      width: 21.866666666666667vw;
    }
  }
  .deco02 {
    top: 11.09375vw;
    left: 10.15625vw;
    width: 4.765625vw;
    @media (max-width: 768px) {
      top: 33.06666666666666vw;
      left: 18.666666666666668vw;
      width: 6.666666666666667vw;
    }
  }
  .deco03 {
    top: 7.8125vw;
    right: 10.9375vw;
    width: 5.3125vw;
    @media (max-width: 768px) {
      top: 25.866666666666667vw;
      right: 0vw;
      width: 12.533333333333333vw;
    }
  }
  .deco04 {
    top: 14.140625000000002vw;
    right: 20.546875vw;
    width: 2.421875vw;
    @media (max-width: 768px) {
      top: 40.8vw;
      right: 22.400000000000002vw;
      width: 5.6000000000000005vw;
    }
  }
  .deco05 {
    top: 18.75vw;
    right: 14.531250000000002vw;
    width: 3.8281250000000004vw;
    @media (max-width: 768px) {
      top: 51.46666666666667vw;
      right: 8.533333333333333vw;
      width: 8.799999999999999vw;
    }
  }
  .deco06 {
    bottom: 5.859375vw;
    left: 11.484375vw;
    width: 9.765625vw;
    @media (max-width: 768px) {
      bottom: 10.666666666666668vw;
      left: 1.3333333333333335vw;
      width: 21.866666666666667vw;
    }
  }
  .deco07 {
    bottom: 5.859375vw;
    right: 12.1875vw;
    width: 6.875000000000001vw;
    @media (max-width: 768px) {
      bottom: 13.333333333333334vw;
      right: 2.4vw;
      width: 20.8vw;
    }
  }
}
/* ↑↑↑ company ↑↑↑ */