@charset "utf-8";
/*==================================================
              モジュール
===================================*/
/*ドットボタンの設定*/
.slick-dots {
	position: absolute;
  display: flex;
  justify-content: space-between;
	z-index: 100;
  text-align:center;
  width: 45px;
  height: 15px;
	margin:0 0 0 0;/*ドットの位置*/
}


.slick-dots button {
  position: relative;
  display:block;
  top: 5px;
  color: transparent;
  outline: none;
  width:5px;/*ドットボタンのサイズ*/
  height:5px;/*ドットボタンのサイズ*/
  border-radius:50%;

  transform:translate3d(0,0,0);
}

.slick-dots li {
  display:block;
  margin:0 5px;
  width: 15px;
  height: 15px;
}


.slick-dots li button:before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  display: block;
  width: 15px;
  height: 15px;
  border-style: solid;
  border-width: 1px;
  border-radius: 100px;
  box-sizing: border-box;
  visibility: hidden;
}

.slick-dots li.slick-active button:before{
  visibility: visible;
}

/*矢印の設定*/

.slick-prev,
.slick-next {
    position: absolute;
    z-index: 3;
    top: 47%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    background-image: url("../img/slide_arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 37px;
    height: 37px;
    transition: all .5s;
}

.slick-prev {
  transform: rotate(-180deg);
}


/*==================================================
          フロントページトップ
===================================*/
.front_top__slide .slider {
  position:relative;
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

.front_top__slide .slider-item01 {
    background:url('../img/slide01.jpg');
}

.front_top__slide .slider-item02 {
    background:url('../img/slide02.jpg');
}

.front_top__slide .slider-item03 {
    background:url('../img/slide03.jpg');
}

.front_top__slide .slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    width: calc(100% - 80px);/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*ドットナビゲーションの設定*/

.front_top__slide .slick-dots {
  right: 45px;
  bottom: 98px;
}

.front_top__slide .slick-dots button {
  background:#fff;/*ドットボタンの色*/
}

.front_top__slide .slick-dots .slick-active button{
    background:#fff;/*ドットボタンの現在地表示の色*/
    transition: 0.5s;
}

.front_top__slide .slick-dots li.slick-active button:before{
  border-color: #fff;
}

@media screen and (max-width:768px){
  .front_top__slide .slider {
    position:relative;
		width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height: calc(100vh - 80px);/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    /* max-height: 638px; */
    overflow: hidden;
  }
	.front_top__slide .slider-item01 {background:url('../img/slide01-sp.jpg');}
	.front_top__slide .slider-item02 {background:url('../img/slide02-sp.jpg');}
	.front_top__slide .slider-item03 {background:url('../img/slide03-sp.jpg');}

	.front_top__slide .slider-item {
	  width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
	  background-position: top center;/*背景画像の位置を中央に*/
	  background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
	}

	.front_top__slide .slick-dots {
		display: none!important;
	}
}

@media screen and (max-width:414px){
	.front_top__slide .slider {
    max-height: 638px;
  }
}

/*==================================================
          ZEHのすすめ
===================================*/
.front-pages__slide .slick-dots{
  display: none;
}

.front-pages .slick-dots {
  display: flex;
  left: 529px;
  bottom: 0;
}

.front-pages .slick-dots button {
  background:#B09C6A;/*ドットボタンの色*/
}

.front-pages .slick-dots .slick-active button{
    background:#B09C6A;/*ドットボタンの現在地表示の色*/
    transition: 0.5s;
}

.front-pages .slick-dots li.slick-active button:before{
  border-color: #B09C6A;
}

.front-pages .slick-prev {/*戻る矢印の位置と形状*/
  top: 218px;
  left: -17.5px;
}

.front-pages .slick-prev:hover{
  left: -22.5px;
}

.front-pages .slick-next {/*次へ矢印の位置と形状*/
  top: 218px;
  left: 450px;
}

.front-pages .slick-next:hover{
  left: calc(450px + 5px);
}

@media screen and (max-width:1080px){
  .front-pages .slick-dots {
    bottom: -30px;
  }
}

@media screen and (max-width:768px){
  .front-pages .slick-dots {
    display: flex;
    right: 0;
    left: 0;
    bottom: initial;
    top: 336px;
    top: calc(403px + 12px);
  }

  .front-pages .slick-prev {/*戻る矢印の位置と形状*/
    top: 200px;
    left: -17.5px;
  }

  .front-pages .slick-prev:hover{
    left: -22.5px;
  }

  .front-pages .slick-next {/*次へ矢印の位置と形状*/
    top: 200px;
    left: initial;
    right: -17.5px;
  }

  .front-pages .slick-next:hover{
    left: initial;
    right: -22.5px;
  }

}

@media screen and (max-width:360px){
  .front-pages__slide{
    max-width: 280px;
  }
}

/*==================================================
          住宅実例を見る
===================================*/
.gallery_slide .slick-dots{
  display: none;
}

.gallery_slide .slick-dots {
  display: flex;
  right: 271px;
  bottom: -1px;
}

.gallery_slide .slick-dots button {
  background:#B09C6A;/*ドットボタンの色*/
}

.gallery_slide .slick-dots .slick-active button{
    background:#B09C6A;/*ドットボタンの現在地表示の色*/
    transition: 0.5s;
}

.gallery_slide .slick-dots li.slick-active button:before{
  border-color: #B09C6A;
}

.gallery_slide .slick-prev {/*戻る矢印の位置と形状*/
  left: -17.5px;
}

.gallery_slide .slick-prev:hover{
  left: -22.5px;
}

.gallery_slide .slick-next {/*次へ矢印の位置と形状*/
  right: 350px;
}

.gallery_slide .slick-next:hover{
  right: 345px;
}

@media screen and (max-width:768px){
  .gallery_slide .slick-dots {
    right: 0;
    left: 0;
    bottom: -27px;
  }

  .gallery_slide .slick-prev {/*戻る矢印の位置と形状*/
    left: -15.5px;
  }

  .gallery_slide .slick-prev:hover{
    left: -22.5px;
  }

  .gallery_slide .slick-next {/*次へ矢印の位置と形状*/
    right: -15.5px;
  }

  .gallery_slide .slick-next:hover{
    right: -22.5px;
  }
}

@media screen and (max-width:360px){
  .gallery_slide{
    max-width: 280px;
    height: 216px;
  }

  .gallery_slide .slider-item {
    height:216px;
  }

}


/*==================================================
          造作実例を見る
===================================*/
.fe_gallery_slide{
  position: relative;
  width: calc(100vw - 80px);
  height: 446px;
  margin-top: 36px;

}

.fe_gallery_slide_img{
  display: block;
  margin-right: 24px;
  height: auto;
}


.fe_gallery_slide .slick-track{
  display: flex !important;
}

.fe_gallery_slide .slick-slide{
  float: none !important;
  clear: both;
  width: auto !important;
  height: 397px !important;
}

.fe_gallery_slide_item{
  padding-bottom: 50px;
}

.fe_gallery_slide_item img{
  width: auto;
  height: 330px;
  border-radius: 10px;
}

.fe_gallery_slide .slick-dots{
  display: flex;
  width: 85px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.fe_gallery_slide .slick-dots button {
  background:#B09C6A;/*ドットボタンの色*/
}

.fe_gallery_slide .slick-dots .slick-active button{
    background:#B09C6A;/*ドットボタンの現在地表示の色*/
    transition: 0.5s;
}

.fe_gallery_slide .slick-dots li.slick-active button:before{
  border-color: #B09C6A;
}


.fe_gallery_slide .slick-prev {/*戻る矢印の位置と形状*/
  top: -80px;
  right: 164px;
}

.fe_gallery_slide .slick-prev:hover{
  right: 169px;
}

.fe_gallery_slide .slick-next {/*次へ矢印の位置と形状*/
  top: -80px;
  right: 115px;
}

.fe_gallery_slide .slick-next:hover{
  right: 110px;
}

@media screen and (max-width:768px){
  .fe_gallery_slide{
    position: relative;
    width: 100vw;
    height: 328px;
    margin-top: 20px;
  }

  .fe_gallery_slide_img{
    margin-left: 12px;
    margin-right: 12px;
  }

  .fe_gallery_slide_item img{
    height: 221px;
  }

  .fe_gallery_slide .slick-prev {/*戻る矢印の位置と形状*/
    top: -75px;
    right: 99px;
  }

  .fe_gallery_slide .slick-prev:hover{
    right: 104px;
  }

  .fe_gallery_slide .slick-next {/*次へ矢印の位置と形状*/
    top: -75px;
    right: 50px;
  }

  .fe_gallery_slide .slick-next:hover{
    right: 45px;
  }
}

/*==================================================
          土地情報個別ページ
===================================*/
.estate-slide{
  position: relative;
  width: 100%;
  max-width: 645px;
  height: 379px;
}

.estate-slide__items{
  width: 100%;
  height: 379px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
 }

 .estate-slide .slick-dots {
  display: flex;
  justify-content: flex-end;
  right: -5px;
  bottom: -30px;
  width: auto;
}

.estate-slide .slick-dots li{
  display: block;
  width: 15px;
  height: 15px;
  margin: 0;
}

.estate-slide .slick-dots button {
  background:#326405;/*ドットボタンの色*/
}

.estate-slide .slick-dots .slick-active button{
    background:#326405;/*ドットボタンの現在地表示の色*/
    transition: 0.5s;
}

.estate-slide .slick-prev,
.estate-slide .slick-next {
  background-image: url("../img/btn_estate_slide.svg");
  width: 26px;
  height: 26px;
}

.estate-slide .slick-dots li.slick-active button:before{
  border-color: #326405;
}

.estate-slide .slick-prev {/*戻る矢印の位置と形状*/
  left: -41px;
}

.estate-slide .slick-prev:hover{
  left: -46px;
}

.estate-slide .slick-next {/*次へ矢印の位置と形状*/
  right: -41px;
}

.estate-slide .slick-next:hover{
  right: -46px;
}

@media screen and (max-width:768px){
  .estate-slide{
    position: relative;
    width: 100%;
    max-width: 314px;
    height: 214px;
  }

  .estate-slide__items{
    height: 214px;
   }

   .estate-slide .slick-prev {/*戻る矢印の位置と形状*/
    left: -32px;
  }

  .estate-slide .slick-prev:hover{
    left: -37px;
  }

  .estate-slide .slick-next {/*次へ矢印の位置と形状*/
    right: -32px;
  }

  .estate-slide .slick-next:hover{
    right: -37px;
  }
}

@media screen and (max-width:380px){
  .estate-slide{
    max-width: 260px;
    height: 177px;
  }

  .estate-slide__items{
    height: 177px;
  }

  .estate-slide .slick-prev {/*戻る矢印の位置と形状*/
    left: -27px;
  }

  .estate-slide .slick-prev:hover{
    left: -32px;
  }

  .estate-slide .slick-next {/*次へ矢印の位置と形状*/
    right: -27px;
  }

  .estate-slide .slick-next:hover{
    right: -32px;
  }

}