/* ============================================================
// HOME
============================================================ */
.p-home-service {
  @media screen and (max-width: 782px) {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--preset--spacing--40);
  }

  & a {
    transition: .35s;

    &:hover {
      & img {
        transform: scale(1.1);
      }

      & .__btn {
        background-color: var(--wp--preset--color--secondary) !important;
      }
    }
  }

  & .__item {
    overflow: hidden;
    text-align: center;
  }

  & .__img {
    overflow: hidden;
  }

  & .__img img {
    transition: .5s;
  }

  & .__btn {
    transition: .35s;
    display: inline-block;
  }

  & .__head {
    @media screen and (max-width: 782px) {
      font-size: var(--wp--preset--font-size--xs-2) !important;
    }
  }

  & .__btn {
    @media screen and (max-width: 782px) {
      font-size: var(--wp--preset--font-size--xs-3) !important;
    }
  }
}

.p-home-case {
  @media screen and (max-width: 782px) {
    max-width: 320px;
  }

  @media screen and (min-width: 783px) {
    max-width: 400px;
  }

  & .__img-wrap {
    position: relative;
    overflow: hidden;
  }

  & .__icon {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
  }
}

#js-case {
  & .splide__list {
    flex-wrap: nowrap;
  }

  & .splide__arrows {
    position: absolute;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    left: 50%;
    transform: translateX(-50%);

    @media screen and (max-width: 782px) {
      bottom: -88px;
      width: 200px;
    }

    @media screen and (min-width: 783px) {
      bottom: -130px;
      width: 250px;
    }
  }

  & .splide__arrow {
    position: static;
    background: var(--wp--preset--color--base);
    opacity: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 9999px;
    transition: .25s;

    @media screen and (max-width: 782px) {
      width: 40px;
      height: 40px;
    }

    @media screen and (min-width: 783px) {
      width: 50px;
      height: 50px;
    }

    &:hover {
      opacity: .7;
    }

    & svg {
      fill: var(--wp--preset--color--primary);

      @media screen and (max-width: 782px) {
        width: 16px;
        height: 16px;
      }

      @media screen and (min-width: 783px) {
        width: 20px;
        height: 20px;
      }
    }
  }
}

.p-home-case-counter {
  text-align: center;
  font-weight: bold;
  color: var(--wp--preset--color--base);

  @media screen and (max-width: 782px) {
    margin-top: 30px;
    font-size: 18px;
  }

  @media screen and (min-width: 783px) {
    margin-top: 60px;
    font-size: 22px;

  }
}

.p-home-faq {
  & .__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 1.8em;
    min-width: 1.8em;
    height: 1.8em;
    min-height: 1.8em;
  }
}

.p-home-area {
  & .__head {
    position: relative;
    border-bottom: 1px solid var(--wp--preset--color--gray);

    &::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 20%;
      height: 1px;
      background-color: var(--wp--preset--color--primary);
    }
  }
}

/* ============================================================
// PRICE
============================================================ */
.p-price-anchor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  @media screen and (max-width: 1024px) {
    gap: 4px;
  }

  @media screen and (min-width: 783px) {
    gap: var(--wp--preset--spacing--40);
    
  }

  & .__link {
    position: relative;
    align-items: center;
    justify-content: center;
    transition: .35s;
    border-radius: 8px;

    @media screen and (max-width: 782px) {
      width: calc((100% - 12px) / 3);
    }

    @media screen and (min-width: 783px) {
      width: calc((100% - 80px) / 5);

      &:hover {
        color: var(--wp--preset--color--base);

        &::before {
          border-top-color: var(--wp--preset--color--base);
        }
      }
    }

    &::before {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      transition: border-top-color 0.3s ease;
      border: 4px solid transparent;
      border-top: 4px solid var(--wp--preset--color--primary);

      @media screen and (max-width: 782px) {
        bottom: 6px;
      }

      @media screen and (min-width: 783px) {
        bottom: 10px;
      }
    }
  }

  & .__img {
    max-width: 123px;
  }

  & .__txt {
    @media screen and (max-width: 1024px) {
      font-size: var(--wp--preset--font-size--xs-3);
      margin-top: var(--wp--preset--spacing--10) !important;
    }
  }
}

/* ============================================================
// CONTACT
============================================================ */
.p-contact-tel {
  & .__number img {
    @media screen and (max-width: 782px) {
      width: 7% !important;
    }
  }

  & .__btn-wrap {
    border-top: 6px dotted var(--wp--preset--color--primary);
  }

  & .wp-block-buttons {
    text-align: center;
    padding-top: var(--wp--preset--spacing--60);
  }

  & .wp-block-button__link {
    max-width: 400px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    box-shadow: 3px 3px #006F00;
    transition: box-shadow .3s, opacity .3s;

    &:hover {
      box-shadow: 0px 0px #006F00;
      opacity: .8;
    }
  }
}