@charset "utf-8";
/* ↓↓↓ float-btn ↓↓↓ */
.float-btn_wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: fixed;
  translate: 0 -50%;
  right: 0;
  top: 50%;
  z-index: 4;
  transition: opacity 300ms ease, visibility 0ms ease;
  @media (max-width: 768px) {
    flex-direction: row-reverse;
    gap: 8px;
    translate: 0 0;
    top: unset;
    bottom: 0;
    right: 16px;
  }
  &.-hide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 0ms 300ms ease;
  }
  .float-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    aspect-ratio: 55 / 203;
    border-radius: 16px 0 0 16px;
    background-color: var(--color-orange);
    @media (max-width: 768px) {
      width: 130px;
      aspect-ratio: 130 / 49;
      border-radius: 16px 16px 0 0;
    }
    .text {
      font-size: 2.0rem;
      writing-mode: vertical-lr;
      font-weight: 700;
      color: #fff;
      @media (max-width: 768px) {
        font-size: 1.5rem;
        writing-mode: initial;
      }
    }
    + .float-btn {
      background-color: #F7B600;
    }
  }
}
/* ↑↑↑ float-btn ↑↑↑ */

/* ↓↓↓ fv ↓↓↓ */
.fv {
  position: relative;
  width: 100%;
  aspect-ratio: 1280/720;
  overflow-x: clip;
  @media (max-width: 768px) {
    aspect-ratio: 375/667;
  }
  .ttl-wrap {
    padding: 14.765624999999998vw 0 0 9.6875vw;
    @media (max-width: 768px) {
      padding: 26.93333333333333vw 0 0 9.6vw;
    }
    .ttl {
      font-size: 3.75vw;
      font-weight: 700;
      line-height: 1.25;
      @media (max-width: 768px) {
        font-size: 6.933333333333333vw;
      }
      .-orange {
        color: var(--color-orange);
      }
    }
    .num {
      width: fit-content;
      font-size: 1.171875vw;
      font-weight: 700;
      line-height: 1;
      color: #000;
      padding: 0.625vw 0.78125vw;
      background-color: #fff;
      margin-top: 0.625vw;
      @media (max-width: 768px) {
        font-size: 3.4666666666666663vw;
        padding: 1.6vw 2.666666666666667vw;
        margin-top: 2.1333333333333333vw;
      }
    } 
  }
  .image {
    position: absolute;
    top: -3.125vw;
    right: -1.171875vw;
    width: 68.671875vw;
    @media (max-width: 768px) {
      top: 85.06666666666666vw;
      right: -2.666666666666667vw;
      width: 91.46666666666667vw;
    }
  }
  .list {
    position: absolute;
    bottom: 6.09375vw;
    left: 9.6875vw;
    display: flex;
    gap: 1.25vw;
    width: fit-content;
    @media (max-width: 768px) {
      position: relative;
      bottom: unset;
      left: unset;
      display: flex;
      gap: 2.1333333333333333vw;
      margin: 4.266666666666667vw 0 0 8vw;
    }
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 15.312500000000002vw;
      aspect-ratio: 1 / 1;
      background-color: var(--color-orange);
      border-radius: 50%;
      @media (max-width: 768px) {
        width: 27.73333333333333vw;
      }
      .text {
        font-size: 2.03125vw;
        font-weight: 700;
        line-height: 1.230769;
        text-align: center;
        color: #fff;
        @media (max-width: 768px) {
          font-size: 4vw;
          line-height: 1.2;
        }
      }
    }
  }
  div[class*="deco"] {
    position: absolute;
  }
  .deco01 {
    top: -4.375vw;
    left: 25.624999999999996vw;
    width: 14.765624999999998vw;
    @media (max-width: 768px) {
      top: 24.53333333333333vw;
      left: unset;
      right: -10.666666666666668vw;
      width: 35.733333333333334vw;
    }
  }
  .deco02 {
    top: 29.062500000000004vw;
    left: -1.7187500000000002vw;
    width: 5.78125vw;
    @media (max-width: 768px) {
      top: unset;
      bottom: 53.333333333333336vw;
      left: -5.6000000000000005vw;
      width: 15.2vw;
    }
  }
  .deco03 {
    bottom: 0.46875vw;
    left: 3.359375vw;
    width: 8.75vw;
    z-index: 1;
    @media (max-width: 768px) {
      top: 74.93333333333332vw;
      bottom: unset;
      left: 4.266666666666667vw;
      width: 19.466666666666665vw;
    }
  }
  .deco04 {
    bottom: 0vw;
    right: 8.75vw;
    width: 7.421875vw;
    z-index: 1;
    @media (max-width: 768px) {
      bottom: 13.333333333333334vw;
      right: 4.8vw;
      width: 16vw;
    }
  }
}
/* ↑↑↑ fv ↑↑↑ */

