@tailwind base;
@tailwind components;
@tailwind utilities;

@media (min-width: 640px) {
  /* ... */
}

/* Medium (md) */
@media (min-width: 768px) {
  /* ... */
}

/* Large (lg) */
@media (min-width: 1024px) {
  /* ... */
}

/* Extra Large (xl) */
@media (min-width: 1280px) {
  /* ... */
}

@layer utilities {
  /* slide */
  .carousel__item {
    /* background-color: var(--vc-clr-primary); */
    /* color: var(--vc-clr-white); */
    font-size: 20px;
    border-radius: 8px;
    display: flex;
    /* flex-decoration:column; */
    justify-content: center;
    align-items: center;
  }

  .carousel__slide {
    padding: 10px;
  }

  button.carousel__prev,
  button.carousel__next {
    box-sizing: content-box;
    border: 5px solid white;
  }
/*
  .carousel__prev--in-active,
  .carousel__next--in-active {
  }
*/

  /* ボタンデザイン(波紋アニメーション) */
  .btn-gray {
    @apply bg-gray-300;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display:inline-block;
    outline: none;
  }
  .btn-gray:hover {
    @apply bg-gray-400;
  }
  .btn-gray:active {
    border:black;
  }
  .btn-gray::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*波紋の形状*/
    background: radial-gradient(circle, #fff 10%, transparent 10%) no-repeat 50%;
    transform: scale(10, 10);
    /*はじめは透過0に*/
    opacity: 0;
    /*アニメーションの設定*/
    transition: transform 0.3s, opacity 1s;
  }
  .btn-gray:active::after {
    transform: scale(0, 0);
    transition: 0s;
    opacity: 0.3;
  }
  .position-center {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
}
