@charset "utf-8";

.main_box, .sub_main {
	max-width: 100%;
}

/*メインビジュアル*/
section#main_v {
	background: url(/company/img/modelhouse/hokuovillage/main_v_bg.webp) no-repeat center,#fff;
	background-size:cover;
	margin-bottom:20px;
	aspect-ratio: 2 / 1;
}

/*ep*/
section#ep{
	background:#f9f9f9;
	padding:150px 0;
}
section#ep ol{
	max-width:800px;
	margin:0 auto;
	box-sizing:border-box;
}
section#ep ol dl{
	margin-bottom:80px;
	display:flex;
	flex-direction: row-reverse;
}
section#ep ol dl dt {
	width:50%;
	margin:auto;
}
section#ep ol dl dt img{
	width:100%;
	max-height:300px;
}
section#ep ol dl dd{
	width:50%;
	margin:auto;
}
section#ep ol dl dd h5{
	font-size:250%;
	display:block;
	margin:0 auto;
	padding:20px;
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
section#ep ol dl dd h5 span{
	font-size:110%;
}
section#ep ol p{
	width:90%;
	margin:auto;
}

section.model_house .flex_top h5{
	font-size: 140% !important;
	line-height: 1.5em;
	margin-bottom: 1em;
}
section.model_house .flex_top h5 span{
	display: block;
	font-size: 1rem !important;
	font-family: 'Jost', sans-serif;
}
section.model_house .flex_top h5 span em{
	margin-left: 0.2em;
	font-size: 160%;
}

@media screen and (max-width:959px) {
}

@media screen and (max-width:768px) {
	section#ep ol dl{
		display:unset;
		flex-direction:unset;
	}
	section#ep ol dl dt {
		width:100%;
		margin:auto;
	}
	section#ep ol dl dt img{
		width:100%;
		max-width:300px;
		display:block;
	}
	section#ep ol dl dd h5{
		width:8em;
		font-size:180%;
		display:block;
		margin:20px auto;
		padding:unset;
	}
	section.model_house .flex_top {
		display: unset;
		height:60vh;
		min-height:600px;
		margin-bottom:0px;
	}
	section.model_house  .paushouse .flex_top h4{
		padding: 0 0 5px 0;
		margin: 20px auto 10px;
		position: inherit;
		width: 96%;
	}
	section.model_house .flex_top .text p{
        width:100%;
        margin:auto;		
	}
	section.model_house  .paushouse .flex_top > div:last-child {
		margin-left: 0;
		margin-right:0;
	}
	section.model_house .flex_top h4{
		font-weight: normal !important;
		text-align: left;
		color: #000000;
		font-family: 'Jost', sans-serif;
		font-size: 3rem !important;
		letter-spacing: 0em;
		line-height:1em;
		margin-bottom:0.5em!important;
	}
	section.model_house .flex_bottom {
		margin:auto;
	}
	section#contents {
		width: 96%;
		position:relative;
		background:#f9f9f9;
		padding:40px 2%;;
		box-sizing:border-box;
		margin:0 auto 50px;
	}
	section#contents > ul {
		width:100%;
		display: flex;
		flex-wrap:wrap;
		margin-left:auto !important;
		margin-right:auto !important;
	}
	section#contents h3{
		height:unset;
		font-family: 'Jost', sans-serif !important;
		font-size:300% !important;
		font-weight:normal !important;
		line-height:1em !important;
		text-align:left !important;
		margin:0 0 1em 0!important;
		-ms-writing-mode:unset ;
		writing-mode:unset ;
		position:unset !important;
		top:unset ;
		left:unset;
	}
}

@media screen and (max-width:599px) {
	section#main_v {
	}
	
    section#ep ol dl dt {
		width:100%;
		margin:auto;
	}
	section#ep ol dl dt img{
		width:40%;
		display:block;
	}
	section.model_house .flex_bottom ul dl{
		display: block;
		justify-content: unset;
		align-items: unset;
	}
	section.model_house .flex_bottom ul dl:nth-child(2),
	section.model_house .flex_bottom ul dl:nth-child(4){
		flex-direction: row-reverse;
	}
	section.model_house .flex_bottom ul dl dt{
		width: unset;
		height: 300px;
		margin-bottom: 0.5em;
	}
	section.model_house .flex_top h4{
	}
	section#contents > ul {
		width:100%;
		display: unset;
		flex-wrap:unset;
		margin-left:auto !important;
		margin-right:auto !important;
	}
	section#contents > ul li{
		width:100%;
		margin-bottom:70px;
	}
	section#contents > ul li:last-child{
		margin-bottom:0px;
	}
}

@media screen and (max-width:520px) {
	section#ep ol dl dd{
		width:100%;
		margin:auto;
	}
}