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

	- #main_img
	- notes

-----------------------------------------*/

:root {
	--main_color: #2b665e;
}
.w1000 {
	max-width: 1000px;
	margin: 0 auto;
	width: 90%;
}
.w1200 {
	max-width: 1200px;
	margin: 0 auto;
	width: 90%;
}
.w1600 {
	max-width: 1600px;
	margin: 0 auto;
	width: 90%;
}

/*============================
共通
============================*/
#ecology h3,
#security h3,
#structure h3,
#comfortable h3 {
    margin-bottom: 80px;
    font-size: 24px;
    text-align: center;
}

@media screen and (max-width: 768px) {
#ecology h3,
#security h3,
#structure h3,
#comfortable h3 {
    margin-bottom: 40px;
    font-size: 18px;
}
}


.caption{
	font-size: 12px;
}

/*=======================================
	base
=======================================*/
/* html */
html{
	scroll-behavior: smooth;
	}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
img,
figure,
picture {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
ul,
li {
	list-style: none;
}
a {
	text-decoration: none;
	opacity: 1;
	transition: all 0.3s ease;
}
@media (hover: hover) {
	a:hover {
		opacity: 0.8;
	}
}


/*============================
#main_img
============================*/
#main_img {
	background: url("../img/quality/main_img.jpg") no-repeat;
	background-size: cover;
	margin-bottom: 80px;
	position: relative;
}
#main_img::before {
	content: "";
	position: absolute;
	top: 50%;
	-webkit-transform : translateY(-50%);
	transform : translateY(-50%);
	left: 0;
	background: rgb(0 0 0 / 29%);
	width: 450px;
	height: 172px;
	mix-blend-mode: multiply;
}
@media only screen and (max-width: 768px){
#main_img {
	margin-bottom: 40px;
}
#main_img::before {
	width: 200px;
	height: 90px;
}
}


/*============================
画像コーディング
============================*/

.d_bg{
	background: #1f423e;
}

.img_max {
	width: 100%;
}

/*============================
quality_navi
============================*/

.quality_navi{
	display: flex;
	gap: 2%;
	justify-content: space-between;
	margin: 0 0 90px 0;
}
.quality_navi li{
	width: 20%;
	background: #d9efed;
	text-align: center;
}
.quality_navi li a{
	padding: 20px 0;
	display: block;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}
.quality_navi li a:hover{
	opacity: 0.7;
}
.quality_navi li.active {
	background: #356c67;
}
.quality_navi li.active a{
	color: #FFF;
	text-decoration: none;
}
@media screen and (max-width: 768px) {
	.quality_navi{
		flex-wrap: wrap;
		justify-content: left;
	}
	.quality_navi li{
		width: 31.2%;
		margin: 0 0 10px 0;
		border: #f1f1f1 1px solid;

	}
}

/*============================
notes
============================*/
.notes {
	margin-bottom: 140px;
}
@media only screen and (max-width: 768px){
.notes {
	margin-bottom: 70px;
}
}


/*============================
equipment
============================*/



/* サブボタン */
#equipment .sub_navi {
	padding-bottom: 63px;
	max-width: 1200px;
	margin: -100px auto 0;
	padding-top: 100px;
	}

	#equipment .sub_navi ul {
	text-align: center;
	padding: 10px;
}

#equipment .sub_navi ul li {
	display: inline-block;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	box-sizing: border-box;
}
#equipment .sub_navi ul li:not(:last-child) {
	border-right: 1px solid #444444;
}

#equipment .sub_navi ul li a {
	color: #366c66;
	font-size: 20px;
	display: block;
	letter-spacing: 0.1em;
	padding: 5px 32px;
	text-decoration: none;
	position: relative;
}
#equipment .sub_navi ul li.active a {
	color:#be934f ;
}


#equipment .sub_navi ul li a:hover {
	opacity: 0.6;
}

#equipment .sub_navi ul li.active a:hover {
	opacity: 1.0;
}



