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

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(0px 0.2rem);
  }

  to {
    opacity: 1;
     transform: translate(0px 0px);
  }
}

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

.keyv{
  animation: fadeIn 1.6s ease-in;
}

.fadeIn{
  transform: translate(0,0.32rem);
}


.keyv_bg{
  background: url(../images/factory.png) no-repeat bottom left/5.2rem auto,url(../images/keyv_bg.png) no-repeat bottom center/cover;
}

.factory{
  background: url(../images/factory.png) no-repeat bottom left/5.2rem;
}

.sample.factory{
  background: url(../images/factory.png) no-repeat bottom center/5.2rem;
}

.cta_line{
  position: relative;
}

.cta_line::before{
  content: "";
  position: absolute;
  background-color: white;
  width: 1.6rem;
  height: 0.02rem;
  left: -0.8rem;
  top: 50%;
}

.bgleft::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: white;
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 1);
    transform-origin: right top;
}
.bgleft:hover::after{
	transform-origin:left top;
	transform:scale(1, 1);
}
.bgleft span{
  z-index: 3;
  position: relative;
}
.bgleft{
  transition: color .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}
.bgleft:hover{
  color: #212121;
}

.content_bg{
  background: url(../images/content_bg.png) no-repeat right top 2rem/3.2rem,url(../images/factory.png) no-repeat bottom left/5.2rem;
}

@media screen and (min-width: 768px) {
  .keyv_bg{
    background: url(../images/factory.png) no-repeat bottom left 1.8rem/5.2rem auto,url(../images/keyv_bg_pc.png) no-repeat bottom center/cover;
  }
  .content_bg{
  background: url(../images/content_bg_pc.png) no-repeat right 1rem center/3.5rem,url(../images/factory.png) no-repeat bottom left 1.8rem/5.2rem;
  }
  .factory{
    background: url(../images/factory.png) no-repeat bottom left 1.8rem/5.2rem;
  }
}