@charset "UTF-8";

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


/* hero
============================================================ */
.hiraya_hero{
	/*position: relative;*/
	height: 580px;
	background-image: url(../img/case_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;
  }
}

/* case
============================================================ */
.case{
	margin: 0 0 140px;
	padding: 108px 0 170px;
  overflow: hidden;
  background-color: #ddd8d4;
}
.case .sec-title {
  margin-top: 0;
}
.case .case-cont-wrap{
	padding: 0 100px;
}
.case .case-cont{
	max-width: 1185px;
	margin: 0 auto;
}
.case .case-con .case-img{
	flex: 1;
}
.case .case-cont + .case-cont{
	margin: 90px auto 0;
}
.case .case-cont .case-img figure img{
	width: 100%;
}
.accordion .ac-h{
	overflow: hidden;
  text-align: center;
	position: relative;
  cursor: pointer;
  transition: .3s;
	padding: 23px 0 26px;
	border-bottom: 1px solid #999999;
	background-color: #fff;
  transition: .3s;
}
.accordion .ac-h:hover {
  opacity: .6;
  transition: .3s;
}
.accordion .ac-h .ac-h-inner{
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	margin: 0 auto;
	width: 856px;
}
.accordion .ac-h .ac-h-inner div{
	flex-basis: 105px;
	padding: 10px 0 0;
}
.accordion .ac-h .ac-h-inner p{
	flex-basis: 709px;
	text-align: left;
}
.accordion .ac-h:before{
	content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  width: 30px;
  height: 4px;
  background: #808080;
}
.accordion .ac-h:after{
	content: "";
  position: absolute;
  top: 50%;
  right: 38px;
  transform: translateY(-50%);
  transition: all .3s;
  width: 4px;
  height: 30px;
  background: #808080;
}
.accordion .ac-h.open:after {
	top: 25%;
  transform: rotate(90deg);
  opacity: 0;
}
.case .accordion .ac-h p{
	margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.6;
	    letter-spacing: .12em !important;
  font-family: YakuHanMP, 'Noto Serif JP', "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", serif !important;
}
.case .accordion .ac-c,
.case .accordion .ac-c-open{
	background-color: #ffffff;
	overflow: hidden;
	padding: 60px 0;
	border-top: none;
}

.case .accordion .ac-c *,
.case .accordion .ac-c-open * {
	font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}
