@charset "UTF-8";

/* ==================================================
  /sumai/lineup/hiraya/style_hiraya.css
  => 注文住宅サイト　平屋共通スタイルシート
　最終更新：2025.004.22
================================================== */


/* hero
============================================================ */
.hiraya_hero{
	/*position: relative;*/
	height: 580px;
	background-image: url(../img/merit_mv.jpg);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
}


  /* wide screen用 */
@media screen and (min-width:1200px){
	.hiraya_hero{
		background-size: cover;
	}
}

/* mobile用 */
@media screen and (max-width:768px) {
	.hiraya_hero{
		height: auto;
	}
}



/* ==============================
   sec-title
   ============================== */
.sec-title {
  position: relative;
    padding: 0 0 145px;
    margin: 108px 0 256px;
}
.sec-title:before {
  position: absolute;
  content: "";
	    top: inherit;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 95px;
  background-color: #666666;
}
.sec-title h3 {
  font-size: 34px;
  text-align: center;
	    letter-spacing: .16em !important;
}
/*.sec-title h3 span {
  display: block;
  font-size: 18px;
  text-align: center;
  margin: 0 0 5px;
}*/
@media screen and (max-width:768px) {
  .sec-title {
        padding: 10vw 0 14vw;
        margin: 0 0 14vw;
  }
  .sec-title:before {
    height: 10vw;
  }
  .sec-title h3 {
    font-size: 6vw;
  }
  .sec-title h3 span {
    font-size: 4vw;
    margin: 0 0 1vw;
  }
}

/* merit
============================================================ */
.merit{
	margin: 0 0 198px;
}
/*feature-head*/
.features{
	    overflow: hidden;
}
.features + .features{
	margin: 198px 0 0;
}
.features .feature-head{
	text-align: center;
	margin: 0 0 100px;
}
.features .feature-head h4{
	font-size: 34px;
	margin: 0 0 30px;
	    line-height: 1.4;
}
.features .feature-head h4 span{
	display: block;
	height: 100px;
	margin: 0 0 45px;
}
.features .feature-head h4 span img{
	height: 100% !important;
}
.features .feature-head p{
	font-size: 18px;
	line-height: 1.7;
	letter-spacing: .18em !important;
}

/* mobile用 */
@media screen and (max-width:768px) {
	.merit{
		margin: 0 0 12vw;
	}
	.features + .features{
		    margin: 16vw 0 0;
	}
	.features .feature-head{
		padding: 0 6vw;
		        margin: 0 0 10vw;
	}
	.features .feature-head h4{
		font-size: 6vw;
		margin: 0 0 4vw;
	}
	.features .feature-head h4 span{
		height: 12vw;
    margin: 0 0 5vw;
	}
	.features .feature-head p{
		        font-size: 3.8vw !important;
		letter-spacing: .12em !important;
	}
}



/*feature-cont*/

.features .feature-cont{
	max-width: 1565px;
	padding: 0 100px;
	margin: 0 auto 210px;
	display: grid;
	gap: 45px;
	grid-template-columns: 1fr 1fr;
}

.features .feature-cont figure{
	margin: 0 0 25px;
}
.features .feature-cont h5{
	font-size: 22px;
	margin: 0 0 15px;
	    letter-spacing: .14em !important;

}
.features .feature-cont p{
	font-size: 16px;
	line-height: 1.6;
	    letter-spacing: .08em !important;
	
}
/* mobile用 */
@media screen and (max-width:768px) {
	.features .feature-cont{
		display: block;
		width: auto;
		padding: 0 6vw;
		        margin: 0 0 20vw;
	}
	.features .feature-cont div + div{
		margin: 6vw 0 0;
	}
	.features .feature-cont figure{
		    margin: 0 0 4vw;
	}
	.features .feature-cont h5{
		    font-size: 4.8vw;
		    margin: 0 0 2vw;
	}
	.features .feature-cont p{
		font-size: 3.6vw !important;
	}
}



/*p-hiraya*/

.features .p-hiraya{
	background-color: #ddd8d4;
	padding: 90px 0 110px;
	position: relative;
}
.features .p-hiraya:before{
	position: absolute;
	display: block;
	content: "";
 width: 0;
  height: 0;
  border-style: solid;
  border-right: 40px solid transparent;
  border-left: 40px solid transparent;
  border-top: 30px solid #ddd8d4;
  border-bottom: 0;
	top: -70px;
	left: 50%;
	transform: translateX(-50%);
}

