@charset "UTF-8";
/*////////////////////////*/
/*ファーストビュー*/
/*////////////////////////*/

/*トップスライダー*/
.top-slider {
	position: relative;
	width: 100%;
	height: 680px ;
}
.swiper-custom-parent {
  position: relative;
  height: 100%;
}
/*slider3*/
.slidertop {
	background: #eaeaea;
  padding-top: 130px;
  height: 100%;
}


.top-bg01 {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 300px;
}
.top-bg02 {
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	width: 300px;
}
.top-bg03 {
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
}
.top-catch {
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	width: 100%;
}

.animetext {
  /* margin: 50px 0; */
  padding: 20px 0;
  display:inline-block;
  overflow:hidden;
  position:relative;
}
.animetext:after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height : 100% ;
  background-color:#039389;
  /*アニメーションの設定*/
  animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(.77,0,.175,1),
             secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(.77,0,.175,1);
  animation-fill-mode: both;
}
.animetext span {
  margin: 10px 0;
  line-height:1;
  /*アニメーションの設定*/
  animation:fadeIn 0.1s 0.5s;
  animation-fill-mode: both;
  padding: 20px;
  background: #134799;
  color: #fff;
}

/*keyframesの設定*/
/*文字が消えている状態から現れるアニメーション*/
@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
/*はじめにブロックを伸ばすアニメーション*/
@keyframes secondaryImageOverlayIn {
    0% {
      width: 0;
    }
    100% {
      width:  100%;
    }
  }
/*のび太ブロックを横に追いやるアニメーション*/
  @keyframes secondaryImageOverlayOut {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(102%);
    }
  }


/*////////////////////////*/
/*セカンドビュー*/
/*////////////////////////*/

.bg-main-200 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700px;
  background: #134799;
  z-index: -1;
}


.selecter a {
	display: block;
	font-size: 13px;
	color: #fff;
	width: 100%;
	padding: 10px;
	text-align: center;
}
.cat01 {
  background: #1563A5;
}
.cat02 {
  background: #D2AE37;
}
.cat03 {
  background: #6E482C;
}
.cat04 {
  background: #D16C4F;
}
.selecter a:hover {
	background: #000;
}

.box-ph {
	height: 190px;
}
.icon-cat {
  position: absolute;
  top: 0;
  left: 0;
}
.h-36 {
  height: 36px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/*slider2*/
.slider2 {
	width: 85%;
}
.slider2-ph {
	height: 300px;
}

/*slider2*/
.slider3 {
	width: 85%;
}
.slider3 .swiper-slide {
	height: 330px;
}
.slider3-ph {
	height: 210px;
}


.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    left: 0;
    background: #134799;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    right: 0;
    background: #134799;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 1.4rem;
    color: #fff;
}

.icon-news {
    display: inline-block;
    border: solid 1px #6f706f;
    border-radius: 15px;
    color: #6f706f;
    padding: 2px 15px;
    margin-right: 5px;
    font-size: 11px;
}

.top-news {
  overflow-y: auto;
  height: 400px;
}









/*PCのみ*/
@media (min-width: 768px) {
  .slidertop .swiper-wrapper {
    max-height: 450px;
  }
  .slidertop .slider-box  {
    height: 100%;
  }

  #estates , #news{
    scroll-margin-top: 80px;
  }


}

@media (max-width: 768px) {

    #estates , #news{
      scroll-margin-top: 60px;
    }

		.top-slider {
			height: 650px;
			z-index: unset;
		}
    .slidertop {
        padding-top: 90px;
    }
    .top-catch {
      bottom: 70px;
    }
    .top-bg01 {
      width: 180px;
    }
    .top-bg02 {
      width: 180px;
    }
    .top-bg03 {
      width: 40%;
    }
    .animetext {
      padding: 10px 0;
    }
    .animetext span {
      padding: 10px;
    }

    .bg-main-200 {
      height: 500px;
    }
    .slider2 {
      width: 90%;
    }
    .slider2-ph {
      height: 180px;
    }
    .slider3 {
      width: 95%;
    }
    .slider3 .swiper-slide {
      height: 270px;
    }
    .slider3-ph {
      height: 140px;
    }


}