@media screen and (max-width: 768px) {
	#equipment .sub_navi {
		margin-top: -140px;
    padding-top: 140px;
    padding-bottom: 35px;
	}
	#equipment .sub_navi ul {
		margin-right: 2%;
		margin-left: 2%;
		padding: initial;
	}
	#equipment .sub_navi ul li {
		display: inline-block;
		width: 47%;
		margin-right: 1%;
		margin-left: 1%;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		margin-bottom: 2%;
	}

	#equipment .sub_navi ul li:nth-of-type(1) {
  position: relative;
	border-left: 1px solid #444444;
	}


	#equipment .sub_navi ul li:nth-of-type(1)::after {
		content: "";
    position: absolute;
    width: 88%;
    height: 0;
    border-bottom: 1px solid #444444;
    bottom: -5px;
    left: 6%;
	}


	#equipment .sub_navi ul li:nth-of-type(2) {
		position: relative;
	}


	#equipment .sub_navi ul li:nth-of-type(2)::after {
		content: "";
		position: absolute;
		width: 88%;
		height: 0;
		border-bottom: 1px solid #444444;
		bottom: -5px;
		left: 2%;
	}


	#equipment .sub_navi ul li a {
		font-size: 13px;
		display: block;
		padding: 8px 0;
		text-decoration: none;
	}

	#equipment .sub_navi ul li.active a:before {
    bottom: 2px;
    height: 1px;
		left: 13px;}

	#equipment .sub_navi ul li:nth-of-type(3) {
		border-left: 1px solid #444444;
		}

	#equipment .sub_navi ul li:nth-of-type(5) {
		border-left: 1px solid #444444;
		border-right: 1px solid #444444;
		}
	}


/* タイトル */

#equipment .main_ttl{
	font-size: 33px;
	line-height: 1.2;
	text-align: center;
	color: #837a50;
	margin-bottom: 68px;
}

#equipment .sec_ttl{
	font-size: 32px;
	letter-spacing: 0.1em;
text-align: center;
color: #be934f;
margin-bottom: 65px;
font-family: 'Bellefair',	'Shippori Mincho', serif;
}
#equipment .sec_ttl::after{
	display: block;
	position: relative;
	content: "";
	width: 95px;
	height: 1px;
	left: 50%;
	bottom: -10px;
	transform: translate(-50%, 0);
	background-color: #be934f;
}

@media screen and (max-width: 768px) {
	#equipment .main_ttl{
		font-size: 20px;
		margin-bottom: 34px;
		line-height: 1.4;
	}

#equipment .sec_ttl{
	font-size: 23px;
margin-bottom: 26px;
}
#equipment .sec_ttl{
margin-bottom: 45px;
}
#equipment .sec_ttl::after{
	bottom: -5px;
}

}




/* equipment　共通 */
#equipment .box_ttl{
	font-size: 18px;
	color:#be934f ;
	letter-spacing: 0.075em;
	margin: 22px 0 11px;
}

#equipment .equipment_box{
	margin-bottom: 25px;
}
#equipment .equipment_box .image{
	position: relative;
}
#equipment .equipment_box .image .img_cap{
	position: absolute;
	right: 5px;
	bottom: 5px;
	font-size: 12px;
}
#equipment .equipment_box .image .img_cap.white{
	color: #fff;
}
#equipment .copy {
	font-size: 24px;
	text-align: center;
	margin-bottom: 50px;
}


@media screen and (max-width: 768px) {
	#equipment .box_ttl{
		font-size: 16px;
		margin: 11px 0 6px;
		}
		#equipment .equipment_box{
			margin-bottom: 23px;
		}

	#equipment .indent{
		padding-left: 1em;
		text-indent: -1em;
		margin-left: 5px;
	}
	#equipment .copy {
		font-size: 18px;
		text-align: center;
		margin-bottom: 25px;
	}

}



	/* kitchen */
	#equipment .kitchen{
		margin-bottom: 87px;
	}

#equipment .kitchen .kitchen_container{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
#equipment .kitchen .kitchen_container .kitchen_right{
	width: 63%;
}


#equipment .kitchen .kitchen_container .equipment_box{
	margin-bottom: 30px;
}
#equipment .kitchen .kitchen_container .equipment_box:first-of-type{
	width: 100%;
}

#equipment .kitchen .kitchen_container2{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

#equipment .kitchen .kitchen_container2 .equipment_box{
	width: calc( ( 100% - 60px ) / 3 );
}

@media screen and (max-width: 768px) {
	#equipment .kitchen{
		margin-bottom: 44px;
	}

#equipment .kitchen .kitchen_container{
flex-direction: column;
	gap: initial;
}
#equipment .kitchen .kitchen_container .kitchen_right{
	display: flex;
	gap: 15px;
	width: 100%;
}

#equipment .kitchen .kitchen_container .kitchen_right .equipment_box{
	width: calc( ( 100% - 15px ) / 2 );
}

#equipment .kitchen .kitchen_container .equipment_box{
	margin-bottom: 23px;
}

#equipment .kitchen .kitchen_container2{
	gap: 15px;
}
#equipment .kitchen .kitchen_container2 .equipment_box{
	width: calc( ( 100% - 15px ) / 2 );
}
}


/*POWDER ROOM  */
#equipment .powder{
	margin-bottom: 154px;
}

#equipment .powder .powder_container{
	display: flex;
	gap: 30px;
}