.features .p-hiraya h5{
	font-size: 26px;
	text-align: center;
	position: relative;
	    padding: 0 0 25px;
    margin: 0 0 85px;
}
.features .p-hiraya h5:after{
	position: absolute;
	display: block;
	content: "";
	background-color: #1a1a1a;
	height: 1px;
	width: 83px;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.features .p-hiraya .p-hiraya-in{
	max-width: 1385px;
	padding: 0 100px;
	margin: 0 auto;
}
.features .p-hiraya .p-hiraya-in .flex-cont{
	gap: 45px;
}
.features .p-hiraya .p-hiraya-in .flex-cont figure{
	flex: 1;
}
.features .p-hiraya .p-hiraya-in .flex-cont div{
	width: 430px;
}
.features .p-hiraya .p-hiraya-in .flex-cont h6{
	font-size: 22px !important;
	margin: 0 0 16px;
}
.features .p-hiraya .p-hiraya-in .flex-cont p{
	    font-size: 16px;
    line-height: 1.7;
}
.features .p-hiraya .p-hiraya-in .flex-cont .btn-next{
	    width: 370px;
    margin: 30px 0 0;
}
.features .p-hiraya .p-hiraya-in .flex-cont + .flex-cont{
	margin: 80px 0 0;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.features .p-hiraya{
		        padding: 10vw 6vw 14vw;
	}
	.features .p-hiraya:before{
		    border-right: 6vw solid transparent;
    border-left: 6vw solid transparent;
    border-top: 5vw solid #ddd8d4;
    border-bottom: 0;
    top: -10vw;
	}
	.features .p-hiraya h5{
		        font-size: 5.2vw;
        padding: 0 0 4vw;
        margin: 0 0 10vw;
	}
	.features .p-hiraya h5:after{
		    width: 14vw;
	}
	.features .p-hiraya .p-hiraya-in{
		    width: auto;
		    padding: 0 4vw;
	}
	.features .p-hiraya .p-hiraya-in .flex-cont div{
		width: auto;
	}
	.features .p-hiraya .p-hiraya-in .flex-cont + .flex-cont{
		margin: 10vw 0 0;
	}
	.features .p-hiraya .p-hiraya-in .flex-cont figure{
		margin: 0 0 3vw;
	}
	.features .p-hiraya .p-hiraya-in .flex-cont h6{
font-size: 4.8vw !important;
        line-height: 1.4;
		        margin: 0 0 3vw;
	}
	.features .p-hiraya .p-hiraya-in .flex-cont p{
		font-size: 3.6vw !important;
	}
}


/*p-hiraya イレギュラー*/

/*f-1*/
.features.f-1 .p-hiraya .p-hiraya-in{
	max-width: 1385px;
	padding: 0 100px;
	margin: 0 auto;
	display: grid;
	gap: 45px;
	grid-template-columns: 1fr 1fr;
}
.features.f-1 .p-hiraya .p-hiraya-in div figure{
	margin: 0 0 25px;
}
.features.f-1 .p-hiraya .p-hiraya-in div h6{
	font-size: 22px;
	line-height: 1.7;
	margin: 0 0 15px;
}
.features.f-1 .p-hiraya .p-hiraya-in div p{
	font-size: 16px;
	margin: 0 0 30px;
	line-height: 1.7;
}
.features.f-1 .p-hiraya .p-hiraya-in div p.notes{
	font-size: 14px;
}
.features.f-1 .p-hiraya .p-hiraya-in div .btn-next{
	width: 370px;
	margin: 0 0 20px;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.features.f-1 .p-hiraya .p-hiraya-in{
		padding: 0 4vw;
		width: auto;
		display: block;
	}
	.features.f-1 .p-hiraya .p-hiraya-in div + div{
		margin: 10vw 0 0;
	}
	.features.f-1 .p-hiraya .p-hiraya-in div figure{
		        margin: 0 0 3vw;
	}
	.features.f-1 .p-hiraya .p-hiraya-in div h6{
		        font-size: 4.8vw;
        line-height: 1.4;
		        margin: 0 0 3vw;
	}
	.features.f-1 .p-hiraya .p-hiraya-in div p{
		        font-size: 3.6vw !important;
	}
	.features.f-1 .p-hiraya .p-hiraya-in div .btn-next{
		width: auto;
	}
	.features.f-1 .p-hiraya .p-hiraya-in div p.notes{
		
	}
}



/*f-3*/
.features.f-3{
	position: relative;
}
.features.f-3:after{
	position: absolute;
	display: block;
	content: "";
	height: 1px;
	width: 160px;
	background-color: #1a1a1a;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
/* mobile用 */
@media screen and (max-width:768px) {
	.features.f-3:after{
		    width: 25vw;
	}
}

/*f-4*/
.features.f-4 .p-hiraya-in .flex-cont div figure{
	margin: 50px 0 0;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.features.f-4 .p-hiraya-in .flex-cont div figure{
		margin: 2vw 0 14vw;
	}
}
.features.f-4 .p-hiraya-in .idea{
	padding: 120px 0;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.features.f-4 .p-hiraya-in .idea{
		padding: 0 0 14vw;
		margin: 10vw 0 0;
	}
}

.features.f-4 .p-hiraya-in .idea .flex-cont div{
	width: 430px;
}
/*.features.f-4 .p-hiraya-in .idea .flex-cont div .slick-dots{
	position: relative;
}*/
.features.f-4 .p-hiraya-in .idea .flex-cont div#slick-slide{
	    flex: 1;
}
.features.f-4 .p-hiraya-in .idea .flex-cont div#slick-slide div{
	width: auto;
}/* mobile用 */
@media screen and (max-width:768px) {
	.features.f-4 .p-hiraya-in .idea .flex-cont{
		        padding: 0px 0 0;
	}
	.features.f-4 .p-hiraya-in .idea .flex-cont div{
		width: auto;
	}
	.features.f-4 .p-hiraya-in .idea .flex-cont div#slick-slide{
		        margin: 0 0 15vw;
	}
}


