@charset "UTF-8";
/* よくつかう部品CSS */


/* 汎用パーツ */

/*---○→--*/
.btn__maru {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid #333;
      display: inline-flex;
      align-items: center;
      justify-content: center;
	cursor: pointer;
    }


/*ラインナップの４ボタン：product-index*/
.products__thumb .btn__maru {
  position: absolute;
  inset: 0;
  margin: 31% auto auto auto;
  width: 44px;
  height: 44px;
	background: rgba(0,0,0,0.2);
  
	border-radius: 50%;
      border: 1px solid #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
	cursor: pointer;
	
	
	
}
.products__thumb .btn__arrow {
	position: absolute;
  inset: 0;
  margin: 40% auto auto auto;
	display: block;
	transform:rotate(90deg);
	/*transform-origin:50% 50%;*/
}

.products__thumb-link:hover .btn__arrow{
	display: block;
	transform:rotate(91deg) translateX(2px);
	transition-duration: .3s;
}


/*やじるし*/

.btn__arrow {
 position: relative;
  width: 15px;
  height: 1px;
  border-radius: 50%;
  background-color: #333;

}

.btn__arrow::before,
.btn__arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: -1px;
  width: 9px;
  height: 1px;
  border-radius: 50%;
  background-color: #333;
  transform-origin: calc(100% - 1px) 50%;
}

.btn__arrow::before {
  transform: rotate(45deg);
}

.btn__arrow::after {
  transform: rotate(-45deg);
}

/*hover　→　*/
a.btn__maru:hover .btn__arrow{
	 background-color: none;
	transform: translateX(5px);
	transition-duration: .3s;
}


/*バックの丸が黒*/
.color-white {
	border: none;
	background: #666;
}

/*矢印ー白*/
.btn__arrow.color-white,
.btn__arrow.color-white::before,
.btn__arrow.color-white::after
{
  background-color: #fff;
}







/*---MOREボタン--*/


.btn__more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 55px;
  border-radius: 5px;
  background-color: #ffffff;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: #333;
}

.btn__more-label {
  font-size: 16px;
}

@media screen and (max-width : 767px) {
	.btn__more-label {
  font-size: 14px;
}
}



/*ライナップページの工法ナビ*/
.btn__more.black {
	width: 180px;
	background: #666;
	color: #fff;
	padding: 15px 35px;
	margin: 0 auto;
}

.btn__more.black .btn__more-label {
	font-size: 14px;
}
.btn__more.black:hover {
	background: #444;
	transition-duration: .3s;
}


/*4バナーは小さく*/
.panel-links__item .btn__more {
  
  padding: 10px 30px;
  
}

/* hover感 */
.panel-links__item:hover .btn__more {
  
}


 
/*hover　→　*/
.btn__more:hover,
.panel-links__item:hover .btn__more {
	background-color: var(--COL-BROWN3);
	transition-duration: .5s;
}

.btn__more:hover .btn__arrow,
.panel-links__item:hover .btn__more .btn__arrow {
	 background-color: none;
	transform: translateX(5px);
	transition-duration: .3s;
}




/* BOX-arrowボタン */

.btn__box-footer {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin: 28px 0 36px;
	
}


@media screen and (max-width : 767px) {
	.btn__box-footer {
		display: none;
	}
}



.btn__box {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 260px;
  padding: 14px 24px;
	margin-right: 15px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  border: none;
  cursor: pointer;
	position: relative;
}




/*hover　→　*/
a.btn__box:hover .btn__arrow{
	 background-color: none;
	transform: translateX(5px);
	transition-duration: .3s;
	
}

.btn__box-text {
	font-size: 16px;
}


/*モデルハウス*/
.btn__box--contact {
  background-color: var(--COL-BROWN3);
  color: #333;
}
a.btn__box:hover.btn__box--contact {

	filter: saturate(200%);
	
}

/*ショールーム*/
.btn__box--showroom {
  background-color: var(--COL-BROWN2);
  color: #fff;
}
a.btn__box:hover.btn__box--showroom {
 
	filter: saturate(180%);
}


/*アフターメンテ*/
.btn__box--after {
  background-color: #333;
  color: #fff;
}
a.btn__box:hover.btn__box--after {
 
	filter: saturate(180%);
}


/*不動産情報*/
.btn__box--estate {
  background-color: #666;
  color: #fff;
}
a.btn__box:hover.btn__box--estate {
 background-color: #333;
	transition-duration: .3s;
}


