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


.sec1 h1, .sec2 h1 {
	background-color: #014968;
	padding: 1rem;
	font-family: 'Noto Serif JP', serif;
	font-size: 1.5rem;
	font-weight: 600;
	text-align: center;
	color: #fff;
	margin-bottom: 0;
}
.sec1 .box {
	padding: 1.5rem 0;
}
.sec1 .box:nth-child(2n) {
	background-color: #f2f2f2;
}
.sec1 .box .container {
	position: relative;
}
.sec1 .box h2 {
	font-family: 'Noto Serif JP', serif;
	font-size: 1.4rem;
	font-weight: 600;
	color: #000;
	letter-spacing: -0.05rem;
	margin-bottom: 1rem;
}
.sec1 .box h2 img {
	width: 16%;
	display: inline-block;
	margin-right: 0.5rem;
	vertical-align: -0.3rem;
}
.sec1 .box .icon1 {
	width: 30%;
	display: block;
	position: absolute;
	top: 8%;
	right: 12%;
}
.sec1 .box .icon2 {
	width: 30%;
	display: block;
	position: absolute;
	top: 52%;
	right: -3%;
}
.sec1 .box .icon3 {
	width: 30%;
	display: block;
	position: absolute;
	top: 8%;
	right: 12%;
}
.sec1 .box .icon4 {
	width: 30%;
	display: block;
	position: absolute;
	top: 55%;
	right: -3%;
}
.sec1 .box .icon5 {
	width: 30%;
	display: block;
	position: absolute;
	top: 8%;
	right: 12%;
}
.sec1 .box .icon6 {
	width: 30%;
	display: block;
	position: absolute;
	top: 55%;
	right: -3%;
}
.sec1 .box .icon7 {
	width: 30%;
	display: block;
	position: absolute;
	top: 8%;
	right: 12%;
}
.sec1 .box .icon8 {
	width: 30%;
	display: block;
	position: absolute;
	top: 58%;
	right: -3%;
}
.sec1 .box p {
	margin-top: 1.2rem;
	margin-bottom: 0 !important;
}

.sec2 .box {
	margin: 0.8rem auto;
}

.sec2 .box img {
	margin: 0.5rem 0;
}
.sec2 .box span {
	display: block;
	text-align: right;
	padding-right: 1rem;
	margin-bottom: 1rem;
}
.sec2 .box p {
	font-size: 1.15rem;
	text-align: center;
	margin-bottom: 0.5rem;
}



@media (min-width: 768px) {
	.sec1 h1, .sec2 h1 {
		font-size: 1.65rem;
		padding: 0.8rem 0 1rem;
	}
	.sec1 .box {
		padding: 1.8rem 0;
	}
	.sec1 .box h2 {
		font-size: 1.7rem;
		letter-spacing: 0;
		margin-bottom: 1.5rem;
	}
	.sec1 .box h2 img {
		width: 80px;
	}
	.sec1 .box .remodeling {
		width: 84%;
		display: block;
		margin: 0 auto;
	}
	
	.sec1 .box .icon1 {
		width: 160px;
		top: 9%;
		right: 20%;
	}
	.sec1 .box .icon2 {
		width: 190px;
		top: 64%;
		right: 4%;
	}
	.sec1 .box .icon3 {
		width: 160px;
		top: 9%;
		right: 20%;
	}
	.sec1 .box .icon4 {
		width: 190px;
		top: 64%;
		right: 4%;
	}
	.sec1 .box .icon5 {
		width: 160px;
		top: 9%;
		right: 20%;
	}
	.sec1 .box .icon6 {
		width: 190px;
		top: 64%;
		right: 4%;
	}	
	.sec1 .box .icon7 {
		width: 160px;
		top: 9%;
		right: 20%;
	}
	.sec1 .box .icon8 {
		width: 190px;
		top: 66%;
		right: 4%;
	}
	.sec1 .box p {
		margin-top: 1.8rem;
		margin-bottom: 0 !important;
	}

	.sec2 .box img {
		margin: 0.5rem auto;
		width: 70%;
		display: block;
	}
	.sec2 .box span {
		padding-right: 3.6rem;
	}
	.sec2 .box p {
		font-size: 1.2rem;
		margin-bottom: 1rem;
	}
}



@media (min-width: 992px) {
	.sec1 h1, .sec2 h1 {
		font-size: 1.8rem;
		padding: 1rem 0 1.2rem;
	}
	.sec1 .box {
		padding: 2rem 0 2.8rem;
	}
	.sec1 .box h2 {
		font-size: 1.8rem;
		margin-bottom: 1.8rem;
	}
	.sec1 .box h2 img {
		width: 90px;
	}
	.sec1 .box .remodeling {
		width: 100%;
	}
	.sec1 .box .icon1 {
		width: 150px;
		top: 31%;
		left: 5%;
	}
	.sec1 .box .icon2 {
		width: 200px;
		top: 10% !important;
		right: 2%;
	}
	.sec1 .box .icon3 {
		width: 150px;
		top: 31%;
		left: 5%;
	}
	.sec1 .box .icon4 {
		width: 200px;
		top: 10% !important;
		right: 2%;
	}
	.sec1 .box .icon5 {
		width: 150px;
		top: 31%;
		left: 5%;
	}
	.sec1 .box .icon6 {
		width: 200px;
		top: 10% !important;
		right: 2%;
	}
	.sec1 .box .icon7 {
		width: 150px;
		top: 31%;
		left: 5%;
	}
	.sec1 .box .icon8 {
		width: 200px;
		top: 10% !important;
		right: 2%;
	}	
	.sec1 .box p {
		position: absolute;
		width: 26%;
		top: 53%;
		left: 2%;
	}

	.sec2 .box img {
		width: 80%;
	}
	.sec2 .box span {
		padding-right: 4rem;
	}
}





@media (min-width: 1200px) {
	.sec1 .box {
		padding: 2.4rem 0 3.2rem;
	}
	.sec1 .box .icon1 {
		width: 160px;
		top: 32%;
	}
	.sec1 .box .icon2 {
		top: 76%;
	}
	.sec1 .box .icon3 {
		width: 160px;
		top: 32%;
	}
	.sec1 .box .icon4 {
		top: 76%;
	}
	.sec1 .box .icon5 {
		width: 160px;
		top: 32%;
	}
	.sec1 .box .icon6 {
		top: 76%;
	}	
	.sec1 .box .icon7 {
		width: 160px;
		top: 32%;
	}
	.sec1 .box .icon8 {
		top: 76%;
	}	
	.sec1 .box p {
		left: 1.5%;
	}

	.sec2 .box img {
		width: 70%;
	}
	.sec2 .box span {
		padding-right: 5.5rem;
	}
}