/* ↓↓↓ intro ↓↓↓ */
.intro {
  position: relative;
  margin-top: 6.5625vw;
  overflow-x: clip;
  @media (max-width: 768px) {
    margin-top: 9.6vw;
  }
  .content {
    width: 80.625vw;
    padding: 5vw 6.875000000000001vw;
    background-color: #fff;
    border-radius: 3.125vw;
    margin: 0 auto;
    @media (max-width: 768px) {
      width: 85.86666666666667vw;
      padding: 10.666666666666668vw 6.4vw;
      border-radius: 6.4vw;
    }
    .ttl-wrap {
      .ttl {
        font-size: 2.5vw;
        font-weight: 700;
        text-align: center;
        line-height: 1;
        @media (max-width: 768px) {
          font-size: 5.866666666666666vw;
        }
      }
     .line {
        width: 28.125vw;
        margin: 0 auto;
        rotate: 3deg;
        @media (max-width: 768px) {
          width: 64vw;
        }
      } 
    }
    .text {
      font-size: 1.171875vw;
      font-weight: 700;
      line-height: 2.13333;
      margin-top: 1.25vw;
      @media (max-width: 768px) {
        font-size: 4vw;
        margin-top: 4.266666666666667vw;
      }
      .line {
        width: 28.125vw;
        margin: 0 auto;
        rotate: 3deg;
        @media (max-width: 768px) {
          width: 64vw;
        }
      } 
    }
    .block {
      padding: 3.125vw;
      margin-top: 1.875vw;
      border-radius: 1.875vw;
      background-color: var(--color-orange);
      @media (max-width: 768px) {
        padding: 8.533333333333333vw 5.333333333333334vw;
        margin-top: 8.533333333333333vw;
        border-radius: 6.4vw;
      }
      .block-head {
        font-size: 1.953125vw;
        font-weight: 700;
        text-align: center;
        color: #fff;
        @media (max-width: 768px) {
          font-size: 5.333333333333334vw;
        }
      }
      .block-text {
        font-size: 1.171875vw;
        font-weight: 700;
        margin-top: 0.78125vw;
        color: #fff;
        line-height: 2.13333;
        @media (max-width: 768px) {
          font-size: 4vw;
          margin-top: 4vw;
        }
      }
    }
    .container {
      display: flex;
      justify-content: space-between;
      margin-top: 2.5vw;
      @media (max-width: 768px) {
        flex-direction: column;
        gap: 2.1333333333333333vw;
        margin-top: 8.533333333333333vw;
      }
      .card {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20.9375vw;
        aspect-ratio: 268 / 126;
        background-color: #F8F3ED;
        border-radius: 1.875vw;
        @media (max-width: 768px) {
          width: 71.46666666666667vw;
          aspect-ratio: unset;
          padding-block: 5.333333333333334vw;
          border-radius: 6.4vw;
        }
        .card-text {
          width: fit-content;
          text-align: center;
          font-size: 1.5625vw;
          font-weight: 700;
          @media (max-width: 768px) {
            font-size: 4.8vw;
          }
        }
      }
    }
  }
  .target {
    width: 80.625vw;
    margin: 9.375vw auto 0;
    @media (max-width: 768px) {
      width: 90.4vw;
      margin: 21.333333333333336vw auto 0;
    }
    .target-head {
      position: relative;
      width: fit-content;
      font-size: 2.5vw;
      font-weight: 700;
      margin: 0 auto;
      line-height: 1;
      @media (max-width: 768px) {
        font-size: 6.4vw;
      }
      .-orange {
        color: var(--color-orange);
      }
      &::before,&::after {
        content: '';
        position: absolute;
        top: 0.15625vw;
        left: -2.34375vw;
        width: 0.234375vw;
        height: 2.578125vw;
        background-color: #484848;
        border-radius: 9999px;
        rotate: -32deg;
        @media (max-width: 768px) {
          top: -0.5333333333333333vw;
          left: -6.4vw;
          width: 0.8vw;
          height: 8.799999999999999vw;
        }
      }
      &::after {
        left: unset;
        right: -2.34375vw;
        rotate: 32deg;
        @media (max-width: 768px) {
          right: -6.4vw;
        }
      }
    }
    .container {
      display: flex;
      justify-content: space-between;
      margin-top: 2.5vw;
      @media (max-width: 768px) {
        width: 86.13333333333333vw;
        flex-direction: column;
        gap: 4vw;
        margin: 4.266666666666667vw auto 0;
      }
      .card {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25.624999999999996vw;
        aspect-ratio: 328 / 237;
        border-radius: 3.125vw;
        background-color: #fff;
        @media (max-width: 768px) {
          width: 100%;
          aspect-ratio: unset;
          border-radius: 10.666666666666668vw;
          padding-block: 8.533333333333333vw;
        }
        .card-text {
          text-align: center;
          font-size: 1.875vw;
          font-weight: 700;
          line-height: 1.6666666;
          @media (max-width: 768px) {
            font-size: 5.333333333333334vw;
          }
          .-orange {
            color: var(--color-orange);
            background-image: linear-gradient(transparent calc(100% - 0.8593750000000001vw), rgba(247, 182, 0, 0.28) 0.8593750000000001vw);
            background-repeat: no-repeat;
            padding-inline: 0.3125vw;
            @media (max-width: 768px) {
              background-image: linear-gradient(transparent calc(100% - 2.4vw), rgba(247, 182, 0, 0.28) 2.4vw);
              padding-inline: 0.8vw;
            }
          }
        }
      }
    }
    .btn {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 53.515625vw;
      aspect-ratio: 685/94;
      margin: 3.671875vw auto 0;
      box-sizing: border-box;
      border-radius: 4.375vw;
      background-color: var(--color-orange);
      border: 2px solid var(--color-orange);
      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: 3.90625vw;
        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;
        rotate: 90deg;
        @media (max-width: 768px) {
          right: 8.266666666666666vw;
          width: 3.733333333333334vw;
          height: 3.733333333333334vw;
        }
      }
      
      @media (min-width: 769px) {
        &:hover {
          &::before {
            scale: 1;
          }
          .btn-text {
            color: var(--color-orange);
          }
          .arrow {
            background-color: var(--color-orange);
          }
        }
      }
    }
  }
  div[class*="deco"] {
    position: absolute;
  }
  .deco01 {
    top: -5.15625vw;
    right: 7.03125vw;
    width: 3.75vw;
    @media (max-width: 768px) {
      top: -7.466666666666668vw;
      right: 0;
      width: 7.199999999999999vw;
    }
  }
  .deco02 {
    top: 2.109375vw;
    right: 8.75vw;
    width: 4.6875vw;
    @media (max-width: 768px) {
      top: 2.933333333333333vw;
      right: 5.866666666666666vw;
      width: 9.066666666666666vw;
    }
  }
  .deco03 {
    top: 7.734375vw;
    right: 3.9843749999999996vw;
    width: 2.421875vw;
    @media (max-width: 768px) {
      top: 16vw;
      right: 1.3333333333333335vw;
      width: 4.8vw;
    }
  }
  .deco04 {
    top: 47.8125vw;
    right: 1.953125vw;
    width: 14.765624999999998vw;
    z-index: -1;
    @media (max-width: 768px) {
      top: 254.66666666666669vw;
      right: -8vw;
      width: 35.199999999999996vw;
    }
  }
  .deco05 {
    bottom: 0.78125vw;
    left: 4.0625vw;
    width: 5.78125vw;
    @media (max-width: 768px) {
      bottom: 66.66666666666666vw;
      left: -4.533333333333333vw;
      width: 14.399999999999999vw;
    }
  }
  .deco06 {
    top: 35.625vw;
    left: 4.296875vw;
    width: 11.5625vw;
    z-index: 2;
    @media (max-width: 768px) {
      top: 237.06666666666666vw;
      left: 0;
      width: 26.93333333333333vw;
    }
  }
  .deco07 {
    bottom: -0.625vw;
    right: 5.234375vw;
    width: 6.875000000000001vw;
    z-index: 2;
    @media (max-width: 768px) {
      bottom: 24vw;
      right: 2.933333333333333vw;
      width: 15.466666666666667vw;
    }
  }
}
/* ↑↑↑ intro ↑↑↑ */

