@charset "UTF-8";

/*****************************
  topsec-fv
*****************************/
.topsec-fv{
  position: relative;
  overflow: hidden;
}
.topsec-fv .fvsplide{
  margin-top: 77px;
}
.splide__slide{
  width: 100%;
  height: 100lvh;
}
.topsec-fv .catch{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  position: absolute;
  top: 40%;
  left: 10%;
  z-index: 1;
}
.topsec-fv .catch::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  background: #ffffff86;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  filter: blur(60px);
  width: 50vw;
  z-index: -1;
}
.topsec-fv .catch span {
  display: block;
  font-size: 7rem;
  color: #000000;
  letter-spacing: 1rem;
  position: relative;
  line-height: 1.3;
  font-weight: 600;
}

@media only screen and (max-width: 1180px) {
    
}
@media only screen and (max-width: 1024px) {
  .topsec-fv .catch span {
    font-size: 6rem;
  }
  .topsec-fv .catch::before{
  background: #ffffff;
}
}
@media only screen and (max-width: 820px) {
    
}
@media only screen and (max-width: 768px) {
  .topsec-fv .catch span {
    font-size: 5rem;
  }
}
@media only screen and (max-width: 767px) {
  .topsec-fv .catch{
  top: 50%;
  }
  .topsec-fv .catch span {
    font-size: 4rem;
  }
  .topsec-fv .fvsplide{
    margin-top: initial;
  }
}
/*****************************
  top-about
*****************************/
.top-about .ftxtbox p{
  padding: 2rem 0;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
  .top-about .fimgbox,
  .top-about .ftxtbox{
    width: 100%;
  }
    .top-about .btn1{
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
}
/*****************************
  top-service
*****************************/
.top-service .ftxtbox p{
  padding: 2rem 0;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
  .top-service .servicebox{
    flex-direction: column-reverse;
  }
  .top-service .fimgbox,
  .top-service .ftxtbox{
    width: 100%;
  }
  .top-service .ftxtbox h2{
    font-size: 2rem;
  }
  .top-service .btn1{
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
}