#equipment .powder .powder_container .powder_left{
	max-width: 585px;
	width: 50%;
}

#equipment .powder .powder_container .powder_right{
	max-width: 585px;
	width: 50%;
}

#equipment .powder .powder_container2{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
#equipment .powder .powder_container3{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

#equipment .powder .powder_container2 .equipment_box{
	width: calc( ( 100% - 90px ) / 4 );
}

#equipment .powder .powder_container3 .equipment_box{
	width: calc( ( 100% - 30px ) / 2 );
}

#equipment .powder .sub_ttl{
	font-size: 20px;
	color: #8b8158;
	text-align: center;
	letter-spacing: 0.075em;
	margin-bottom: 16px;
}

#equipment .powder .toilet_container{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

#equipment .powder .toilet_container .equipment_box{
	width: calc( ( 100% - 60px ) / 3 );
}

@media screen and (max-width: 768px) {
	#equipment .powder{
		margin-bottom: 80px;
	}

	#equipment .powder .powder_container{
		flex-direction: column;
		gap: initial;
	}
	#equipment .powder .powder_container .powder_left{
		max-width: 100%;
		width: 100%;
	}

	#equipment .powder .powder_container .powder_right{
		max-width: 100%;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
	}
	#equipment .powder .powder_container .powder_right .equipment_box{
		width: calc( ( 100% - 15px ) / 2 );
		}
		#equipment .powder .powder_container2 {
		gap: 15px;
		}
		#equipment .powder .powder_container3 {
		gap: 15px;
		}

		#equipment .powder .powder_container2 .equipment_box{
			width: calc( ( 100% - 15px ) / 2 );
		}
	#equipment .powder .sub_ttl{
		font-size: 18px;
	}
	#equipment .powder .toilet_container{
		gap: 15px;
	}
	#equipment .powder .toilet_container .equipment_box{
		width: calc( ( 100% - 15px ) / 2 );
	}
	#equipment .powder .powder_container .powder_right > .equipment_box{
		width: 100%;
	}
	#equipment .powder .powder_container  .powder_right > .equipment_box{
		width: 100%;
	}
}




/* BATH ROOM */
#equipment .bath{
	margin-bottom: 154px;
}
#equipment .bath .mgb10{
	margin-bottom: 10px;
}

#equipment .bath .bath_container{
	display: flex;
	gap: 30px;
}

#equipment .bath .bath_container .bath_left{
	max-width: 585px;
	width: 50%;
}
#equipment .bath .bath_container .bath_right{
	max-width: 585px;
	width: 50%;
}

#equipment .bath .bath_container .bath_right .bath_container3:first-child .box_ttl{
	margin-top: 0;
}

#equipment .bath .bath_container2{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
#equipment .bath .bath_container3{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

#equipment .bath .bath_container2 .equipment_box{
	width: calc( ( 100% - 90px ) / 4 );
}

#equipment .bath .bath_container3 .equipment_box{
	width: calc( ( 100% - 30px ) / 2 );
}

#equipment .bath .sub_ttl{
	font-size: 20px;
	color: #8b8158;
	text-align: center;
	letter-spacing: 0.075em;
	margin-bottom: 16px;
}

#equipment .bath .toilet_container{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

#equipment .bath .toilet_container .equipment_box{
	width: calc( ( 100% - 60px ) / 3 );
}

@media screen and (max-width: 768px) {
	#equipment .bath{
		margin-bottom: 80px;
	}

	#equipment .bath .bath_container{
		flex-direction: column;
		gap: initial;
	}
	#equipment .bath .bath_container .bath_left{
		width: 100%;
	}
	#equipment .bath .bath_container .bath_right{
		width: 100%;
		max-width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
	}
	#equipment .bath .bath_container .bath_right .equipment_box{
		width: calc( ( 100% - 15px ) / 2 );
		}
		#equipment .bath .bath_container2 {
		gap: 15px;
		}

		#equipment .bath .bath_container2 .equipment_box{
			width: calc( ( 100% - 15px ) / 2 );
		}
		#equipment .bath .bath_container3{
			gap: 0 15px;
		}

		#equipment .bath .bath_container3 .equipment_box{
			width: calc( ( 100% - 15px ) / 2 );
		}
		#equipment .bath .bath_container3 .equipment_box img{
			width: 100%;
		}
	#equipment .bath .bath_container3:first-child .equipment_box{
		width: 100%;
	}
	#equipment .bath .sub_ttl{
		font-size: 18px;
	}
	#equipment .bath .toilet_container{
		gap: 15px;
	}
	#equipment .bath .toilet_container .equipment_box{
		width: calc( ( 100% - 15px ) / 2 );
	}
}