/* ↓↓↓ work ↓↓↓ */
.work {
  position: relative;
  margin-top: 7.8125vw;
  padding-block: 12.421875vw 10.546875vw;
  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) {
    position: relative;
    margin-top: 11.733333333333333vw;
    padding-block: 21.6vw ;
    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 {
    .ttl {
      font-size: 2.5vw;
      font-weight: 700;
      text-align: center;
      line-height: 1;
      @media (max-width: 768px) {
        font-size: 5.866666666666666vw;
      }
    }
    .line {
      width: 14.21875vw;
      margin: 0 auto;
      rotate: 7deg;
      @media (max-width: 768px) {
        width: 34.13333333333333vw;
      }
    } 
  }
  .container {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 80.625vw;
    margin: 1.25vw auto 0;
    z-index: 1;
    @media (max-width: 768px) {
      flex-direction: column;
      width: 86.13333333333333vw;
      gap: 4.266666666666667vw;
      width: 86.13333333333333vw;
    }
    .card {
      width: 39.375vw;
      padding: 3.125vw;
      background-color: #F8F3ED;
      border-radius: 1.875vw;
      @media (max-width: 768px) {
        width: 100%;
        padding: 10.666666666666668vw;
        border-radius: 6.4vw;
      }
      .head {
        font-size: 2.03125vw;
        font-weight: 700;
        text-align: center;
        @media (max-width: 768px) {
          font-size: 5.866666666666666vw;
        }
        .-orange {
          color: var(--color-orange);
        }
      }
      .point-wrap {
        margin-top: 0.9375vw;
        @media (max-width: 768px) {
          margin-top: 4.266666666666667vw;
        }
        .point {
          position: relative;
          font-size: 1.5625vw;
          font-weight: 700;
          padding-left: 1.25vw;
          @media (max-width: 768px) {
            font-size: 4.266666666666667vw;
            padding-left: 3.4666666666666663vw;
          }
          &::after {
            content: '';
            position: absolute;
            top: 1.171875vw;
            left: 0;
            width: 0.390625vw;
            height: 0.390625vw;
            border-radius: 50%;
            background-color: var(--color-orange);
            @media (max-width: 768px) {
              top: 2.666666666666667vw;
              left: 0;
              width: 1.0666666666666667vw;
              height: 1.0666666666666667vw;
            }
          }
        }
      } 
    }
  }
  .image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1280 / 533;
    margin-top: -5.9375vw;
    @media (max-width: 768px) {
      aspect-ratio: 375 / 363;
      margin-top: -5.066666666666666vw;
    }
    .image01 {
      position: absolute;
      top: 10.3125vw;
      left: 4.296875vw;
      width: 32.421875vw;
      border-radius: 1.875vw;
      overflow: hidden;
      @media (max-width: 768px) {
        position: absolute;
        top: 19.733333333333334vw;
        left: 0vw;
        width: 45.33333333333333vw;
        border-radius: 6.4vw;
      }
    }
    .image02 {
      position: absolute;
      bottom: 0;
      right: 35.46875vw;
      width: 22.96875vw;
      border-radius: 1.875vw;
      overflow: hidden;
      @media (max-width: 768px) {
        bottom: 8.533333333333333vw;
        right: 9.6vw;
        width: 36.8vw;
        border-radius: 6.4vw;
      }
    }
    .image03 {
      position: absolute;
      top: 0;
      right: 0;
      width: 31.953125vw;
      border-radius: 1.875vw;
      overflow: hidden;
      @media (max-width: 768px) {
        top: 0;
        right: -3.2vw;
        width: 51.46666666666667vw;
        border-radius: 6.4vw;
      }
    }
    .attention {
      position: absolute;
      bottom: 7.8125vw;
      right: 1.25vw;
      font-size: 1.015625vw;
      font-weight: 700;
      @media (max-width: 768px) {
        bottom: 0;
        right: 4.8vw;
        font-size: 3.4666666666666663vw;
      }
    }
  }
  div[class*="deco"] {
    position: absolute;
  }
  .deco01 {
    top: 8.828125vw;
    left: 25.624999999999996vw;
    width: 3.75vw;
    @media (max-width: 768px) {
      top: -0.8vw;
      left: 8.799999999999999vw;
      width: 10.666666666666668vw;
    }
  }
  .deco02 {
    top: 13.671875vw;
    left: 31.71875vw;
    width: 2.421875vw;
    @media (max-width: 768px) {
      top: 12.8vw;
      left: 26.13333333333333vw;
      width: 6.933333333333333vw;
    }
  }
  .deco03 {
    top: 27.578124999999996vw;
    left: 1.09375vw;
    width: 14.765624999999998vw;
    @media (max-width: 768px) {
      top: 29.333333333333332vw;
      left: -4.8vw;
      width: 29.333333333333332vw;
    }
  }
  .deco04 {
    bottom: 10.546875vw;
    right: 10.546875vw;
    width: 5.78125vw;
    @media (max-width: 768px) {
      bottom: 41.333333333333336vw;
      right: -3.2vw;
      width: 14.399999999999999vw;
    }
  }
  .deco05 {
    top: 30.859375vw;
    right: 37.8125vw;
    width: 9.765625vw;
    rotate: -1deg;
    z-index: 2;
    @media (max-width: 768px) {
      top: unset;
      bottom: 17.066666666666666vw;
      right: unset;
      left: 14.666666666666666vw;
      width: 21.6vw;
    }
  }
  .deco06 {
    bottom: 0;
    left: 4.296875vw;
    width: 14.140625000000002vw;
    @media (max-width: 768px) {
      bottom: -10.666666666666668vw;
      left: unset;
      right: 5.6000000000000005vw;
      width: 29.86666666666667vw;
    }
  }
}
/* ↑↑↑ work ↑↑↑ */

