@charset "UTF-8";




.title h2{
  font-size: 4rem;
}
@media screen and (max-width: 768px) {
  .title h2{
    font-size: 3rem;
  }
}
/* --------------------------------------------------
  ふわっと表示
-------------------------------------------------- */
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 5%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
/* --------------------------------------------------
  トップビュー
-------------------------------------------------- */
#top-view {
  position: relative;
  overflow: hidden;
}

#top-view .inner {
  position: relative;
}

.view-slider {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  height: auto; 
}

.view-slider li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: none;
}

#top-view .inner img {
  width: 100%;
  height: calc(100vh - 130px); 
  display: block;
}

/* テキスト */
#top-view .inner p {
  width: 100%;
  color: #fff;
  font-size: 3.8rem;
  font-family: var(--primary-font);
  text-align: center;
  text-shadow: 0px -5px 10px #111, 5px 0 10px #111, 0 5px 10px #111, -5px 0 10px #111;
  position: absolute;
  top: 120px;
  left: 0;
  z-index: 10;
}
#top-view .inner .sp{
  display: none
}
/* スマホ用調整 */
@media screen and (max-width: 768px) {
  #top-view {
    margin-top: 90px;
  }

  #top-view .inner p {
    font-size: 2.4rem;
    top: 50px;
  }
  #top-view .inner .pc{
    display: none
  }
  #top-view .inner .sp{
    display: block
  }
  #top-view .inner img{
    height: calc(100vh - 90px);
    object-fit: cover;
  }
}




/* --------------------------------------------------
  新着情報
-------------------------------------------------- */
#top-news .inner .title h2::before{
    content: "NEWS";
    font-size: 2.8rem;
	letter-spacing: 3px;
  font-weight: normal;
}
#top-news .inner .news-txt{
    max-width: 1000px;
    margin: 0 auto;
    border-top: solid var(--border-color) 1px;
    border-bottom: solid var(--border-color) 1px;
    display: flex;
    flex-direction: column;
    align-items: start;
}
#top-news .inner .news-txt li{
    width: 100%;
    font-size: 1.8rem;
    border-bottom: solid var(--border-color) 1px;
    margin-bottom: -1px;
    padding: 40px 20px;
    display: flex;
    align-items: center;
    gap: 30px;
}
#top-news .inner .news-txt li a{
    font-weight: bold;
}
#top-news .inner .news-txt li span{
    width: 150px;
    font-weight: bold;
    display: flex;
    flex-shrink: 0;
}
.button{
    text-align: center;
    margin: 65px 0 125px;
		display: flex;
		justify-content: center;
}
.button a{
    font-size: 2rem;
		font-weight: bold;
    color: #fff;
    background: var(--secondary-color);
    border: solid var(--secondary-color) 2px;
		display: flex;
		align-items: center;
		gap: 10px;
    padding: 25px 110px;
    border-radius: 50px;
		text-decoration: none;
}
.button a:hover{
  opacity: .8;
}
@media screen and (max-width: 768px) {
    #top-news{
        padding: 0 15px;
    }
    #top-news .inner .title h2::before{
      font-size: 2rem;
    }
    #top-news .inner .news-txt{
        width: 100%;
    }
    #top-news .inner .news-txt li{
        font-size: 1.6rem;
        padding: 20px 20px;
        flex-direction: column;
        align-items: start;
        gap: 5px;
    }
    .button{
        margin: 40px 0 60px;
    }
    .button a{
        font-size: 1.6rem;
        padding: 15px 60px;
    }
}
/* --------------------------------------------------
  事業内容
-------------------------------------------------- */
#top-service .inner{
    background: var(--primary-color);
    padding: 1px 0;
}
#top-service .inner .title h2::before{
    content: "SERVICE";
    font-size: 2.8rem;
		letter-spacing: 3px;
    font-weight: normal;
}
#top-service .inner .title p{
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 50px;
}
#top-service .inner .service-txt{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#top-service .inner .service-txt li{
    width: calc(50% - 20px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}
#top-service .inner .service-txt li span{
    font-size: 2.4rem;
    font-family: var(--primary-font);
}
#top-service .inner .service-txt li p{
    font-size: 1.8rem;
}
#top-service .inner .service-txt li img{
    width: 100%;
}
@media screen and (max-width: 768px) {
    #top-service .inner .title h2::before{
      font-size: 2rem;
    }
    #top-service .inner .title p{
        font-size: 1.6rem;
        padding: 0 15px;
    }
    #top-service .inner .service-txt{
        width: 100%;
        flex-direction: column;
        padding: 0 15px;
    }
    #top-service .inner .service-txt li{
        width: 100%;
    }
    #top-service .inner .service-txt li span{
        font-size: 1.8rem;
    }
    #top-service .inner .service-txt li p{
        font-size: 1.6rem;
    }
}
/* --------------------------------------------------
  施工事例
-------------------------------------------------- */
#top-works {
  width: 100%;
  padding: 1px 0;
}
#top-works .inner .title h2::before{
	content: "WORKS";
	font-size: 2.8rem;
	letter-spacing: 3px;
  font-weight: normal;
}
#top-works .swiper {
  width: 100%;
  overflow: hidden;
}

#top-works .swiper-slide {
  width: 300px;
  text-align: center;
}

#top-works .swiper-slide img {
  aspect-ratio: 1/1;
  display: block;
  object-fit: cover;
}
@media screen and (max-width: 768px) {
    #top-works .inner .title h2::before{
      font-size: 2rem;
    }
}

/* --------------------------------------------------
  交通アクセス
-------------------------------------------------- */
#access{
  background: var(--primary-color);
  padding: 1px 0 125px;
}
#access .inner .title h2::before{
  content: "ACCESS";
  font-size: 2.8rem;
  letter-spacing: 3px;
  font-weight: normal;
}
#access .inner .map{
  max-width: 1200px;
  margin: 0 auto;
}
#access .inner .map iframe{
  width: 100%;
}
#access .inner .map a{
  text-decoration: underline;
  margin-left: 15px;
}
@media screen and (max-width: 768px) {
  #access{
    padding-bottom: 60px;
  }
  #access .inner .title h2::before{
    font-size: 2rem;
  }
  #access .inner .map a{
    margin-left: 15px;
  }
  #access .inner .map iframe{
    height: 500px;
  }
}
/* --------------------------------------------------
  
-------------------------------------------------- */










@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 768px) {
}