.case .accordion .ac-c .ac-c-inner,
.case .accordion .ac-c-open .ac-c-inner{
	width: 856px;
	margin: 0 auto;
}
.case .accordion .ac-c .ac-c-inner > div,
.case .accordion .ac-c-open .ac-c-inner > div{
	width: 400px;
}
.case .accordion .ac-c .ac-c-inner > div p,
.case .accordion .ac-c-open .ac-c-inner > div p{
	font-size: 14px;
  line-height: 2;
	letter-spacing: .09em;
	
}
.case .accordion .ac-c .ac-c-inner > div .area-m,
.case .accordion .ac-c-open .ac-c-inner > div .area-m{
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
  padding: 20px 0 18px;
  margin: 25px 0 0;
	width: 100%;
}
.case .accordion .ac-c .ac-c-inner > div .area-m p,
.case .accordion .ac-c-open .ac-c-inner > div .area-m p{
	line-height: 1.6;
}
.case .accordion .ac-c .ac-c-inner figure,
.case .accordion .ac-c-open .ac-c-inner figure{
	width: 400px;
}
.case .accordion .ac-c .ac-c-inner .btn_case,
.case .accordion .ac-c-open .ac-c-inner .btn_case{
	width: 340px;
  margin: auto 0 0;
}
.case .accordion .ac-c .ac-c-inner .btn_case a,
.case .accordion .ac-c-open .ac-c-inner .btn_case a{
	display: block;
  text-decoration: none;
  background-color: #ffffff;
  color: #1a1a1a;
  font-size: 18px;
  border: 1px solid #1a1a1a;
  padding: 5px 65px 5px 20px;
  position: relative;
  transition: .3s;
}
.case .accordion .ac-c .ac-c-inner .btn_case a:hover,
.case .accordion .ac-c-open .ac-c-inner .btn_case a:hover{
	opacity: .6;
	transition: .3s;
}
.case .accordion .ac-c .ac-c-inner .btn_case a span,
.case .accordion .ac-c-open .ac-c-inner .btn_case a span{
	position: absolute;
  display: inline-block;
  width: 27px;
  height: 1px;
  top: 50%;
  right: 2%;
  transform: translate(-50%, 100%);
  border-radius: 9999px;
  background-color: #1a1a1a;
  transition: .3s;
}
.case .accordion .ac-c .ac-c-inner .btn_case a:hover span,
.case .accordion .ac-c-open .ac-c-inner .btn_case a:hover span{
  right: 0%;
	transition: .3s;
}
.case .accordion .ac-c .ac-c-inner .btn_case a span:before,
.case .accordion .ac-c-open .ac-c-inner .btn_case a span:before{
  content: "";
  position: absolute;
  top: calc(50% - 1.5px);
  right: 0;
  width: 14px;
  height: 2px;
  border-radius: 9999px;
  background-color: #1a1a1a;
  transform: rotate(45deg);
  transform-origin: calc(100% - 1.5px) 50%;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.case{
		padding: 0 0 14vw;
		margin: 0 0 14vw;
	}
	.case .case-cont-wrap{
	padding: 0;
}
  .case .c-normalw {
    padding: 0 12%;
  }
	.case .case-cont{
		width: auto;
		margin: 0 6vw;
	}
	.case .case-cont + .case-cont{
	  margin: 10vw 6vw 0;
	}
	.concept .accordion .ac-c,
	.concept .accordion .ac-c-open{
	  padding: 6vw 4vw;
	}
	.accordion .ac-h{
	  padding: 2vw 0;
	}
	.accordion .ac-h:before{
    right: 3vw;
    width: 6vw;
    height: 2px;
    top: 25%;
    transform: translateY(0);
	}
	.accordion .ac-h:after{
    height: 6vw;
    right: 6vw;
    width: 2px;
    top: 18%;
    transform: translateY(0);
	}
	.case .accordion .ac-c .ac-c-inner,
	.case .accordion .ac-c-open .ac-c-inner{
		width: auto;
	}
	.case .accordion .ac-c .ac-c-inner > div,
	.case .accordion .ac-c-open .ac-c-inner > div{
		width: auto;
    margin: 0 0 4vw;
	}
	.case .accordion .ac-c .ac-c-inner figure,
	.case .accordion .ac-c-open .ac-c-inner figure{
		width: auto;
	}
	.case .accordion .ac-c,
	.case .accordion .ac-c-open{
		padding: 4vw;
	}
	.accordion .ac-h .ac-h-inner{
	  margin: 0;
    width: auto;
	}
	.accordion .ac-h .ac-h-inner{
		display: block;
    padding: 0 4vw;
	}
	.accordion .ac-h .ac-h-inner div{
    width: 14vw;
	  margin: 0 0 10px;
	}
	.accordion .ac-h .ac-h-inner p {
    width: 80vw;
    font-size: 3.8vw !important;
    text-align: left;
	}
	.case .accordion .ac-c .ac-c-inner > div p,
	.case .accordion .ac-c-open .ac-c-inner > div p{
		font-size: 3.6vw !important;
	}
	.case .accordion .ac-c .ac-c-inner > div .area-m,
	.case .accordion .ac-c-open .ac-c-inner > div .area-m{
	  margin: 4vw 0 8vw;
	}
	.case .accordion .ac-c .ac-c-inner .btn_case,
	.case .accordion .ac-c-open .ac-c-inner .btn_case{
		margin: 4vw 0 0;
		width: auto;
	}
	.case .accordion .ac-c .ac-c-inner .btn_case a,
	.case .accordion .ac-c-open .ac-c-inner .btn_case a{
		display: block;
	}
}



.interview{
	    max-width: 1185px;
	    margin: 90px auto 0;
	gap: 47px;
	background-color: #ffffff;
}
.interview a{
	    flex: 1;
}
.interview div{
	width: 545px;
	padding: 50px 0 0;
}
.interview div h4{
	width: 100px;
	margin: 0 0 30px;
}
.interview div p{
	font-size: 22px !important;
	font-family: YakuHanMP, 'Noto Serif JP', "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", serif !important;
	margin: 0 0 35px;
}
.interview div p.customer{
	font-family: inherit !important;
	font-size: 16px !important;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.interview{
		width: auto;
		        margin: 10vw 6vw 0;
	}
	.interview div{
		    width: auto;
    padding: 6vw 4vw 4vw;
	}
	.interview div h4{
		    width: 20vw;
    margin: 0 0 3vw;
	}
	.interview div p{
		    font-size: 4vw !important;
		    margin: 0 0 4vw;
	}
	.interview div p.customer{
		    font-size: 3.4vw !important;
    margin: 0;
	}
}