@charset "UTF-8";

/*****************************
  top
*****************************/
.topsec{
  padding: 10rem 0;
}

.topsec-content .imgbox{
  width: 55%;
}
.topsec-content .imgbox img{
  border: 10px solid #fff;
}
.topsec-content .content{
  position: absolute;
  bottom: -5rem;
  width: 45%;
}
.topsec-content .content .ttl{
  display: flex;
  align-items: baseline;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}
.topsec-content .content .ttl span{
  background: rgba(255,255,255,.8);
  font-size: 2.8rem;
  font-weight: 500;
  display: inline-block;
  line-height: 1.4;
  padding: .5rem 2rem;
}
.topsec-content .whitebox{
  background: #fff;
  border-radius: 30px;
  font-size: 1.8rem;
  padding: 4rem;
}
.topsec-content .whitebox .morebtn1{
  margin-top: 2rem;
}
.topsec-content .whitebox .morebtn1 a{
  margin-left: auto;
}
@media only screen and (max-width: 1440px) {
  .topsec-content .content .ttl span{
    font-size: 3rem;
  }
}
@media only screen and (max-width: 1180px) {
  .topsec{
    padding: 8rem 0;
  }
  .topsec-content .content{
    width: 50%;
  }
  .topsec-content .content .ttl span {
    font-size: 2.4rem;
    padding: .5rem 1rem;
  }
  .topsec-content .whitebox {
    border-radius: 20px;
    padding: 3rem;
  }
}
@media only screen and (max-width: 1024px) {
  .topsec-content .content .ttl span{
    font-size: 2.3rem;
  }
}
@media only screen and (max-width: 1023px) {
  .topsec-content .content{
    margin: 2rem auto 0;
    position: static;
    width: 80%;
  }
  .topsec-content .imgbox {
    margin: 0 auto;
    width: 65%;
  }
  .topsec-content .whitebox {
    border-radius: 0;
    padding: 1rem 2rem;
  }
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-content .imgbox,
  .topsec-content .content{
    width: 100%;
  }
  .topsec-content .imgbox img{
    border-width: 5px;
  }
  .topsec-content .content .ttl span {
    font-size: 1.8rem;
    padding: .5rem 1rem;
  }
  .topsec-content .whitebox {
    font-size: 1.6rem;
    padding: 1rem;
  }
}

/*****************************
topsec-fv 
*****************************/
.topsec-fv {
  padding: 10rem 0 0;
}
.topsec-fv .splide {
  margin-left: auto;
  max-width: 85vw;
}
.topsec-fv .splide__slide {
  border-radius: 50px 0 0 50px;
  overflow: hidden;
  height: calc(95vh - 10rem);
  max-width: 85vw;
}
.topsec-fv .splide img {
  object-fit: cover;
  transition: 8s ease-out;
  transform: scale(1.1);
  height: 100%;
  width: 100%;
}
.topsec-fv .splide__slide.is-active img {
  transform: scale(1);
  transition-delay: 0s;
}

.topsec-fv .main{
  display: flex;
  align-items: baseline;
  flex-direction: column;
  gap: 2rem;
  position: absolute;
  top: 70%;
  left: 5%;
  transform: translateY(-50%);
}
.topsec-fv .main span{
  background: rgba(255,255,255,.8);
  font-size: 6rem;
  font-weight: 500;
  display: inline-block;
  line-height: 1.4;
  padding: .5rem 2rem;
}

@media only screen and (max-width: 1600px) {
  .topsec-fv .main span{
    font-size: 4rem;
  }
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 1023px) {
  .topsec-fv{
    padding: 4rem 0 0;
  }
  .topsec-fv .splide {
    max-width: 90vw;
  }
  .topsec-fv .splide__slide {
    border-radius: 30px 0 0 30px;
    height: calc(95vh - 4rem);
    max-width: 90vw;
  }
  .topsec-fv .main {
    left: 2rem;
  }
}
@media only screen and (max-width: 820px) {
  .topsec-fv .splide__slide{
    height: 600px;
  }
  .topsec-fv .main {
    gap: 1rem;
  }
  .topsec-fv .main span {
    font-size: 4vw;
    padding: .5rem 1.5rem;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-fv .splide {
    max-width: calc(100vw - 2rem);
  }
  .topsec-fv .splide__slide {
    border-radius: 20px 0 0 20px;
    height: 400px;
    max-width: calc(100vw - 2rem);
  }
  .topsec-fv .main {
    left: 1rem;
  }
  .topsec-fv .main span {
    font-size: 5vw;
    padding: .5rem 1rem;
  }
}

/*****************************
banner
*****************************/
.banner{
  max-width: 700px;
  margin: 3rem auto 0;
}

/*****************************
topsec-company
*****************************/
.topsec-company{
  padding-bottom: 15rem;
}
.topsec-company::before,
.topsec-company::after{
  content: "";
  position: absolute;
  top: -40rem;
  left: 0;
  height: 850px;
  width: 100%;
  z-index: -1;
}
.topsec-company::before{
  background: url(../images/top/bg1.webp) no-repeat center / cover;
  opacity: .5;
  z-index: -2;
}
.topsec-company::after{
  background: linear-gradient(#fff 5% , transparent 10% ,transparent 90% , #fff 95%);
  
}
.topsec-company .imgbox{
  margin-left: auto;
}
.topsec-company .content{
  left: 5%;
}
@media only screen and (max-width: 1180px) {
  .topsec-company {
    padding-bottom: 12rem;
  }
}
@media only screen and (max-width: 1100px) {
  .topsec-company {
    padding: 14rem 0 12rem;
  }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .topsec-company {
    padding: 8rem 0 12rem;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
}

/*****************************
topsec-facility
*****************************/
.topsec-facility{
  padding: 20rem 0 15rem;
}
.topsec-facility::before{
  content: "";
  background: url(../images/top/bg2.webp) no-repeat center / cover;
  opacity: .5;
  position: absolute;
  top: 0;
  left: 0;
  height: 600px;
  width: 100%;
  z-index: -1;
}
.topsec-facility .imgbox{
  margin-right: auto;
}
.topsec-facility .content{
  right: 5%;
}
@media only screen and (max-width: 1180px) {
  .topsec-facility {
    padding: 10rem 0 8rem;
  }
  .topsec-facility::before{
    height: 400px;
  }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
}

/*****************************
topsec-news
*****************************/
.topsec-news::before{
  content: "";
  background: rgb(231, 243, 255);
  border-radius: 30px 0 0 0;
  position: absolute;
  bottom: -1rem;
  right: 0;
  height: 100%;
  width: calc((100% - 1120px) / 2 + 1220px);
}
.topsec-news .morebtn1{
  margin-top: 3rem;
}
.topsec-news .morebtn1 a{
  margin: 0 auto;
}
@media only screen and (max-width: 1280px) {
  .topsec-news::before{
    width: 90%;
  }
}
@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) {
}
@media only screen and (max-width: 767px) {
}