/* storage */
#equipment .storage  {
	margin-bottom: 154px;
}

#equipment .storage .storage_container{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

#equipment .storage .storage_container .equipment_box{
	width: calc( ( 100% - 60px ) / 3 );
}

@media screen and (max-width: 768px) {
	#equipment .storage  {
		margin-bottom: 80px;
	}
	#equipment .storage .storage_container{
		gap: 15px;
	}
	#equipment .storage .storage_container .equipment_box{
		width: calc( ( 100% - 15px ) / 2 );
	}
}

/* others */


#equipment .others {
	margin-bottom: 100px;
}
#equipment .others .others_container{
	display: flex;
	gap: 30px;
}
#equipment .others .others_wrap{
	width: calc((100% - 120px) / 5 * 2 + 30px);
}
#equipment .others .others_wrap2{
	width: calc((100% - 120px) / 5);
}
#equipment .others .others_wrap .cate_ttl{
	display: flex;
	align-items: center;
	font-size: 18px;
	color: #be934f;
	font-family: 'Bellefair',	'Shippori Mincho', serif;
	margin-bottom: 5px;
}
#equipment .others .others_wrap2 .cate_ttl2{
	font-size: 18px;
	color: #be934f;
	font-family: 'Bellefair',	'Shippori Mincho', serif;
	margin-bottom: 5px;
}
#equipment .others .others_container2{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
#equipment .others .others_wrap .cate_ttl::after{
	position: relative;
	display: block;
  content: "";
  background-color: #be934f;
  flex-grow: 1;
  height: 1px;
	margin-left: 10px;
}
#equipment .others .others_container .equipment_box{
	width: calc( ( 100% - 30px ) / 2 );
}
#equipment .others .others_container .others_wrap2 .equipment_box{
	width: 100%;
}

@media screen and (max-width: 768px) {
	#equipment .others {
	margin-bottom: 50px;
}
	#equipment .others .others_container{
		flex-wrap: wrap;
		gap: 15px;
	}
	#equipment .others .others_container2{
		gap: 15px;
	}
	#equipment .others .others_wrap{
		width: 100%;
	}
	#equipment .others .others_wrap2{
		width: 50%;
	}
	#equipment .others .others_container .equipment_box{
		width: calc( ( 100% - 15px ) / 2 );
	}
	#equipment .others .others_wrap2 .cate_ttl2{
		display: flex;
		align-items: center;
	}
	#equipment .others .others_wrap2 .cate_ttl2::after{
		position: relative;
		display: block;
		content: "";
		background-color: #be934f;
		flex-grow: 1;
		height: 1px;
		margin-left: 10px;
	}
	#equipment .others .others_wrap2.order3{
		order:3;
	}
}


/*============================
security
============================*/
/*securityボックス共通*/
#security .security_box .image {
	margin-bottom: 10px;
}
#security .security_box span {
	font-size: 12px;
}

/*container1*/
#security .security_container1 {
display: flex;
gap: 30px;
	margin-bottom: 40px;
}
#security .security_container1 .security_box:nth-child(1) {
width: 77.5%;
}
#security .security_container1 .security_box:nth-child(2) {
width: 20.58333%;
}

/*container2*/
#security .security_container2 {
display: flex;
gap: 30px;
	margin-bottom: 55px;
}
#security .security_container2 .security_box {
	margin-bottom: 40px;
}
#security .security_container2  .security_left {
width: 33.3333%;
}
#security .security_container2  .security_right {
width: 67%;
}
#security .security_container2 .security_box.flex {
display: flex;
gap: 20px;
margin-bottom: 0;
}
#security .security_container2 .security_box.flex .security_box {
width: calc( ( 100% - 10px ) / 2 );
}
#security .security_container2 {
display: flex;
gap: 30px;
	margin-bottom: 55px;
}


/*container3*/
#security .security_container3 {
display: flex;
	justify-content: space-between;
gap: 30px;
margin-bottom: 55px;
}
#security .security_container3 .security_box {
	margin-bottom: 40px;
}
#security .security_container3  .security_left {
width: 65%;
flex-wrap: wrap;
display: flex;
gap: 30px 60px;
}
#security .security_container3  .security_left  .security_box {
width: calc( ( 100% - 60px ) / 2 );
display: flex;
	flex-direction: column;
flex-wrap: wrap;
}
#security .security_container3  .security_right {
width: 30%;

}


/*container4*/
#security .security_container4 {
	margin-bottom: 165px;
display: flex;
gap: 30px;
}
#security .security_container4  .security_box {
width: calc( ( 100% - 30px ) / 3 );
}

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