.btn__box-lineup {
	width: 600px;
	margin: 0 0 0 auto;
  
}

/*家づくり　表紙の左合わせボタン*/
.btn__box-lineup.btn__reverse {
	margin: 0 auto 0 5%;
}

@media screen and (max-width : 767px) {
	.btn__box-lineup {
	width: auto;
	margin: 0 0 0 auto;
  
}

/*家づくり　表紙の左合わせボタン*/
.btn__box-lineup.btn__reverse {
	margin: 0 auto 0 auto;
}
}



@media screen and (max-width : 767px) {
	
	.btn__box {
		margin-right: 0;
		margin-bottom: 10px;
	}
	.btn__box-text {
		font-size: 14px;
	}
	
	.btn__box-lineup {
	width: 100%;
	margin: 0;
		text-align: center;
	}
	
	
	}/*//end*/



/*お知らせ/ 施工実績　戻るボタン*/
.btn-center {
	text-align: center;
	margin: 50px 0 0 0;
}

.btn-center .btn__more{
	flex-direction: row-reverse;
	background: var(--COL-BROWN3);
}

.btn-center .btn__more .btn__arrow{
	transform: scale(-1, 1);
  display:inline-block;
	
}
.btn-center .btn__more:hover {
	background: #fff;
	transition-duration: .3s;
}
.btn-center .btn__more:hover .btn__arrow{
	transform: translateX(-5px) scale(-1, 1);
	transition-duration: .3s;
	
}



/*ページの上部へ戻るボタン*/
#pagetop {
  position: fixed;
  right: 40px;
  bottom: 200px;
  z-index: 5500;
  display: block;
  width: 42px;
  height:42px;
  cursor: pointer;
  background: rgba(0, 0, 0, .5);
  border-radius: 100vw;
  opacity: 0;
  transition: .5s;
}
#pagetop.visible {
  opacity: 1;
  pointer-events: auto;
}
#pagetop span {
  position: absolute;
  top: 17px;
  left: 15px;
  display: block;
  width:13px;
  height:13px;
  content:"";
  border-top:1px solid #ffffff;
  border-right:1px solid #ffffff;
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

#pagetop:hover {
	background: rgba(0, 0, 0, 1);
}	


@media screen and (max-width : 767px) {
	#pagetop {
		right: 10px;
	}
	#pagetop span {
		top: 18px;
  left: 15px;
		width:12px;
  height:12px;
	}
}
	
	
/*スクロール*/	
	
/*===========

===========*/

/*欧文タイトル*/
.blur{
    transition: all 0.8s;
    filter: blur(20px);
}
.scrollin{
      filter: blur(0);
    }


/*スライドインナビ*/
.slidein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.0s;
}
 .slidein-left{
      transform: translate(-100%,0);
  }
 .slidein-right{
      transform: translate(100%,0);
  }
  .slidein-up{
      transform: translate(0,-50%);
  }
 .slidein-bottom{
      transform: translate(0,100%);
  }
.slidein.scrollin{
    transform: translate(0, 0)!important;
    opacity: 1!important;
  }



/*テキスト左右にライン*/
.text-divider {
  display: flex;
  align-items: center;
  
}
.text-divider::before,
.text-divider::after {
  content: '';
  height: 1px;
  background-color: #888;
  flex-grow: 1;
}
.text-divider::before {
  margin-right: 20px;
}
.text-divider::after {
  margin-left: 20px;
}



/*地図の色*/

iframe {
	/*filter:grayscale(100%);*/
	filter:hue-rotate(170deg);-webkit-filter:hue-rotate(170deg);
}



/*パララックス*/

/*表紙*/
.first-v {
  width: 100%;
  height: 100vh;
  position: relative; }



.first-v .slide-top {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    /*width: 100%;
    height: 100vh;
    background: #cccccc url("../P7031170-1.jpg") no-repeat center;
    background-size: cover; */}

/*被さるパート*/
#container {
  position: relative;
  z-index: 1;
  background: var(--COL-BK);/*ベージュ色*/
  padding: 0; }




/* END汎用パーツ */



/*スマホ用*/
@media screen and (max-width : 767px) {
	
	.nav-free .btn__box {
 
  width: 350rem;
	height: 56rem;
		margin: 10px auto 0 auto;
border-radius: 8px;
}

.nav-free .btn__box	.btn__box-text {
    font-size: 14rem;
}
a.btn-contact:hover .btn__arrow{
	 background-color: none;
	transform: translateX(5px);
	transition-duration: .3s;
	
}
	
	
}/*//end*/