/* ↓↓↓ one-day ↓↓↓ */
.one-day {
  position: relative;
  margin-top: 6.71875vw;
  overflow-x: clip;
  @media (max-width: 768px) {
    margin-top: 22.933333333333334vw;
  }
  .ttl-wrap {
    .ttl {
      font-size: 2.5vw;
      font-weight: 700;
      text-align: center;
      line-height: 1;
      @media (max-width: 768px) {
        font-size: 5.866666666666666vw;
      }
    }
    .line {
      width: 12.578125000000002vw;
      margin: 0 auto;
      rotate: 7deg;
      @media (max-width: 768px) {
        width: 29.333333333333332vw;
      }
    } 
  }
  .block {
    position: relative;
    width: 88.28125vw;
    padding: 4.375vw 3.8281250000000004vw;
    background-color: var(--color-orange);
    border-radius: 3.125vw;
    margin: 2.734375vw auto 0;
    z-index: 1;
    @media (max-width: 768px) {
      width: 86.13333333333333vw;
      padding: 10.666666666666668vw 6.4vw 6.4vw;
      border-radius: 10.666666666666668vw;
      margin: 7.199999999999999vw auto 0;
    }
    + .block {
      margin-top: 3.75vw;
      background-color: #F7B600;
      @media (max-width: 768px) {
        margin-top: 5.333333333333334vw;
      }
    }
    .head {
      font-size: 2.5vw;
      font-weight: 700;
      color: #fff;
      text-align: center;
      @media (max-width: 768px) {
        font-size: 5.866666666666666vw;
      }
    }
    .container {
      display: flex;
      gap: 1.875vw;
      @media (max-width: 768px) {
        flex-direction: column;
        gap: 4.266666666666667vw;
        margin-top: 0;
      }
      .card {
        width: 39.375vw;
        aspect-ratio: 504/362;
        padding-top: 3.4375000000000004vw;
        background-color: #fff;
        border-radius: 1.875vw;
        @media (max-width: 768px) {
          width: 100%;
          aspect-ratio: unset;
          padding-top: 8.533333333333333vw;
          border-radius: 6.4vw;
        }
        .card-head {
          font-size: 2.03125vw;
          font-weight: 700;
          text-align: center;
          @media (max-width: 768px) {
            font-size: 5.333333333333334vw;
          }
        }
        .list {
          height: 20.703125vw;
          margin: 1.875vw 1.40625vw 0 3.4375000000000004vw;
          &.data-simplebar {
            .item {
              &:last-of-type {
                padding-bottom: 2.34375vw;
              }
            }
          }
          @media (max-width: 768px) {
            height: fit-content;
            margin: 4.266666666666667vw 2.4vw 8.533333333333333vw 4.533333333333333vw;
            &.data-simplebar {
              height: 82.93333333333334vw;
              margin: 4.266666666666667vw 2.4vw 0 4.533333333333333vw;
              .item {
                &:last-of-type {
                  padding-bottom: 5.333333333333334vw;
                }
              }
            }
          }
          .item {
            display: flex;
            gap: 1.7968749999999998vw;
            align-items: center;
            padding-right: 5.46875vw;
            @media (max-width: 768px) {
              gap: 4.533333333333333vw;
              padding-right: 4.8vw;
              align-items: flex-start;
            }
            + .item {
              position: relative;
              margin-top: 1.484375vw;
              @media (max-width: 768px) {
                margin-top: 5.066666666666666vw;
              }
              .time {
                &::before {
                  content: '';
                  position: absolute;
                  translate: -50% 0;
                  top: -1.484375vw;
                  left: 50%;
                  width: 0.15625vw;
                  height: 1.484375vw;
                  background-color: #F8F3ED;
                  @media (max-width: 768px) {
                    top: -10.666666666666668vw;
                    width: 0.5333333333333333vw;
                    height: 10.666666666666668vw;
                  }
                }
              }
            }
            &:nth-of-type(2) {
              .time {
                &::before {
                  @media (max-width: 768px) {
                    top: -5.066666666666666vw;
                    height: 5.066666666666666vw;
                  }
                }
              }
            }
            .time {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 6.484375000000001vw;
              aspect-ratio: 83 / 35;
              font-size: 1.5625vw;
              font-weight: 700;
              color: var(--color-orange);
              background-color: #F8F3ED;
              border-radius: 1.875vw;
              position: relative;
              z-index: 1;
              @media (max-width: 768px) {
                width: 17.599999999999998vw;
                aspect-ratio: 66/28;
                font-size: 4.266666666666667vw;
                border-radius: 6.4rem;
              }
            }
            .text {
              flex: 1;
              font-size: 1.171875vw;
              font-weight: 700;
              @media (max-width: 768px) {
                font-size: 4vw;
              }
            }
          }
          .simplebar-vertical {
            width: 0.234375vw;
            height: calc(100% - 2.34375vw);
            border-radius: 10px;
            background-color: #D5D5D5;
            @media (max-width: 768px) {
              height: calc(100% - 6.933333333333333vw);
              width: 0.8vw;
            }
            .simplebar-scrollbar {
              min-width: 100%;
              width: 100%;
              background-color: var(--color-orange);
              border-radius: 10px;
              &::before {
                display: none;
              }
            }
          }
        }
      }
    }
  }
  .splide.js-slider01 {
    position: relative;
    margin-top: 7.968749999999999vw;
    z-index: 1;
    visibility: visible;
    @media (max-width: 768px) {
      width: 100%;
      margin-top: 18.666666666666668vw;
    }
    .image-wrap {
      position: relative;
      display: flex;
      justify-content: space-between;
      z-index: 1;
      @media (max-width: 768px) {
        width: 203.73333333333332vw;
      }
      .splide__slide {
        width: 23.828125vw;
        height: fit-content;
        border-radius: 1.875vw;
        overflow: hidden;
        @media (max-width: 768px) {
          width: 48.53333333333333vw;
          border-radius: 6.4vw;
        }
        &:nth-of-type(2n) {
          margin-top: 4.84375vw;
          @media (max-width: 768px) {
            margin-top: 10.133333333333333vw;
          }
        }
        .image {
          width: 100%;
        }
      }
    }
  }
  .splide.js-slider02 {
    margin-top: -1.40625vw;
    @media (max-width: 768px) {
      margin-top: -2.4vw;
    }
    .splide__slide {
      width: 42.109375vw;
      @media (max-width: 768px) {
        width: 107.46666666666667vw;
      }
      .image {
        width: 100%;
      }
    }
  }
  div[class*="deco"] {
    position: absolute;
  }
  .deco01 {
    top: -2.265625vw;
    left: 28.749999999999996vw;
    width: 4.6875vw;
    z-index: 2;
    @media (max-width: 768px) {
      top: -12vw;
      left: 12.8vw;
      width: 11.466666666666667vw;
    }
  }
  .deco02 {
    top: 5.46875vw;
    left: 25.234374999999996vw;
    width: 3.671875vw;
    z-index: 2;
    @media (max-width: 768px) {
      top: 6.4vw;
      left: 4vw;
      width: 9.066666666666666vw;
    }
  }
  .deco03 {
    top: 10.234375vw;
    left: 31.71875vw;
    width: 2.421875vw;
    z-index: 2;
    @media (max-width: 768px) {
      top: 18.4vw;
      left: 20vw;
      width: 5.866666666666666vw;
    }
  }
  .deco04 {
    top: -5.78125vw;
    right: 15.937499999999998vw;
    width: 12.578125000000002vw;
    @media (max-width: 768px) {
      top: -7.466666666666668vw;
      right: -6.4vw;
      width: 32vw;
    }
  }
  .deco05 {
    bottom: 32.8125vw;
    left: 1.40625vw;
    width: 9.6875vw;
    @media (max-width: 768px) {
      bottom: 71.73333333333333vw;
      left: 1.6vw;
      width: 21.866666666666667vw;
    }
  }
  .deco06 {
    bottom: 30.078125vw;
    right: 8.75vw;
    width: 3.671875vw;
    @media (max-width: 768px) {
      bottom: 66.66666666666666vw;
      right: 6.933333333333333vw;
      width: 10.133333333333333vw;
    }
  }
  .deco07 {
    bottom: 26.171875vw;
    right: 13.90625vw;
    width: 2.421875vw;
    @media (max-width: 768px) {
      bottom: 56.00000000000001vw;
      right: 21.6vw;
      width: 6.666666666666667vw;
    }
  }
  .deco08 {
    top: 34.375vw;
    right: 1.640625vw;
    width: 8.75vw;
    z-index: 2;
    @media (max-width: 768px) {
      top: 172vw;
      right: 5.6000000000000005vw;
      width: 16.53333333333333vw;
    }
  }
  .deco09 {
    bottom: -1.875vw;
    right: 23.203125vw;
    width: 16.015625vw;
    z-index: 2;
    @media (max-width: 768px) {
      bottom: -3.733333333333334vw;
      right: 0;
      width: 35.733333333333334vw;
    }
  }
}
/* ↑↑↑ one-day ↑↑↑ */

