@charset "UTF-8";
/* CSS Document */

/*  ---------- 共通 ---------- */
.naturalhouse {
	max-width: 1200px;
	margin: 0 auto;
}
.naturalhouse h2 {
	font-size: 25px !important;
	font-weight: bold !important;
}
.naturalhouse h3 {
	font-size: 140% !important;
	font-weight: bold !important;
	padding:0 !important;
	letter-spacing:0em !important;
	margin-bottom: 1.0em;
}
/*  ---------- main_box ---------- */
.main_box {
	margin: 0 auto 50px !important;
}
.main_box .main_image {
	width:97%;
	min-height:700px;
	background:
	url("/naturalhouse/img/main_imageBg.webp") no-repeat right center/cover;
	position: relative;
	margin-right: 0;
	margin-left: auto;
	margin-bottom:50px;
}
.main_box .main_image h2 {
	font-size: 3.2rem !important;
	position: absolute !important;
	top: 5% !important;
	left: -1em !important;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.main_box ul {
	width:96%;
	padding:50px 0;
	margin:auto;
	display: flex;
	justify-content: space-between;	
}
.main_box ul li:nth-child(1) {
	width: 60%;
}
.main_box ul li:nth-child(1) h2 {
	text-align: left !important;
}
.main_box ul li:nth-child(2) {
	width: 60%;
}

/*  ---------- img_box ---------- */
.img_box {
	padding: 13vh 0;
	background:
	url("/naturalhouse/img/img_box_Bg.jpg") no-repeat center/cover;
	width: 100vw;
  margin: 0 calc(50% - 50vw);
	
}
.img_box .img_boxInner {
    margin: 0 0 0 auto;
	max-width:550px;
    padding: 50px 20px 50px 50px;
    background: rgba(255,255,255,0.9);
	box-sizing:border-box;
}
.img_box .img_boxInner .title{
	float:left;
	margin:0 50px 30px 0;
		-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.img_box .img_boxInner h2 {
	font-size:200% !important;
	text-align: left !important;
	line-height:1em !important;
}
.img_box .img_boxInner h6 {
	display: block;
	font-size: 80%;
	letter-spacing: 0em;
	font-family: 'Jost', sans-serif;
}

/*  ---------- about_box ---------- */
.about_box {
	background: #f9f9f9;
	margin-bottom:150px;
}
.about_box h2 {
	text-align: center !important;
	margin: 70px auto 0 !important;
	border-bottom: 3px solid #fff;
	padding: 60px !important;
}
.about_box ul {
	display: flex;
	justify-content: space-between;
}
.about_box ul li {
	display: flex;
    flex-wrap: wrap;
	width: 50%;
	padding: 3%;	
}
.about_box ul li:nth-child(1) {
	border-right: 3px solid #fff;
}
.about_box ul li dt {
	width: 100%;
	order: 2;
	margin: 0 auto;
	background:#fff;
	padding:20px 20px 10px;
	text-align: center;
	box-sizing:border-box;
}
.about_box ul li dt img {
	width: 450px;
}
.about_box ul li dd {
	order: 1;
	margin-bottom: 2em;
}
.about_box ul li dd h3 {
	text-align: left !important;
}

/*  ---------- ep_box ---------- */
.ep_box {
	margin: 0 auto 80px;
	position:relative;
}
.ep_box h2 {
	font-size:200% !important;
	margin: 0 0 60px 0 !important;
	text-align: left !important;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	position:absolute !important;
	top:-5rem;
	left:1rem;
}
.ep_box dl {
	display: flex;
	justify-content: space-between;
	padding:70px 0;
	margin:0 0 70px 0;
}
.ep_box dl:nth-of-type(1){
	background:
		linear-gradient(90deg,transparent 0%,transparent 70%,#fff 70%,#fff 100%),
		url("https://www.muku.co.jp/naturalhouse/img/naturalhouse_image01.jpg") no-repeat center/cover;
}
.ep_box dl:nth-of-type(2){
	background:
		linear-gradient(90deg,#fff 0%,#fff 30%,transparent 30%,transparent 100%),
		url("https://www.muku.co.jp/naturalhouse/img/naturalhouse_image02.jpg") no-repeat center/cover;
}
.ep_box dl:nth-of-type(3){
	background:
		linear-gradient(90deg,transparent 0%,transparent 70%,#fff 70%,#fff 100%),
		url("https://www.muku.co.jp/naturalhouse/img/naturalhouse_image03.jpg")  no-repeat center/cover;
}
.ep_box dl dd {
	width: 50%;
	padding:40px 10px 40px 40px;
	margin:0 0 0 auto;
	background:#fffe;
	box-sizing:
	border-box;
}
.ep_box dl:nth-of-type(2) dd{
	padding:40px 40px 40px 10px;
	margin:0 auto 0 0;
}
.ep_box dl dd span {
	font-size: 350%;
	line-height: 1em;
	font-weight: lighter;
	color: #ebe6d6;
	font-family: 'Jost', sans-serif;
	text-align:
	right;
}
.ep_box dl dd h3 {
	text-align: left !important;
		-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	float:left;
	margin:0 20px 20px 0;
}
.ep_box dl dd p{
}


/*  ---------- ketsuro_box ---------- */
.ketsuro_box {
	width:96%;
	background: #f9f9f9;
	padding: 40px 3%;
	box-sizing:border-box;
	margin:0 auto 60px;
}
.ketsuro_box h3 {
	font-size:180% !important;
	text-align: left !important;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	float:
	left;
	margin:0 1em 0 0;
}
.ketsuro_box dl {
	width:85%;
	margin:0 0 0 auto;
}
.ketsuro_box dl dt {
	float:left;
}
.ketsuro_box dl dt img {
    width: 400px;
}
.ketsuro_box dl dd {
	width: 100%;
}

/*  ---------- drywood_box ---------- */
.drywood_box {
	width: 96%;
	margin: 0 auto;
}
.drywood_box dl {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}
.drywood_box .drywood_fir dl {
	margin-bottom: 70px;
	padding-bottom: 30px;
	align-items: end;
}
.drywood_box .drywood_fir dl dt{
	height:500px;
	width: 78%;
}
.drywood_box .drywood_fir dl dt img {
	width: 100%;
	height:100%;
	object-fit:cover;
}
.drywood_box .drywood_fir h2 {
	font-size:200% !important;
	text-align: left !important;
	margin: 0;
	line-height:1.5em !important;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.drywood_box .drywood_fir h2 strong {
	font-family: 'Jost', sans-serif;
	font-size: 130%;
	font-weight: bold;
	color: #b24242;
	-webkit-text-combine: horizontal;
	-ms-text-combine-horizontal: all;
	text-combine-upright: all;
	transform:
	scale(1.5, 1.0);
	display:
	inline-block;
}
.drywood_box > .drywood_fir > dt {
	width: 60%;
	height: 500px;
}
.drywood_box .drywood_fir dd {
	width: 49%;
}
.drywood_box .drywood_flex.sec dl {
	padding-bottom: 30px;
	border-bottom: 1px solid #ccc;
}
.drywood_box .drywood_flex.sec dl dt img {
	width: 500px;
}
.drywood_box .drywood_flex.sec dl dd {
	width: 52%;
}
.drywood_box .drywood_flex.thir {
	border-bottom: 1px solid #ccc;
	padding: 30px 0;
}
.drywood_box .drywood_flex.thir dl {
	/* display: flex; */
	/* flex-direction: row-reverse; */
	/* justify-content: space-between; */
}
.drywood_box .drywood_flex.thir dl dt img {
    width: 420px;
}
.drywood_box .drywood_flex.thir dl dd {
	width: 55%;
}
.drywood_box .drywood_flex.thir dl dd h3 {
	text-align:left !important;
}

/*  ---------- merit_box ---------- */
.merit_box{
	margin: 0 auto 180px;
	width: 96%;
	
}
.merit_box h3 {
	font-size: 160% !important;
	font-weight: bold !important;
	margin: 40px auto 0 !important;
	text-align: center;
	letter-spacing: 0em !important;
}
.merit_box h3 span{
	padding:10px 2em 0;
	position: relative;
	display: inline-block;
	background: #f6f4ed;
	border-radius:10px 10px 0 0;
}

.merit_box ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	counter-reset: num;
	margin:0 0 70px 0;
	background: #f6f4ed;
	padding:50px 3%;
}
.merit_box ul li {
	color:#fff;
	width: 48%;
	font-size: 110%;
	font-weight: bold;
	list-style: none;
	padding: 5px 0 5px 2.0em;
	margin: 0 0 0.5em 0;
	background: #b24242;
	counter-increment: num;
	border-radius:20px;
	box-sizing:
	border-box;
}
.merit_box ul li::before {
	font-family: 'Jost', sans-serif;
	font-size:150%;
	display: inline-block;
	margin:0 0.2em 0 0;
	text-indent: 0;
	content: counter(num) '.';
}

/*  ---------- naturalhouse_table ---------- */

.table_box{
	overflow-x: scroll;
}
.naturalhouse_table {
	width: 100%;
}
.naturalhouse_table tr:nth-child(even) {
}
.naturalhouse_table tr th {
	position: relative;
	padding: 10px;
	background: #667196;
	color: #fff;
	font-size: 110%;
	text-align: center;
	font-weight: bold;
	border-right: 5px #fff solid;
}
.naturalhouse_table tr:nth-child(2) th {
	background:#cf674e;
}
.naturalhouse_table tr:nth-child(3) th {
	background:#82a980;
}
.naturalhouse_table tr:nth-child(4) th {
	background:#c4a86a;
}
.naturalhouse_table tr:nth-child(2) td:nth-child(4),
.naturalhouse_table tr:nth-child(3) td:nth-child(4),
.naturalhouse_table tr:nth-child(4) td:nth-child(4){
	background:#fff0e6;
}

.naturalhouse_table tr th::after {
	position: absolute;
	content: '';
	left: 50%;
	bottom: -40px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top: 20px solid #667196;
}
.naturalhouse_table tr:nth-child(n + 2) th::after {
	content:unset;
}
.naturalhouse_table tr:nth-child(1) th:nth-child(1) {
	background: unset;
}
.naturalhouse_table tr th:nth-child(4) {
	background: #b24242;
	border-right: unset;
}
.naturalhouse_table tr th:nth-child(4)::after {
	border-top: 20px solid #b24242;
}
.naturalhouse_table tr td {
	padding: 10px;
	font-weight: bold;
	border: 1px #d9d9d9 solid;
}
.naturalhouse_table tr:nth-child(2) td {
	padding: 20px 10px 10px;
}
/*  ---------- demerit_box ---------- */
.demerit_box {
	background: #f5f5f5;
	padding: 50px 3%;
	margin-bottom: 180px;
}
.demerit_box .Intro{
	margin-bottom:50px;
}
.demerit_box .Intro h2 {
	text-align: left !important;
	margin-right:2em !important;
	margin-bottom: 1em !important;
	float:left;
	padding:20px;
	line-height:1.5em !important;
	border-top:1px solid #666;
	border-bottom:1px solid #666;
	border-radius:0px;
}
.demerit_box .Intro h3 {
	text-align: left !important;
}
.demerit_box .Intro h3 {
	font-size:130% !important;
}
.demerit_box .Intro h3 span{
	background:#fff;
	padding:5px 30px;
	border-radius:150px;
}
.demerit_box .concl{
	padding:40px 5%;
	background:#fff;
	box-shadow:3px 3px 5px #aaa;
	border-radius:20px;
}
.demerit_box .concl h3{
	width:100%;
	color:#fff;
	background:#b24242;
	border-radius:5px;
	display: inline-block;
    padding: 0.4em 0.8em !important;
	text-align:center;
	box-sizing:border-box;
}
.demerit_box .concl p{
}



/*  ---------- point_box ---------- */
.point_box {
	margin:0 0 180px 0;
}
.point_box h2 {
	text-align: left !important;
	margin:0 3em 0 1em !important;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	float:
	left;
}
.point_box dl {
	display:flex;
	justify-content:space-between;
}
.point_box dd {
	width:48%;
	background:#f6f4ed;
	padding:20px;
	box-sizing:border-box;
}
.point_box dd div{
	height: 300px;
	margin:0 0 10px 0;
}
.point_box dd div img {
	width: 100%;
    height: 100%;
    object-fit: cover;
}
.point_box dd h3 {
	text-align: left !important;
	margin-bottom: 0.5em;
}


/*  ---------- closing ---------- */
.closing{
	margin:0 0 200px 0;
}
.closing ul{
	width:100%;
	position:relative;
}
.closing ul dl {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}
.closing ul dl dt{
	width:80%;
	/* float:left;
	margin:0 0 20px 0; */
	box-sizing:
	border-box;
	height: auto;
}
.closing ul dl dt img{
	width:100%;
	height: 100%;
	object-fit: cover;
}
.closing ul dl dd{
	width: 20%;
	background:#f6f4ed;
}
.closing ul dl h6{
	font-size: 150%;
	font-weight:bold;
	padding:30px;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	box-sizing:border-box;
	margin: auto;
	/* display:table-cell;
	vertical-align:middle; */
	
}
.closing ul dl h6 span{
	display:block;
}

.closing ul p{
	clear: left;
	width:96%;
	margin:
	auto;
}


@media screen and (max-width: 1200px) {
	.ep_box h2 {
		margin: 90px 0 60px 20px !important;
	}
	.drywood_box {
		width:96%;
		margin: 0 auto;
	}
	.point_box {
		width:96%;
		margin: 0 auto 180px;
	}
	.merit_box {
		width:96%;
	}
}

@media screen and (max-width: 959px){
	.main_box .main_image {
		width:93%;
		height:70vh;
		min-height:600px;
	}
	.main_box .main_image h2 {
		font-size: 2.8rem !important;
			left: -0.9em !important;
	}
	.img_box .img_boxInner {
		margin: 0 auto;
	}
	.gansuiritsu2_table {
		font-size: 70%;
		width: 100%;
		margin: 30px auto 0 auto;
	}
	.point_box h2 {
		margin:0 1em 0 1em !important;
	}
}
@media screen and (min-width:769px) and ( max-width:959px) {
	.about_box ul li dt img {
		width: 360px;
	}
}
@media screen and (max-width: 768px){
	.about_box ul {
		display: block;
		justify-content: unset;
	}
	.about_box ul li {
		width: unset;
		padding: 50px 3%;
	}
	.about_box ul li:nth-child(1) {
		border-right: unset;
		border-bottom: 3px solid #fff;
	}
	.ketsuro_box dl {
		width: unset;
		display: block;
		justify-content: unset;
	}
	.ketsuro_box dl dt {
		float: unset;
		margin: 0 auto 2em;
		text-align: center;
	}
	.ketsuro_box dl dd {
		width: unset;
	}
	.drywood_box .drywood_flex dl {
		display: block;
		justify-content: unset;
	}
	.drywood_box .drywood_flex dl dt {
		text-align: center;
		margin-bottom: 2em;
	}
	.drywood_box .drywood_flex dl dd {
		width: unset !important;
	}
	.drywood_box .drywood_flex.sec dl dt img {
		width: 90%;
	}
	.drywood_box .drywood_flex.thir dl dt img {
	    width: 90%;
	}
	.demerit_box .Intro h2 {
		margin-right: unset !important;
		float: unset;
	}
	.merit_box ul {
		display: block;
		flex-wrap: unset;
		justify-content: unset;
		padding:20px 3%;
	}
	.merit_box ul li {
		width: unset;
	}
	.point_box h2 {
		-ms-writing-mode: unset;
		writing-mode: unset;
		float: unset;
		margin: 0 0 1em !important;
	}
	.point_box dl {
		display: block;
		justify-content: unset;
	}
	.point_box dd div {
		height: 330px
	}
	.point_box dd {
		width: unset;
		padding: 3%;
		margin-bottom: 1.5em;
	}
}

@media screen and (max-width: 599px){
	.main_box .main_image h2 {
		font-size: 2.5rem !important;
	}
	.main_box .main_image {
		height: 60vh;
		min-height:500px;
		margin-bottom: unset;
	}
	.naturalhouse h2 {
		font-size:170% !important;
	}
	.naturalhouse h3 {
		font-size:140% !important;
		line-height:1.8em !important;
	}
	.img_box .img_boxInner h2 {
	}
	.main_box .main_image {
	}
	.main_box .main_image h2 {
	}
	.main_box ul {
		display: block;
		justify-content: unset;
		padding: 50px 0 0;
	}
	.main_box ul li:nth-child(1) {
		width: unset;
	}
	.main_box ul li:nth-child(1) h2 {
		text-align: left !important;
		margin-bottom: 0.5em;
	}
	.main_box ul li:nth-child(2) {
		width: unset;
	}
	.main_box ul li:nth-child(2) p {
		width: unset;
	}

	.img_box .img_boxInner {
		width: 90%;
		padding: 40px 3%;;
	}
	.img_box .img_boxInner .title {
	}
	.ep_box h2 {
		writing-mode: unset;
		position: unset !important;
		margin: 0 0 1em 20px !important;
	}
	.ep_box dl{
		margin:0 0 10px 0;
	}
	.ep_box dl:nth-of-type(1) {
		background: url(https://www.muku.co.jp/naturalhouse/img/naturalhouse_image01.jpg) no-repeat center/cover;
	}
	.ep_box dl:nth-of-type(2) {
		background: url(https://www.muku.co.jp/naturalhouse/img/naturalhouse_image02.jpg) no-repeat center/cover;
	}
	.ep_box dl:nth-of-type(3) {
		background: url(https://www.muku.co.jp/naturalhouse/img/naturalhouse_image03.jpg) no-repeat center/cover;
	}
	.ep_box dl dd {
		width: 90%;
		padding: 40px 3% !important;
		margin:0 auto !important;
	}
	.ep_box dl dd h3 {
		-ms-writing-mode: unset;
		writing-mode: unset;
		float: unset;
	}
	.about_box h2 {
		text-align: center !important;
		margin: 70px auto 0 !important;
		border-bottom: 3px solid #fff;
		padding: 60px 0!important;
	}
	.about_box ul li dt img {
		width: 100%;
	}

	.ketsuro_box h3 {
		font-size:160% !important;
		-ms-writing-mode: unset;
		writing-mode: unset;
		float: unset;
	}

	.drywood_box dl {
		display: flex;
		flex-direction: column;
		justify-content: unset;
	}
	.drywood_box .drywood_fir h2 strong {
		display: unset;
	}
	.drywood_box .drywood_fir dl {
		align-items: unset;
	}
	.drywood_box .drywood_fir dl dt {
		height: 350px;
		width: unset;
		order: 2;
	}
	.drywood_box .drywood_fir h2 {
		font-size:170% !important;
		-ms-writing-mode: unset;
		writing-mode: unset;
		order: 1;
		margin-bottom: 1em;
	}

	.drywood_box .drywood_flex.sec dl dt img {
	}
	.drywood_box .drywood_flex.thir dl dt img {
	    width: 100%;
	}
	.merit_box h3 span {
		padding:0.5em 1em 0;
		line-height:1.3em !important;
	}
	.naturalhouse_table tr th {
	    font-size: 110%;
	}
	.naturalhouse_table {
		width:100%;
		/* min-width: 600px; */
	}
	.point_box h2{
		font-size:150% !important;
	}

	.point_box .closing {
		font-size: 100%;
		padding-top: 0;
	}
	.closing dl{
		display: flex;
		flex-direction: column;
	}
	.closing ul dl dd {
		width: unset;
		background: #f6f4ed;
	}
	.closing ul dl dt {
		width: unset;
		order: 2;
	}
	.closing ul dl h6 {
		font-size: 20px;
		width: unset;
		padding: 1em 0 1em 2%;
		-ms-writing-mode: unset;
		writing-mode: unset;
		vertical-align: unset;
		order: 1;
	}
}
@media screen and (max-width: 420px){
	.about_box ul li dt img {
		width: 360px;
	}
	.ketsuro_box dl dt img {
		width: 350px;
	}
	.drywood_box .drywood_flex.sec dl dt img {
		width: 360px;
	}
	.drywood_box .drywood_flex.thir dl dt img {
		width: 340px;
	}
	
}