.slick-dots{
	text-align: left!important;
	    left: -475px;
    width: 196px !important;
	top: 350px;
}
.slick-dots li{
	    width: 38px!important;
    height: 38px!important;
	border-radius: 0;
	    border: 1px solid #666666;
	margin: 0!important;
}
.slick-dots li + li{
	margin: 0 0 0 14px !important;
}
.slick-dots li button{
	font-size: 19px !important;
    color: #666666 !important;
	    width: 38px!important;
    height: 38px!important;
	font-family: YakuHanJP, "ヒラギノ角ゴ Pro W3", 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", Meiryo, "MS PGothic", Osaka, sans-serif;
}
.slick-dots li.slick-active,
.slick-dots li:hover{
	    background-color: #666666;
}
.slick-dots li.slick-active button,
.slick-dots li:hover button{
	color: #ffffff !important;
}

/* mobile用 */
@media screen and (max-width:768px) {
	.slick-dots{
		left: 0;
		        top: auto;
        bottom: -12vw !important;
        height: 8vw;
	}
	.slick-dots li{
		width: 8vw !important;
    height: 8vw !important;
	}
	.slick-dots li button{
		    font-size: 3.8vw !important;
    width: 8vw !important;
    height: 8vw !important;
	}
}


.features.f-4 .p-hiraya-in .idea .idea-flow{
	    margin: 55px 0 0;
}
.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in{
	gap: inherit;
	background-image: url("../img/bg-arrow.png");
	background-repeat: no-repeat;
	    background-position: right 0 top 175px;
	
}
.features.f-4 .p-hiraya-in .idea .idea-flow > p{
	font-size: 22px !important;
    padding: 0 0 10px;
    margin: 0 0 40px;
	    font-weight: 400 !important;
	border-bottom: 4px solid #ffffff;
	font-family: YakuHanMP, 'Noto Serif JP', "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", serif !important;
}
.features.f-4 .p-hiraya-in .idea .idea-flow > p.notes{
    font-size: 14px !important;
    margin: 24px 0 0 1em !important;
    line-height: 1.6 !important;
    text-indent: -1em !important;
    border: none;
	font-family: YakuHanJP, 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important
}
.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in section{
	width: 245px;
}
.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in section h6{
	font-size: 18px !important;
	    font-weight: 300 !important;
	    letter-spacing: .16em !important;
	font-family: YakuHanJP, 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
	    margin: 0 0 8px;
}
.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in section h6 span{
	display: inline-block;
	width: 35px;
    height: 22px;
	margin: 0 15px 0 0;
}
.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in section h6 span img{
	    height: 100% !important;
}
.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in section p{
	font-size: 14px !important;
	    line-height: 1.6;
    margin: 0 0 25px;
}
.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in section figure{
	width: 180px;
	margin: 0 auto 35px;
}
.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in section figure.floor{
	width: 245px;
	margin: 0;
}
.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in .arrow{
	width: 17px;
	height: 218px;
	display: -webkit-box;
display: flex;
	-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in .arrow img{
	margin-top: auto;
}
/* mobile用 */
@media screen and (max-width:768px) {
	
	.features.f-4 .p-hiraya-in .idea .idea-flow{
		    margin: 16vw 0 0;
	}
	.features.f-4 .p-hiraya-in .idea .idea-flow > p{
		    font-size: 4.8vw !important;
    text-align: center;
    padding: 0 0 2.5vw;
    margin: 0 0 10vw;
	}
	.features.f-4 .p-hiraya-in .idea .idea-flow > p.notes{
		text-align: left;
	}
	.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in{
		background-image: url("../img/bg-arrow_sp.png");
		    background-position: right 0 top 0;
    background-size: contain;
    padding: 0 0 12vw;
	}
	.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in section{
		    width: 70vw;
    margin: 0 auto;
	}
	.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in .arrow{
		    width: auto;
                   height: 3.8vw;
        margin: 8vw 0;
	}
	.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in .arrow img{
		margin: 0 0 0 auto;
	}
	.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in .arrow img{
		        height: 100% !important;
	}
	.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in section figure{
		    width: 55vw;
	}
	.features.f-4 .p-hiraya-in .idea .idea-flow .idea-flow-in section figure.floor{
		width: auto;
		
	}
	
}



/*f-5*/
.features.f-5 .feature-cont{
	padding: 0 100px;
	max-width: 1200px;
	display: block;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.features.f-5 .feature-cont{
		    padding: 0 6vw;
	}
}