/* ↓↓↓ benefit ↓↓↓ */
.benefit {
  position: relative;
  margin-top: 9.375vw;
  @media (max-width: 768px) {
    margin-top: 19.466666666666665vw;
  }
  .ttl-wrap {
    .ttl {
      font-size: 2.5vw;
      font-weight: 700;
      text-align: center;
      line-height: 1;
      @media (max-width: 768px) {
        font-size: 5.866666666666666vw;
      }
    }
    .line {
      width: 25.390625vw;
      margin: 0 auto;
      rotate: 3deg;
      @media (max-width: 768px) {
        width: 62.4vw;
      }
    } 
  }
  .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: 86.13333333333333vw;
      margin: 6.4vw 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: 30.666666666666664vw;
          font-size: 4vw;
          padding-bottom: 1.6vw;
        }
      }
      .detail {
        flex: 1;
        font-size: 1.171875vw;
        font-weight: 700;
        padding: 0 0 1.7187500000000002vw 3.75vw;
        border-bottom: 1px solid #EDDBC6;
        line-height: 2.13333;
        @media (max-width: 768px) {
          width: 100%;
          font-size: 4vw;
          padding: 0 0 4.266666666666667vw 0;
          line-height: 1.733333;
        }
      }
    }
  }
  .btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 53.515625vw;
    aspect-ratio: 685/94;
    margin: 3.671875vw auto 0;
    box-sizing: border-box;
    border-radius: 4.375vw;
    background-color: var(--color-orange);
    border: 2px solid var(--color-orange);
    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: 3.90625vw;
      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;
      rotate: 90deg;
      @media (max-width: 768px) {
        right: 8.266666666666666vw;
        width: 3.733333333333334vw;
        height: 3.733333333333334vw;
      }
    }
    
    @media (min-width: 769px) {
      &:hover {
        &::before {
          scale: 1;
        }
        .btn-text {
          color: var(--color-orange);
        }
        .arrow {
          background-color: var(--color-orange);
        }
      }
    }
  }
  div[class*="deco"] {
    position: absolute;
  }
  .deco01 {
    top: 0;
    left: 11.40625vw;
    width: 3.671875vw;
    @media (max-width: 768px) {
      top: -9.066666666666666vw;
      left: 5.866666666666666vw;
      width: 8vw;
    }
  }
  .deco02 {
    top: 7.34375vw;
    left: 8.671875vw;
    width: 4.6875vw;
    @media (max-width: 768px) {
      top: 6.4vw;
      left: 0;
      width: 10.133333333333333vw;
    }
  }
  .deco03 {
    top: 12.890625vw;
    left: 15.703125000000002vw;
    width: 2.421875vw;
    z-index: 1;
    @media (max-width: 768px) {
      top: 18.666666666666668vw;
      left: 15.466666666666667vw;
      width: 5.333333333333334vw;
    }
  }
  .deco04 {
    bottom: 14.0625vw;
    left: -1.5625vw;
    width: 12.578125000000002vw;
    @media (max-width: 768px) {
      bottom: 78.13333333333333vw;
      left: -4.533333333333333vw;
      width: 28vw;
    }
  }
  .deco05 {
    bottom: 6.875000000000001vw;
    right: 11.640625vw;
    width: 17.03125vw;
    z-index: 1;
    @media (max-width: 768px) {
      bottom: 24.8vw;
      right: 0;
      width: 36.53333333333333vw;
    }
  }
}
/* ↑↑↑ benefit ↑↑↑ */