/*securityボックス共通*/
#security .security_box .image {text-align: center;}
#security .security_box span {
	font-size: 12px;
}

/*container1*/
#security .security_container1 {
display: block;
}
#security .security_container1 .security_box:nth-child(1) {
width: auto;
margin-bottom: 20px;
}
#security .security_container1 .security_box:nth-child(2) {
width: auto;
text-align: center;
}

/*container2*/
#security .security_container2 {
display: flex;
gap: 30px;
	margin-bottom: 55px;
}
#security .security_container2 .security_box {
	margin-bottom: 20px;
}
#security .security_container2  .security_left {
width: auto;
margin-bottom: 30px;
}
#security .security_container2  .security_right {
width: auto;
}
#security .security_container2 .security_box.flex {
display: block;
}
#security .security_container2 .security_box.flex .security_box {
width: auto;
}
#security .security_container2 {
display: block;
margin-bottom: 40px;
}


/*container3*/
#security .security_container3 {
display: block;
margin-bottom: 40px;
}
#security .security_container3 .security_box {
	margin-bottom: 20px;
}
#security .security_container3  .security_left {
width: auto;
gap:15px;
}
#security .security_container3  .security_left  .security_box {
width: auto;
display: block;
width: calc( ( 100% - 15px ) / 2 );
}
#security .security_container3  .security_right {
width: auto;
}


/*container4*/
#security .security_container4 {
	margin-bottom: 60px;
flex-wrap: wrap;
gap:15px;
}
#security .security_container4  .security_box {
width: auto;
margin-bottom: 20px;
width: calc( ( 100% - 15px ) / 2 );
}

}



/*タイトル*/
#security .box_ttl1 {
	font-size: 18px;
	color:#be934f;
	letter-spacing: 0.075em;
	margin: 0 0 15px;
	padding: 0 0 11px;
	border-bottom: solid 1px #be934f;
}
#security .box_ttl2 {
	background-color: #595757;
	font-size: 18px;
	color:#fff;
	letter-spacing: 0.075em;
	margin: 0 0 12px;
	padding: 5px 10px 7px;
}
#security .box_ttl3 {
	font-size: 18px;
	color:#be934f;
	letter-spacing: 0.075em;
	margin: 0 0 12px;
}

@media screen and (max-width: 768px) {
#security .box_ttl1 {
	font-size: 16px;
	margin: 0 0 10px;
	padding: 0 0 10px;
}
#security .box_ttl2 {
	font-size: 16px;
	margin: 0 0 10px;
	padding: 5px 7px 6px;
}
#security .box_ttl3 {
	font-size: 16px;
	margin: 0 0 10px;
}
}







/*============================
structure
============================*/
/*共通*/
#structure .structure_box .image {
text-align:center;
	margin-bottom: 25px;
}
#structure .structure_box span {
	font-size: 12px;
}

/*structure_container1*/
#structure .structure_container1 {
	margin-bottom: 165px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
#structure .structure_container1  .structure_box {
width: calc( ( 100% - 60px ) / 3 );
}

#structure .structure_container1 {
	margin-bottom: 45px;
	display: flex;
	flex-wrap: wrap;
	gap: 50px 30px;
}
#structure .structure_container1  .structure_box {
width: calc( ( 100% - 60px ) / 3 );
}

/*structure_container2*/
#structure .structure_container2 {
	margin-bottom: 60px;
	display: flex;
	gap: 75px;
}
#structure .structure_container2  .structure_left,
#structure .structure_container2  .structure_right {
width: calc( ( 100% - 60px ) / 2 );
}
#structure .structure_container2  .structure_box {
margin-bottom:40px;
}
#structure .structure_container2  .structure_box p {
margin-bottom:40px;
}

@media screen and (max-width: 768px) {
/*共通*/
#structure .structure_box .image {
margin-bottom: 20px;
}
#structure .structure_box span {
	font-size: 12px;
}

/*structure_container1*/
#structure .structure_container1  .structure_box {
width: auto;
}
#structure .structure_container1 {
	margin-bottom: 40px;
	flex-direction: column;
}
/*structure_container2*/
#structure .structure_container2 {
	margin-bottom: 40px;
	flex-direction: column;
	gap: 30px;
}
#structure .structure_container2  .structure_left,
#structure .structure_container2  .structure_right {
width: auto;
}
#structure .structure_container2  .structure_box {
margin-bottom:30px;
}
#structure .structure_container2  .structure_box p {
margin-bottom:20px;
}
}


