@charset "UTF-8";

  /* 初期読み込み-------------------------------------------------------------- */
  html,
  body,
  .lp_wrap * {
    margin: 0;
    padding: 0;
    outline: none;
  }

  body {
    background-image: url('https://growcal.jp/sales/img/background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }

  .lp_wrap {
    max-width: 750px;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 0 8px gray;
  }

  .bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .lp_wrap section {
    position: relative;
  }

  .lp_wrap img {
    display: inline-block;
    width: 100%;
    height: auto;
    vertical-align: top;
  }

  /* slick */
  .lp_wrap .slider {
    display: none;
  }

  .lp_wrap .slider.slick-initialized {
    display: block;
  }

  .lp_wrap .slider .slick-arrow {
    cursor: pointer;
  }

  .lp_wrap .slider .slick-list {
    cursor: grab;
  }

  .lp_wrap .slider .slick-list:active {
    cursor: grabbing;
  }

  .lp_wrap .slider .slick-dots li * {
    display: none;
  }

  /* worries-------------------------------------------------------------- */
  /* 見出し */
  .lp_wrap .worries .text {
    position: absolute;
    width: 79.6%;
    inset: 5% auto auto 7.7%;
  }

  .lp_wrap .worries .text img {
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
  }

  .lp_wrap .worries .text img.active {
    opacity: 1;
    transform: translateY(0);
  }

  /* 吹き出し */
  .lp_wrap .worries .hukidasi {
    position: absolute;
    inset: 0;
  }

  .lp_wrap .worries .hukidasi img {
    position: absolute;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    filter: blur(4px);
    transition: opacity .8s ease,
      transform .8s ease,
      filter .8s ease;
  }

  .lp_wrap .worries .hukidasi img.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  .lp_wrap .worries .hukidasi img:nth-of-type(1) {
    width: 60.8%;
    inset: 21.8% auto auto 4.5%;
  }

  .lp_wrap .worries .hukidasi img:nth-of-type(2) {
    width: 55.3%;
    inset: 34.5% auto auto 39.5%;
  }

  .lp_wrap .worries .hukidasi img:nth-of-type(3) {
    width: 60%;
    inset: 46.3% auto auto 10.4%;
  }

  .lp_wrap .worries .hukidasi img:nth-of-type(4) {
    width: 67.2%;
    inset: 62.5% auto auto 21.2%;
  }

  .lp_wrap .worries .hukidasi img:nth-of-type(5) {
    width: 66.4%;
    inset: 77.2% auto auto 3.5%;
  }

  /* cta-------------------------------------------------------------- */
  .lp_wrap .cta .btn {
    position: absolute;
    width: 75.2%;
    top: 74.1%;
    left: 50%;
    transform: translateX(-50%)
  }

  .lp_wrap .cta .btn {
    display: inline-block;
  }

  .lp_wrap .cta .btn img {
    display: block;
    width: 100%;
    height: auto;
  }

  .lp_wrap .cta .btn .arrow {
    position: absolute;
    right: 18%;
    top: 53.8%;
    transform: translateY(-50%);
    transition: transform .3s ease;
  }

  .lp_wrap .cta .btn .arrow svg {
    width: clamp(14px, 4vw, 30px);
    height: auto;
  }

  .lp_wrap .cta .btn .arrow path {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
  }

  @media (hover: hover) {
    .lp_wrap .cta .btn:hover .arrow {
      transform: translate(10px, -50%);
    }
  }

  /* voice-------------------------------------------------------------- */
  .lp_wrap .voice .card {
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    margin-bottom: 10%;
  }

  .lp_wrap .voice .card-item {
    width: 83.7%;
    margin-top: 24px;
    border-radius: 31px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
  }

  /* flow-------------------------------------------------------------- */
  .lp_wrap .flow .step_wrap {
    position: absolute;
    top: 19.5%;
    left: 0;
    width: 100%;
  }

  .lp_wrap .flow .step_wrap .slick-slide {
    margin-right: clamp(1px, 7.73vw, 58px);
  }

  .lp_wrap .flow .step_wrap .slick-slide img {
    width: clamp(1px, 72.8vw, 546px);
  }

  .lp_wrap .flow .step_wrap .slick-list {
    padding-left: 7.7%;
    overflow: visible;
  }

  .lp_wrap .flow .step_wrap .slick-arrow {
    position: absolute;
    bottom: -12%;
    z-index: 1;
    width: 8%;
  }

  .lp_wrap .flow .step_wrap .slick-arrow.prev {
    left: 50%;
    transform: translateX(-330%);
  }

  .lp_wrap .flow .step_wrap .slick-arrow.next {
    right: 50%;
    transform: translateX(330%);
  }

  .lp_wrap .flow .step_wrap .slick-dots {
    bottom: -9.5%;
    display: flex;
    justify-content: center;
    height: 2.215%;
  }

  .lp_wrap .flow .step_wrap .slick-dots li {
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    margin: 0% 2.6%;
    border-radius: 50%;
    opacity: 0.1;
    transition: 0.4s;
  }

  .lp_wrap .flow .step_wrap .slick-dots li {
    background-color: #1d1d1f;
  }

  .lp_wrap .flow .step_wrap .slick-dots li.slick-active {
    opacity: 1;
  }