/* ↓↓↓ flow ↓↓↓ */
.flow {
  position: relative;
  margin-top: 6.796874999999999vw;
  padding-block: 11.71875vw 15.234375vw;
  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) {
    position: relative;
    margin-top: 13.866666666666665vw;
    padding-block: 22.933333333333334vw 26.666666666666668vw;
    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 {
    .ttl {
      font-size: 2.5vw;
      font-weight: 700;
      text-align: center;
      line-height: 1;
      @media (max-width: 768px) {
        font-size: 5.866666666666666vw;
      }
    }
    .line {
      width: 22.265625vw;
      margin: 0 auto;
      rotate: 3deg;
      @media (max-width: 768px) {
        width: 52.53333333333333vw;
      }
    } 
  }
  .content {
    position: relative;
    width: 66.875vw;
    margin: 4.375vw auto 0;
    @media (max-width: 768px) {
      width: 86.13333333333333vw;
      margin: 6.933333333333333vw auto 0;
    }
    &::after {
      content: '';
      position: absolute;
      top: 6.71875vw;
      left: 4.453125vw;
      width: 0.15625vw;
      height: 34.6875vw;
      background: url(../img/homarenoie-chubu/flow-line-deco.svg) repeat-y;
      @media (max-width: 768px) {
        top: 15.733333333333333vw;
        left: 9.866666666666667vw;
        width: 0.5333333333333333vw;
        height: 135.20000000000002vw;
      }
    }
    .item {
      display: flex;
      gap: 2.1875vw;
      border-radius: 1.875vw;
      padding: 2.34375vw 3.359375vw 2.34375vw 2.34375vw;
      background-color: #F8F3ED;
      @media (max-width: 768px) {
        gap: 4.266666666666667vw;
        border-radius: 6.4vw;
        padding: 6.4vw 8.533333333333333vw 6.4vw 4.266666666666667vw;
      }

      +.item {
        margin-top: 1.875vw;
        @media (max-width: 768px) {
          margin-top: 4.266666666666667vw;
        }
      }
      .num {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 4.21875vw;
        height: min-content;
        aspect-ratio: 1/1;
        background-color: var(--color-orange);
        border-radius: 50%;
        margin-top: 0.625vw;
        z-index: 2;
        @media (max-width: 768px) {
          width: 11.200000000000001vw;
          margin: 0;
        }
        span {
          font-size: 1.875vw;
          font-weight: 700;
          color: #fff;
          line-height: 1;
          @media (max-width: 768px) {
            font-size: 5.333333333333334vw;
          }
        }
      }
      .text-wrap {
        flex: 1;
        .head {
          font-size: 1.875vw;
          font-weight: 700;
          color: var(--color-orange);
          line-height: 1;
          @media (max-width: 768px) {
            line-height: 1.6;
            font-size: 5.333333333333334vw;
          }
        }
        .text {
          font-size: 1.171875vw;
          font-weight: 700;
          margin-top: 0.9375vw;
          line-height: 2.1333333;
          @media (max-width: 768px) {
            font-size: 4vw;
            margin-top: 3.2vw;
          }
        }
      }
    }
  }
  div[class*="deco"] {
    position: absolute;
  }
  .deco01 {
    top: 1.40625vw;
    right: 8.671875vw;
    width: 6.640625vw;
    @media (max-width: 768px) {
      top: -9.6vw;
      right: 10.666666666666668vw;
      width: 15.733333333333333vw;
    }
  }
  .deco02 {
    top: 29.531249999999996vw;
    right: 7.421875vw;
    width: 4.6875vw;
    @media (max-width: 768px) {
      top: 74.66666666666667vw;
      right: 0vw;
      width: 9.6vw;
      z-index: 1;
    }
  }
  .deco03 {
    top: 36.328125vw;
    right: 13.515625vw;
    width: 3.671875vw;
    z-index: 1;
    @media (max-width: 768px) {
      top: 88.8vw;
      right: 12.8vw;
      width: 7.466666666666668vw;
    }
  }
  .deco04 {
    top: 42.109375vw;
    right: 8.671875vw;
    width: 2.421875vw;
    @media (max-width: 768px) {
      top: 100.8vw;
      right: 2.666666666666667vw;
      width: 4.8vw;
    }
  }
  .deco05 {
    bottom: 9.921875vw;
    left: 6.406249999999999vw;
    width: 13.984374999999998vw;
    @media (max-width: 768px) {
      bottom: 13.333333333333334vw;
      left: -2.666666666666667vw;
      width: 28.799999999999997vw;
    }
  }
  .deco06 {
    bottom: 12.34375vw;
    right: 10.15625vw;
    width: 12.734375vw;
    z-index: 1;
    @media (max-width: 768px) {
      bottom: 12.8vw;
      right: 2.666666666666667vw;
      width: 29.333333333333332vw;
    }
  }
}
/* ↑↑↑ flow ↑↑↑ */

/* ↓↓↓ faq ↓↓↓ */
.faq {
  position: relative;
  margin-top: 6.09375vw;
  overflow-x: clip;
  @media (max-width: 768px) {
    margin-top: 14.133333333333335vw;
  }
  .ttl-wrap {
    .ttl {
      font-size: 2.5vw;
      font-weight: 700;
      text-align: center;
      line-height: 1;
      @media (max-width: 768px) {
        font-size: 5.866666666666666vw;
      }
    }
    .line {
      width: 20vw;
      margin: 0 auto;
      rotate: 3deg;
      @media (max-width: 768px) {
        width: 44vw;
      }
    } 
  }
  .list {
    position: relative;
    width: 66.875vw;
    margin: 4.375vw auto 0;
    z-index: 1;
    @media (max-width: 768px) {
      width: 86.13333333333333vw;
      margin: 6.933333333333333vw auto 0;
    }
    .item {
      padding: 2.5vw 3.28125vw 3.125vw;
      border-radius: 1.875vw;
      background-color: #fff;
      @media (max-width: 768px) {
        padding: 6.4vw 4.266666666666667vw 8.533333333333333vw;
        border-radius: 6.4vw;
      }
      + .item {
        margin-top: 1.25vw;
        @media (max-width: 768px) {
          margin-top: 4.266666666666667vw;
        }
      }
      .question {
        font-size: 1.5625vw;
        font-weight: 700;
        @media (max-width: 768px) {
          font-size: 4.8vw;
          padding-left: 1.7em;
          text-indent: -1.7em;
        }
        .icon {
          color: var(--color-orange);
          padding-right: 1.25vw;
          @media (max-width: 768px) {
            font-size: 5.333333333333334vw;
            padding-right: 2.1333333333333333vw;
          }
        }
        .-orange {
          color: var(--color-orange);
        } 
      }
      .answer {
        position: relative;
        margin-top: 1.25vw;
        padding-top: 1.25vw;
        @media (max-width: 768px) {
          margin-top: 4.266666666666667vw;
          padding-top: 4.266666666666667vw;
        }
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 0.078125vw;
          background: url(../img/homarenoie-chubu/faq-line-deco.svg) repeat-x;
          @media (max-width: 768px) {
            height: 0.26666666666666666vw;
          }
        }
        .text {
          font-size: 1.171875vw;
          font-weight: 700;
          line-height: 2.133333;
          text-align: justify;
          word-break: break-all;
          @media (max-width: 768px) {
            font-size: 4vw;
          }
        }
      }
    }
  }
  div[class*="deco"] {
    position: absolute;
  }
  .deco01 {
    top: 1.5625vw;
    left: 11.953125vw;
    width: 3.671875vw;
    @media (max-width: 768px) {
      top: -11.733333333333333vw;
      left: 15.733333333333333vw;
      width: 9.6vw;
    }
  }
  .deco02 {
    top: 6.71875vw;
    left: 8.046875vw;
    width: 2.421875vw;
    @media (max-width: 768px) {
      top: 1.6vw;
      left: 5.333333333333334vw;
      width: 6.4vw;
    }
  }
  .deco03 {
    top: -1.5625vw;
    right: 7.34375vw;
    width: 13.984374999999998vw;
    @media (max-width: 768px) {
      top: 5.6000000000000005vw;
      right: -6.666666666666667vw;
      width: 32vw;
    }
  }
  .deco04 {
    bottom: 23.75vw;
    left: 2.890625vw;
    width: 6.71875vw;
    @media (max-width: 768px) {
      bottom: 193.06666666666666vw;
      left: -2.933333333333333vw;
      width: 16vw;
    }
  }
  .deco05 {
    bottom: -3.515625vw;
    right: 9.921875vw;
    width: 9.609375vw;
    z-index: 2;
    @media (max-width: 768px) {
      bottom: -24.8vw;
      right: 2.666666666666667vw;
      width: 21.333333333333336vw;
    }
  }
}
/* ↑↑↑ faq ↑↑↑ */