/*タイトル*/
#structure .box_ttl1 {
	font-size: 18px;
	color:#be934f;
	letter-spacing: 0.075em;
	margin: 0 0 15px;
	padding: 0 0 11px;
	border-bottom: solid 1px #be934f;
}
@media screen and (max-width: 768px) {
#structure .box_ttl1 {
	font-size: 18px;
	color:#be934f;
	letter-spacing: 0.075em;
	margin: 0 0 15px;
	padding: 0 0 11px;
	border-bottom: solid 1px #be934f;
}

}







/*============================
ecology　エコロジー
============================*/
/*共通*/
#ecology .ecology_box .image {
	margin-bottom: 25px;
}
#ecology .ecology_box span {
    font-size: 12px;
}

/*ecology_container1*/
#ecology .ecology_container1 {
    margin-bottom: 80px;
    display: flex;
    gap: 50px;
}
#ecology .ecology_container1 .ecology_box {
    margin-bottom: 20px;
}
#ecology .ecology_container1  .ecology_left {
	width: 63.3333%;
}
#ecology .ecology_container1  .ecology_right {
	width: 31.08333%;
}

/*ecology_container2*/
#ecology .ecology_container2 {
    background-color: #eaede7;
    margin-bottom: 60px;
    display: flex;
    gap: 110px;
    padding: 25px 85px 20px 30px;
    align-items: center;
}
#ecology .ecology_container2  .ecology_left {
	width: 54%;
}
#ecology .ecology_container2  .ecology_right {
	width: 37%;
}
#ecology .ecology_container2  .ecology_right .image {
    margin-bottom: 0;
}

/*ecology_container3*/
#ecology .ecology_container3 {
    background-color: #eaede7;
    margin-bottom: 100px;
    display: flex;
    align-items: center;
    padding: 37px 23px 25px 30px;
}
#ecology .ecology_container3  .ecology_left {
	width: 48%;
}
#ecology .ecology_container3  .ecology_right {
	width: 52%;
}
#ecology .ecology_container3  .ecology_left p {
    margin-bottom: 25px;
}
#ecology .ecology_container3 .ecology_left .ecology_box .image {
	text-align:center;
}
#ecology .ecology_container3  .ecology_right .image {
    margin-bottom: 0;
}

/*ecology_container4*/
#ecology .ecology_container4 {
    margin-bottom: 165px;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}
#ecology .ecology_container4  .ecology_box {
	width: calc( ( 100% - 100px ) / 3 );
}
#ecology .ecology_container4  .ecology_box:nth-child(5) {
	width: 65%;
}


@media screen and (max-width: 768px) {
/*共通*/
#ecology .ecology_box .image {
	margin-bottom: 25px;
}
#ecology .ecology_box span {
    font-size: 12px;
}

/*ecology_container1*/
#ecology .ecology_container1 {
    margin-bottom: 40px;
    display: block;
}
#ecology .ecology_container1 .ecology_box {
}
#ecology .ecology_container1  .ecology_left {
	width: auto;
}
#ecology .ecology_container1  .ecology_right {
	width: auto;
}

/*ecology_container2*/
#ecology .ecology_container2 {
    margin-bottom: 40px;
    display: block;
    padding: 20px 5%;
}
#ecology .ecology_container2  .ecology_left {
	width: auto;
	margin-bottom: 20px;
}
#ecology .ecology_container2  .ecology_right {
	width: auto;
}
#ecology .ecology_container2  .ecology_right .image {
    margin-bottom: 0;
}

/*ecology_container3*/
#ecology .ecology_container3 {
    margin-bottom: 50px;
    display: block;
    padding: 20px 5%;
}
#ecology .ecology_container3  .ecology_left {
	width: auto;
}
#ecology .ecology_container3  .ecology_right {
	width: auto;
}
#ecology .ecology_container3  .ecology_left p {
    margin-bottom: 20px;
}
#ecology .ecology_container3 .ecology_left .ecology_box .image {width: 48%;margin: 0 auto 30px;}
#ecology .ecology_container3  .ecology_right .image {
}

/*ecology_container4*/
#ecology .ecology_container4 {
    margin-bottom: 80px;
    gap: 30px 15px;
}
#ecology .ecology_container4  .ecology_box {
	width: calc( ( 100% - 15px ) / 2 );
}
#ecology .ecology_container4  .ecology_box:nth-child(5) {
	width: 100%;
}
}



