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



html{
  /* ベースフォント */
  font-family: 'Noto Sans JP', sans-serif;
  color: #242424;
  scroll-behavior: smooth;
}

input::placeholder {
  color: #9ca3af;
}

textarea::placeholder {
  color: #9ca3af;
}

.keyv_bg{
  background: url(../images/keyv_bg.png) no-repeat top center/cover;
}

.cta_btn_arrow{
  position: relative;
}

.cta_btn_arrow::after{
  content: "";
  position: absolute;
  border-left: solid 0.12rem #fff;
  border-top: solid 0.12rem transparent;
  border-bottom: solid 0.12rem transparent;
  right: 0.4rem;
  top: 43%;
}

.about01_map_bg{
  background: url(../images/about01_bg.png) no-repeat center top/cover,#f1f1f1;
}

.about02_map_bg{
  background: url(../images/about02_bg.png.png) no-repeat center top/cover,#f1f1f1;
}

.cta_tel_bg{
  background: url(../images/cta_bg.png) no-repeat center top/cover;
}

.voice_bg{
  background: url(../images/voice_head_bg.png) no-repeat center top /4rem;
}

.plan_arrow{
  position: relative;
}

.plan_arrow::before{
  position: absolute;
  content: "";
  background: url(../images/plan_arrow.png) no-repeat left top/contain;
  width: 0.5rem;
  height: 0.5rem;
  top: 0;
}

.catch_bg{
  background: url(../images/catch_bg.png) no-repeat center top/cover;
}

.catch_arrow{
  position: relative;
}

.catch_arrow::after{
  content: "";
  position: absolute;
  background: url(../images/catch_arrow.png) no-repeat center top/contain;
  width: 2.4rem;
  height: 0.8rem;
  left: calc(50% - 1.2rem);
  bottom: -0.4rem;
}

.form_title_arrow{
  position: relative;
}

.form_title_arrow::after{
  position: absolute;
  content: "";
  border-top: solid 0.16rem #242424;
  border-left: solid 0.16rem transparent;
  border-right: solid 0.16rem transparent;
  left: calc(50% - 0.08rem);
  bottom: -0.14rem;
}

.submit_arrow{
  position: relative;
}

.submit_arrow::after{
  position: absolute;
  content: "▼";
  font-size: 0.2rem;
  transform: rotate(-90deg);
  right: 0.28rem;
  top: 0.32rem;
}

/* 光らせるためのstyle */
.shine{
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}
/* 光の疑似要素 */
.shine::before{
  content: "";
  animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  background-color: #fff;
  width: 140%;
  height: 100%;
  transform: skewX(-45deg);
  top: 0;
  left: -160%;
  opacity: 0.5;
  position: absolute;
}
/* 光の動き */
@keyframes shine{
  0% {
    left: -160%;
    opacity: 0;
  }
  70% {
    left: -160%;
    opacity: 0.5;
  }
  71% {
    left: -160%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}

/* .textCheck:valid {
  border: solid 0.01rem #3cb371;
} */

.selectbox_check{
  position: relative;
}

.selectbox_check::after{
  position: absolute;
  content: "▼";
  font-size: 0.14rem;
  right: 0.16rem;
  top: 38%;
}
  .cta_btn_bg_header{
    position: relative;
  }
  .cta_btn_bg_header::before{
    content: "";
    position: absolute;
    height: 0.5rem;
    width: 100%;
    background: url(../images/header_btn_pc.png) no-repeat top center/3.57rem;
    left: 0;
    top: 0;
  }


@media screen and (min-width: 768px){
  .keyv_bg{
    background: url(../images/keyv_bg_pc.png) no-repeat top center/cover;
  }
  .about01_map_bg{
    background: url(../images/about01_bg_pc.png) no-repeat center top/cover,#f1f1f1;
  }
  .about02_map_bg{
    background: url(../images/about02_bg_pc.png) no-repeat center top/cover,#f1f1f1;
  }
  .cta_tel_bg{
    background: url(../images/cta_bg_pc.png) no-repeat center top/cover;;
  }
  .voice_bg{
  background: url(../images/voice_head_bg_pc.png) no-repeat center top /2.2rem;
  }
  .plan_arrow::before{
    position: absolute;
    content: "";
    background: url(../images/plan_arrow.png) no-repeat left top/contain;
    width: 0.28rem;
    height: 0.28rem;
    top: 0;
  }
  .catch_bg{
    background: url(../images/catch_bg_pc.png) no-repeat center top/cover;
  }
    .textCheck:valid + div{
    animation-name: openCheck_pc;
  }

  .tectCheck:invalid + div{
    animation-name: closeCheck_pc;
  }
  .selectbox_check::after{
    font-size: 0.14rem;
    right: 0.08rem;
    top: 32%;
  }
  .cta_btn_arrow::after{
    content: "";
    position: absolute;
    border-left: solid 0.12rem #fff;
    border-top: solid 0.12rem transparent;
    border-bottom: solid 0.12rem transparent;
    right: 0.4rem;
    top: 40%;
  }
}