/* ↓↓↓ overview ↓↓↓ */
.overview {
  position: relative;
  margin-top: 9.375vw;
  @media (max-width: 768px) {
    margin-top: 23.733333333333334vw;
  }
  .ttl-wrap {
    .ttl {
      font-size: 2.5vw;
      font-weight: 700;
      text-align: center;
      line-height: 1;
      @media (max-width: 768px) {
        font-size: 5.866666666666666vw;
      }
    }
    .line {
      width: 14.765624999999998vw;
      margin: 0 auto;
      rotate: 7deg;
      @media (max-width: 768px) {
        width: 42.13333333333333vw;
      }
    } 
  }
  .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: 86.13333333333333vw;
      margin: 6.4vw 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);
        letter-spacing: 0.03em;
        @media (max-width: 768px) {
          width: fit-content;
          min-width: 30.666666666666664vw;
          font-size: 4vw;
          padding-bottom: 1.6vw;
        }
      }
      .detail {
        display: flex;
        align-items: center;
        flex: 1;
        font-size: 1.171875vw;
        font-weight: 700;
        padding: 0 0 1.7187500000000002vw 3.75vw;
        border-bottom: 1px solid #EDDBC6;
        line-height: 2.13333;
        @media (max-width: 768px) {
          display: initial;
          width: 100%;
          font-size: 4vw;
          padding: 0 0 4.266666666666667vw 0;
          line-height: 1.733333;
        }
        a {
          color: var(--color-orange);
          text-decoration-line: underline;
          text-decoration-style: solid;
          text-decoration-color: var(--color-orange);
          transition: opacity 300ms ease;
          @media (min-width: 769px) {
            &:hover {
              opacity: 0.7;
            }
          }
        }
      }
    }
  }
  div[class*="deco"] {
    position: absolute;
  }
  .deco01 {
    top: 0;
    left: 8.046875vw;
    width: 13.984374999999998vw;
    @media (max-width: 768px) {
      top: -6.4vw;
      left: -5.6000000000000005vw;
      width: 32.53333333333333vw;
    }
  }
  .deco02 {
    top: 12.109375vw;
    right: 11.5625vw;
    width: 3.671875vw;
    @media (max-width: 768px) {
      top: 14.133333333333335vw;
      right: 7.466666666666668vw;
      width: 9.333333333333334vw;
    }
  }
  .deco03 {
    top: 19.375vw;
    right: 13.359375000000002vw;
    width: 4.6875vw;
    z-index: 1;
    @media (max-width: 768px) {
      top: 32.266666666666666vw;
      right: 12vw;
      width: 12vw;
    }
  }
  .deco04 {
    top: 25vw;
    right: 8.59375vw;
    width: 2.421875vw;
    @media (max-width: 768px) {
      top: 128.26666666666665vw;
      right: 0;
      width: 6.133333333333333vw;
    }
  }
  .deco05 {
    bottom: 10.78125vw;
    right: 3.9843749999999996vw;
    width: 6.640625vw;
    @media (max-width: 768px) {
      bottom: 87.46666666666667vw;
      right: 1.3333333333333335vw;
      width: 16vw;
    }
  }
  .deco06 {
    bottom: -4.296875vw;
    left: 7.421875vw;
    width: 14.21875vw;
    z-index: 1;
    @media (max-width: 768px) {
      bottom: -26.13333333333333vw;
      left: -1.866666666666667vw;
      width: 30.4vw;
    }
  }
}
/* ↑↑↑ benefit ↑↑↑ */

/* ↓↓↓ access ↓↓↓ */
.access {
  position: relative;
  margin-top: 9.375vw;
  z-index: 1;
  overflow-x: clip;
  @media (max-width: 768px) {
    margin-top: 20.266666666666666vw;
  }
  .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;
      }
    }
  }
  .address {
    font-size: 1.171875vw;
    font-weight: 700;
    margin-block: 2.5vw;
    text-align: center;
    @media (max-width: 768px) {
      font-size: 4vw;
      margin-block: 8vw 4.266666666666667vw;
    }
  }
  .map-wrap {
    width: 66.875vw;
    aspect-ratio: 856 / 486;
    border: 0.390625vw solid #fff;
    border-radius: 1.875vw;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 auto;
    @media (max-width: 768px) {
      width: 88.53333333333333vw;
      aspect-ratio: 332 / 282;
      border: 0.8vw;
      border-radius: 6.4vw;
    }
    iframe {
      width: 100%;
      height: 100%;
    }
  }
  div[class*="deco"] {
    position: absolute;
  }
  .deco01 {
    top: 24.609375vw;
    left: 8.828125vw;
    width: 3.671875vw;
    @media (max-width: 768px) {
      top: -8vw;
      left: unset;
      right: 6.4vw;
      width: 8.799999999999999vw;
    }
  }
  .deco02 {
    top: 29.843750000000004vw;
    left: 4.921875vw;
    width: 2.421875vw;
    @media (max-width: 768px) {
      top: 4.533333333333333vw;
      left: unset;
      right: 18.666666666666668vw;
      width: 5.6000000000000005vw;
    }
  }
  .deco03 {
    top: 21.40625vw;
    right: 4.0625vw;
    width: 13.984374999999998vw;
    z-index: -1;
    @media (max-width: 768px) {
      top: unset;
      bottom: -16.8vw;
      right: -4.533333333333333vw;
      width: 38.93333333333333vw;
    }
  }
}
/* ↑↑↑ access ↑↑↑ */