/*タイトル*/
#ecology .box_ttl1 {
    font-size: 18px;
    color:#be934f;
    letter-spacing: 0.075em;
    margin: 0 0 15px;
    padding: 0 0 11px;
    border-bottom: solid 1px #be934f;
}
#ecology .box_ttl1 sup {
    font-size: 12px;
}
#ecology .box_ttl2 {
    font-size: 18px;
    color:#d68404;
    letter-spacing: 0.075em;
    margin: 0 0 15px;
}
#ecology .box_ttl3 {
    font-size: 18px;
    color:#be934f;
    letter-spacing: 0.075em;
    margin: 0 0 15px;
}
@media screen and (max-width: 768px) {
#ecology .box_ttl1 {
    font-size: 16px;
    margin: 0 0 10px;
    padding: 0 0 10px;
}
#ecology .box_ttl2 {
    font-size: 16px;
    margin: 0 0 10px;
}
#ecology .box_ttl3 {
    font-size: 16px;
    margin: 0 0 10px;
}

}
/*============================
comfortable　快適性
============================*/
/*共通*/
#comfortable .comfortable_box .image {
	text-align:center;
margin-bottom: 25px;
}
#comfortable .comfortable_box span {
font-size: 12px;
}



/*comfortable_container1*/
#comfortable .comfortable_container1 {
margin-bottom: 45px;
display: flex;
gap: 40px;
}
#comfortable .comfortable_container1 .comfortable_left {
width: 71%;
}
#comfortable .comfortable_container1 .comfortable_left .comfortable_box p span {
line-height: 1.5;
display: inline-block;
}
#comfortable .comfortable_container1 .comfortable_right {
width: 26%;
}
#comfortable .comfortable_container1 .comfortable_left .comfortable_container1_2 {
	margin-bottom: 20px;
}
#comfortable .comfortable_container1 .comfortable_left .comfortable_container1_2 .comfortable_box {
margin-bottom: 45px;
display: flex;
gap: 20px;
}
#comfortable .comfortable_container1 .comfortable_left .comfortable_container1_2 .comfortable_box p {
width: 61.049%;
}
#comfortable .comfortable_container1 .comfortable_left .comfortable_container1_2 .comfortable_box .image {
width: 36.89%;
margin-bottom: 0;
}



/*comfortable_container2*/
#comfortable .comfortable_container2 {
margin-bottom: 45px;
display: flex;
gap: 40px;
}
#comfortable .comfortable_container2 .comfortable_box {
width: calc( ( 100% - 40px ) / 2 );
}
#comfortable .comfortable_container2 .comfortable_box p {
margin-bottom: 20px;
}



/*comfortable_container3*/
#comfortable .comfortable_container3 {
margin-bottom: 45px;
display: flex;
gap: 60px;
}
#comfortable .comfortable_container3 .comfortable_box {
width: calc( ( 100% - 60px ) / 3 );
}
#comfortable .comfortable_container3 .comfortable_box p {
margin-bottom: 20px;
}



/*comfortable_container4*/
#comfortable .comfortable_container4 {
margin-bottom: 45px;
display: flex;
gap: 40px;
}
#comfortable .comfortable_container4 .comfortable_box {
width: calc( ( 100% - 40px ) / 2 );
}
#comfortable .comfortable_container4 .comfortable_box p {
margin-bottom: 20px;
}
#comfortable .comfortable_container4_image {
	max-width: 1027px;
	margin: 0 auto 75px;
}



/*comfortable_container5*/
#comfortable .comfortable_container5 .comfortable_box {
margin-bottom: 40px;
display: flex;
gap: 25px;
}
#comfortable .comfortable_container5 .comfortable_box .logo {
width: 16.5%;
padding: 0;
z-index: 0;
}
#comfortable .comfortable_container5 .comfortable_box p {
width: 42.9166%;
}
#comfortable .comfortable_container5 .comfortable_box .image {
width: 37.4%;
}



/*comfortable_container6*/
#comfortable .comfortable_container6 {
margin-bottom: 100px;
display: flex;
gap: 40px;
}
#comfortable .comfortable_container6 .comfortable_box:nth-child(1) {
width: 28.1666%;
}
#comfortable .comfortable_container6 .comfortable_box:nth-child(2) {
width: 26.41666%;
}
#comfortable .comfortable_container6 .comfortable_box:nth-child(3) {
width: 37.25%;
}
#comfortable .comfortable_container6 .comfortable_box p {
	margin-bottom: 25px;
}



/*comfortable_container7*/
#comfortable .comfortable_container7 {
margin-bottom: 100px;
display: flex;
}
#comfortable .comfortable_container7 .comfortable_box:nth-child(1),
#comfortable .comfortable_container7 .comfortable_box:nth-child(2) {
width: calc( ( 100% - 0px ) / 2 );
padding: 0 10px;
text-align: center;
}
#comfortable .comfortable_container7 .comfortable_box:nth-child(1) {
border-right: solid 1px #3c3c3c;
}




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

/*共通*/
#comfortable .comfortable_box .image {
	text-align:center;
margin-bottom: 25px;
}
#comfortable .comfortable_box span {
font-size: 12px;
}



/*comfortable_container1*/
#comfortable .comfortable_container1 {
margin-bottom: 40px;
display: block;
}
#comfortable .comfortable_container1 .comfortable_left {
width: auto;
margin-bottom: 20px;
}
#comfortable .comfortable_container1 .comfortable_right {
width: auto;
}
#comfortable .comfortable_container1 .comfortable_left .comfortable_container1_2 {
	margin-bottom: 10px;
}
#comfortable .comfortable_container1 .comfortable_left .comfortable_container1_2 .comfortable_box {
margin-bottom: 20px;
display: block;
}
#comfortable .comfortable_container1 .comfortable_left .comfortable_container1_2 .comfortable_box p {
width: auto;
margin-bottom: 20px;
}
#comfortable .comfortable_container1 .comfortable_left .comfortable_container1_2 .comfortable_box .image {
width: auto;
margin-bottom: 0;
}



/*comfortable_container2*/
#comfortable .comfortable_container2 {
margin-bottom: 40px;
display: block;
}
#comfortable .comfortable_container2 .comfortable_box {
width: auto;
}
#comfortable .comfortable_container2 .comfortable_box p {
}



/*comfortable_container3*/
#comfortable .comfortable_container3 {
margin-bottom: 40px;
gap: 15px;
display: block;
}
#comfortable .comfortable_container3 .comfortable_box {
width: auto;
}
#comfortable .comfortable_container3 .comfortable_box p {
margin-bottom: 20px;
}



/*comfortable_container4*/
#comfortable .comfortable_container4 {
margin-bottom: 40px;
display: block;
}
#comfortable .comfortable_container4 .comfortable_box {
width: auto;
}
#comfortable .comfortable_container4 .comfortable_box p {
}
#comfortable .comfortable_container4_image {
	margin-bottom: 40px;
}



/*comfortable_container5*/
#comfortable .comfortable_container5 .comfortable_box {
margin-bottom: 40px;
display: block;
}
#comfortable .comfortable_container5 .comfortable_box .logo {
width: 45%;
margin: 0 auto 20px;
padding-top: 15px;
float: none;
}
#comfortable .comfortable_container5 .comfortable_box p {
width: auto;
margin-bottom: 10px;
}
#comfortable .comfortable_container5 .comfortable_box .image {
width: 100%;
margin-bottom: 0;
}



/*comfortable_container6*/
#comfortable .comfortable_container6 {
margin-bottom: 50px;
display: block;
}
#comfortable .comfortable_container6 .comfortable_box:nth-child(1) {
width: auto;
margin-bottom: 30px;
}
#comfortable .comfortable_container6 .comfortable_box:nth-child(2) {
width: auto;
margin-bottom: 30px;
text-align: center;
}
#comfortable .comfortable_container6 .comfortable_box:nth-child(3) {
width: auto;
margin-bottom: 30px;
}
#comfortable .comfortable_container6 .comfortable_box p {
	margin-bottom: 20px;
}



/*comfortable_container7*/
#comfortable .comfortable_container7 {
margin-bottom: 80px;
display: block;
}
#comfortable .comfortable_container7 .comfortable_box:nth-child(1),
#comfortable .comfortable_container7 .comfortable_box:nth-child(2) {
width: auto;
padding: 20px 0;
}
#comfortable .comfortable_container7 .comfortable_box:nth-child(1) {
border-right: none;
border-bottom: solid 1px #3c3c3c;
}




}


/*タイトル*/
#comfortable .box_ttl1 {
font-size: 18px;
color:#be934f;
letter-spacing: 0.075em;
margin: 0 0 15px;
padding: 0 0 11px;
border-bottom: solid 1px #c1c1c1;
}
#comfortable .box_ttl1.lett1 {
letter-spacing: -0.09em;
}
#comfortable .box_ttl2 {
font-size: 18px;
color:#7e4a7b;
letter-spacing: 0.075em;
margin: 0 0 15px;
}
#comfortable .box_ttl3 {
font-size: 18px;
color:#343434;
letter-spacing: 0.075em;
margin: 0 0 35px;
padding: 10px 0;
	background-color: #eae3d0;
	text-align: center;
}
@media screen and (max-width: 768px) {
#comfortable .box_ttl1 {
font-size: 16px;
margin: 0 0 10px;
padding: 0 0 10px;
}
#comfortable .box_ttl1.lett1 {
letter-spacing: 0.075em;
}
#comfortable .box_ttl2 {
font-size: 16px;
margin: 0 0 10px;
}
#comfortable .box_ttl3 {
font-size: 16px;
margin: 0 0 15px;
padding: 8px 0;
}

}