/* ↓↓↓ contact ↓↓↓ */
.contact {
  position: relative;
  margin-top: 9.375vw;
  z-index: 1;
  @media (max-width: 768px) {
    margin-top: 24vw;
  }
  .ttl-wrap {
    .ttl {
      font-size: 2.5vw;
      font-weight: 700;
      text-align: center;
      line-height: 1;
      @media (max-width: 768px) {
        font-size: 5.866666666666666vw;
      }
    }
    .line {
      width: 14.765624999999998vw;
      margin: 0 auto;
      rotate: 7deg;
      @media (max-width: 768px) {
        width: 42.13333333333333vw;
      }
    } 
  }
  .container {
    display: flex;
    justify-content: space-between;
    width: 66.875vw;
    margin: 1.875vw auto 0;
    @media (max-width: 768px) {
      flex-direction: column;
      width: 83.46666666666667vw;
      margin: 6.4vw auto 0;
      gap: 4.266666666666667vw;
    }
    .card {
      display: flex;
      gap: 1.5625vw;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 32.5vw;
      aspect-ratio: 416 / 160;
      border: 0.234375vw solid var(--color-orange);
      border-radius: 1.875vw;
      box-sizing: border-box;
      background-color: var(--color-orange);
      overflow: hidden;
      @media (max-width: 768px) {
        width: 100%;
        aspect-ratio: 313 / 120;
        border-radius: 6.4vw;
        gap: 5.333333333333334vw;
      }
      &::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: 3.28125vw;
        aspect-ratio: 42/40;
        @media (max-width: 768px) {
          width: 8.533333333333333vw;
        }
        &::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.8125vw;
        font-weight: 700;
        color: #fff;
        transition: color 300ms ease;
        z-index: 1;
        @media (max-width: 768px) {
          font-size: 6.933333333333333vw;
        }
      }
      &:nth-of-type(2) {
        .icon {
          width: 3.2031249999999996vw;
          aspect-ratio: 41 / 30;
          @media (max-width: 768px) {
            width: 8.266666666666666vw;
          }
          &::before {
            mask-image: url(../img/common/contact-icon02.svg);
          }
        }
        .text {
          font-size: 2.03125vw;
          @media (max-width: 768px) {
            font-size: 5.333333333333334vw;
          }
        }
      }
      @media (min-width: 769px) {
        &:hover {
          &::before {
            scale: 1.1;
          }
          .icon {
            &::before {
              background-color: var(--color-orange);
            }
          }
          .text {
            color: var(--color-orange);  
          }
        }
      }
    }
  }
  div[class*="deco"] {
    position: absolute;
  }
  .deco01 {
    top: -0.78125vw;
    left: 11.40625vw;
    width: 6.71875vw;
    @media (max-width: 768px) {
      top: -5.333333333333334vw;
      left: 3.733333333333334vw;
      width: 17.066666666666666vw;
    }
  }
  .deco02 {
    top: -3.515625vw;
    right: 5.46875vw;
    width: 8.984375vw;
    @media (max-width: 768px) {
      top: -18.666666666666668vw;
      right: 8.533333333333333vw;
      width: 17.866666666666667vw;
    }
  } 
}
/* ↑↑↑ contact ↑↑↑ */

/* ↓↓↓ sns ↓↓↓ */
.sns {
  position: relative;
  margin-block: 9.375vw 10.234375vw;
  @media (max-width: 768px) {
    margin-block: 21.333333333333336vw 12.533333333333333vw;
  }
  .ttl-wrap {
    .ttl {
      font-size: 2.5vw;
      font-weight: 700;
      text-align: center;
      line-height: 1;
      @media (max-width: 768px) {
        font-size: 5.866666666666666vw;
      }
    }
    .line {
      width: 8.203125vw;
      margin: 0 auto;
      rotate: 10deg;
      @media (max-width: 768px) {
        width: 19.466666666666665vw;
      }
    } 
  }
  .container {
    display: flex;
    gap: 1.875vw;
    justify-content: center;
    margin: 2.5vw auto 0;
    @media (max-width: 768px) {
      gap: 4.266666666666667vw;
      margin: 6.4vw auto 0;
    }
    .icon {
      width: 11.5625vw;
      @media (max-width: 768px) {
        width: 28.799999999999997vw;
      }
    }
  }
  div[class*="deco"] {
    position: absolute;
  }
  .deco01 {
    top: -1.171875vw;
    left: 10.703125vw;
    width: 13.984374999999998vw;
    @media (max-width: 768px) {
      top: -17.866666666666667vw;
      left: -9.066666666666666vw;
      width: 30.4vw;
    }
  }
  .deco02 {
    top: -3.4375000000000004vw;
    right: 11.5625vw;
    width: 4.6875vw;
    @media (max-width: 768px) {
      top: -13.866666666666665vw;
      right: 2.666666666666667vw;
      width: 11.200000000000001vw;
    }
  }
  .deco03 {
    top: 3.4375000000000004vw;
    right: 17.734375vw;
    width: 3.671875vw;
    @media (max-width: 768px) {
      top: 2.1333333333333333vw;
      right: 17.333333333333336vw;
      width: 8.799999999999999vw;
    }
  }
  .deco04 {
    top: 9.140625vw;
    right: 12.890625vw;
    width: 2.421875vw;
    @media (max-width: 768px) {
      top: 16vw;
      right: 5.866666666666666vw;
      width: 5.6000000000000005vw;
    }
  }
  .deco05 {
    top: 1.015625vw;
    left: 17.65625vw;
    width: 14.0625vw;
    @media (max-width: 768px) {
      top: -10.666666666666668vw;
      left: 8vw;
      width: 26.666666666666668vw;
    }
  }
}
/* ↑↑↑ sns ↑↑↑ */