@charset "UTF-8";
/* CSS Document */
#pageWrap {
    padding: 0px 0 0;
}

.capImg::after {
	content: "image photo";
}
.seko::after {
    content: "※当社施工例";
}
.sanko::after {
    content: "参考写真";
}
#main {}
#main h2 {
	position: relative;
	&::after {
		content: attr(data-cap);
		font-size: 10px;
		color: #fff;
		position: absolute;
		left: 1em;
		bottom: 0.5em;
	}
}
.boxWidth {
	container-type: inline-size;
}
#sec01 {
	background-color: #ecf0f3;
	padding: 5% 0;
}
p.p01 {
	font-size: clamp(15px, 2.5cqw, 24px);
	padding: 1em 0;
}
#sec01 h3 {
	font-size: clamp(20px, 5.5cqw, 55px);
	color: #a5904c;
	letter-spacing: 0.1em;
	padding-bottom: 1em;
	span {
		font-size: 120%;
	}
}
#sec01 .flex01 {
	width: 80%;
	max-width: 600px;
	margin: 0 auto;
	.imgBox {
		width: 48%;
		max-width: 286px;
	}
}
#sec01 .flex02 {
	padding: 30px 0;
	h5 {
		text-align: left;
		font-size: clamp(14px, 2.0cqw, 18px);
	}
	.fig01 {
		width: 50%;
	}
	.fig02 {
		width: 43%;
	}
}

#sec02 {
	padding-bottom: 5%;
}
.h3Wrap {
	container-type: inline-size;
background-image: url("../images/bg-h3Wrap.jpg");
		background-size: cover;
		background-position: center center;
	h3 {
		max-width: 1200px;
		font-size: 1.8cqw;
		font-size: clamp(13px, 1.8cqw, 30px);
		color: #fff;
		font-weight: 300;
		line-height: 1.3;
		padding: 1.3em 0!important;
		span {
			color: #ffff00;
			font-size: 110%;
		}
	}
}
#sec02 .flex01 {
	padding-top: 5%;
}
#sec02 {
	.box {
		
		width: 48%;
		display: flex;
		flex-wrap: wrap;
		.numBox {
			width: 6.8cqw;
			margin: 0 auto;

		}
	}
	dl {
		dt {
			color: #6273a5;
			font-size: 3.8cqw;
			span {
				font-size: 130%;
			}
		}
		dd {
			text-align: left;
			font-size: 2.1cqw;
			line-height: 1.3;
			text-indent: -1em;
			margin-left: 1em;
			display: flex;
justify-content: center;
align-items: center;
			flex-wrap: wrap;

			.cap {
				font-size: 15px;
				padding: 1em 0;
				padding-left: 2em;
				text-align: center;
				width: 100%;
			}
		}
	}
	.res {
		padding-top: 15px;
		width: 100%;
	}
	p.cap02 {
		width: 100%;
		text-align: right;
		padding-top: 1em;
	}
}
#sec02 .flex01 .box01 .figBox {
	width: 100%;
	padding-top: 9%;
}

#sec02 .box03 {
	padding: 5% 0;
	container-type: inline-size;
	.numBox {
		width: 7.5%;
		margin: 0 auto;
	}
	dd {
		text-align: center;
	}
	.figBox {
		max-width: 940px;
		margin: 0 auto;
	}
	p.cap02 {
		padding-top: 0em;
	}
}

#sec02 .reslt {
	.res01 {
		border: #b29e69 solid 2px;
		padding: 1.5em 3em;
		display: inline-block;
		p {
			font-size: 2.4cqw;
			line-height: 1.3;
			span {
				font-size: 110%;
				color: #b29e69;
			}
		}
	}
	.arw {
		width: 3.0cqw;
		margin: 0 auto;
		padding: 20px 0;
	}
	.res02 {
		background-color: #8a91b5;
		color: #f4e13d;
		padding: 2em 4em;
		display: inline-block;
		p {
			font-size: 2.4cqw;
			line-height: 1.4;
			font-weight: 500;
			text-decoration: underline;
		}
	}
}

#sec03 {
	background-color: #ecf0f3;
	background-image: url("../images/bg-side.png"),url("../images/bg-side.png");
	background-position: left top,right top;
	background-repeat: repeat-y,repeat-y;
	background-size: 3%, 3%;
}
#sec03 .imgMain {
	position: relative;
	h4 {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 32.0cqw;
		img {
			width: 50%;
		}
		span {
			display: block;
			font-size: 1.3cqw;
			font-size: clamp(15px, 1.5cqw, 20px);
			padding-top: 0.5em;
		}
	}
}
#sec03 .boxWidth {
	max-width: 1100px;
	padding: 5% 0;
}
#sec03 .h3-02 {
	position: relative;
	h3 {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		font-size: 3.2cqw;
		span {
			display: block;
			font-size: 70%;
			color: #a5904c;
		}
	}
	.ph {
		position: absolute;
		width: 18%;
		right: 0;
		top: 0;
		transform: translateY(-20%);
	}
}
#sec03 .typeBox {
	max-width: 1000px;
	margin: 0 auto;
	padding: 3% 0;
}
#sec03 .zumenWrap {
	.zumenBox {
		width: 48.2%;
		max-width: 530px;
	}
	.rightBox {
		width: 48%;
		
	}
}
#sec03 .itemWrap {
	text-align: left;
	background-color: #fff;
	padding: 20px 30px;
	position: relative;
	container-type: inline-size;
	&::after {
			content: "";
			position: absolute;
			right: 20px;
			top: 0;
			transform: translate(0%,0%);
			width: 10cqw;
			height: 20cqw;
			background-image: url("../images/fig03-1.svg");
			background-position: center center;
		background-repeat: no-repeat;
			background-size: 100%;
		}
	h5 {
		font-size: 5.2cqw;
		font-weight: 300;
		padding-left: 2.4em;
		border-bottom: #000 solid 1px;
		position: relative;
		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			transform: translate(-50%,-50%);
			width: 20cqw;
			height: 20cqw;
			background-image: url("../images/point-01.svg");
			background-position: center center;
			background-size: cover;
		}
		
	}
	dl {
		dt {
			font-size: 4.2cqw;
			padding-top: 0.3em;
		}
		dd {
			align-items: flex-start;
			p {
				width: 54%;
				padding-top: 0.5em;
				font-size: 3.6cqw;
				font-size: clamp(12px, 3.6cqw, 16px);
			}
			.imgBox {
				width: 42%;
				padding-top: 0.5em;
			}
		}
	}
}
#sec03 .item02 {
	margin: 50px 0;
	&::after {
		background-image: url("../images/fig03-2.svg");
	}
	h5::before {
		background-image: url("../images/point-02.svg");
	}
}
#sec03 .item03 {
	margin: 50px 0;
	&::after {
		background-image: url("../images/fig03-3.svg");
	}
	h5 .cap {
		font-size: 50%;
	}
	h5 .mr {
		font-size: 70%;
		display: inline-block;
		background-color: #ee869a;
		color: #fff;
		border-radius: 999px;
		padding: 0 1em;
		margin-left: 1em;
		position: relative;
		top:-0.5em;
	}
	h5::before {
		background-image: url("../images/point-03.svg");
	}
	a {
		display: block;
		background-color: #f6ab00;
		color: #fff;
		font-size: 4.2cqw;
		text-align: center;
		border-radius: 6px;
		padding: 0.2em;
		margin-top: 15px;
	}
}

#sec04 {
padding-bottom: 5%;
}
.h3-04 {
	background-color: #8a91b5;
	padding: 30px 0;
	.point {
		width: 16cqw;
		margin: 0 auto;
		padding-bottom: 15px;
	}
	h3 {
		position: relative;
		font-size: 3.2cqw;
		color: #fff;
		display: inline-block;
		span {
			position: absolute;
			right: 101%;
			bottom: 30%;
			width: 8cqw;
		}
		i {
			font-style: normal;
			font-size: 66%;
			display: inline-block;
			position: relative;
			top: -0.2em;
			margin-right: 0.3em;
		}
	}
}
#sec04 .scnWrap {
	padding: 5% 0 0;
	.scn {
		width: clamp(50px, 16cqw, 90px);
		margin: 0 auto;
	}
	h4 {
		font-size: 3.2cqw;
		color: #6273a5;
		padding: 1em 0;
	}
}

#sec04 .scn01 .flex01 {
	max-width: 1000px;
	margin: 0 auto;
	.imgBox {
		width: 48%;
	}
	p {
		width: 48%;
		text-align: justify;
		font-size: 1.8cqw;
	}

}
#sec04 .scn01 .sankaku {
	width: 8%;
	margin: 0 auto;
	padding: 5% 0;
}
#sec04 .box02Top,#sec04 .box02Bottom {
	max-width: 1000px;
	margin: 0 auto;
	line-height: 0;
}
#sec04 .box02 {
	max-width: 1000px;
	margin: 0 auto;
	background-image: url("../images/bg-b02.png");
	background-size: 100%;
	background-repeat: repeat-y;
	position: relative;
	h4 {
		font-weight: 400;
		font-size: 3.0cqw;
		color: #000;
		letter-spacing: 0.1em;
		.uLine {
			background: #A5904C;
background: linear-gradient(360deg, rgba(165, 144, 76, 1) 30%, rgba(255, 255, 255, 0) 30%);
		}
	}
	.flex02 {
		width: 90%;
		max-width: 720px;
		margin: 0 auto;
		.itemBox {
			width: 46%;
			max-width: 330px;
			p,dd {
				text-align: justify;
				font-size: 3.0cqw;
				font-size: clamp(13px, 1.5cqw, 16px);
				line-height: 1.4;
				padding: 0.5em 0;
				.red {
					color: #c1272d;
				}
			}
			dt {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #6273a5;
				font-size: clamp(14px, 1.7cqw, 18px);
				line-height: 1.3;
				font-weight: 500;
				height: 3.0em;
				margin-top: 0.3em;

			}
		}
	}
}

#sec05 {
	padding-bottom: 5%;
}
#sec05 .main {
	.imgBox {
		width: 50%;
	}
	.txtBox {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		color: #000;
container-type: inline-size;
		h4 {
			font-size: 3.7cqw;
			font-size: clamp(18px, 3.7cqw, 36px);
			text-align: left;
		}
		p {
			font-size: 2.2cqw;
			font-size: clamp(13px, 2.2cqw, 22px);
			text-align: left;
			padding-top: 1em;
		}
	}
}

#sec05 .boxWidth {
}
#sec05 .bg {
	position: relative;
	max-width: 1000px;
	margin: 5% auto;
	.h5Box {
		position: absolute;
		width: 100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		h5 {
			font-size: 2.7cqw;
			color: #c1272d;
		}
		p {
			font-size: 1.8cqw;
			color: #a5904c;
		}
	}
}
#sec05 h4.zehi {
	color: #6273a5;
	font-size: 2.7cqw;
	padding-bottom: 1em;
}
#sec05 .itemWrap {
	max-width: 1000px;
	margin: 0 auto;
	gap:30px 0;
}
#sec05 .itemBox {
	background-color: #e7e9f0;
	padding: 30px 40px;
	width: 48%;
	position: relative;
	container-type: inline-size;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	&::after {
		content: "";
		position: absolute;
		left: 2px;
		top: 2px;
		width: calc(100% - 4px);
		height: calc(100% - 4px);
		border: #fff solid 10px;
	}
	h5 {
		width: 100%;
		font-weight: 300;
		color: #02284c;
		font-size: 6.5cqw;
		border-bottom: #02284c solid 1px;
		margin-bottom: 1em;
	}
	.imgBox {
		width: 80%;
		margin: 0 auto;
	}
	ul {
		text-align: center;
		display: inline-block;
		padding: 1em 0;
		li {
			text-align: left;
			font-size: 4.6cqw;
			font-weight: 400;
			line-height: 1.3;
			padding: 0.3em 0;
			text-indent: -1.2em;
			&::before {
				content: "　";
				width: 4.6cqw;
				height: 4.6cqw;
				background-image: url("../images/ico-check.svg");
				background-position: center center;
				background-size: 100%;
				background-repeat: no-repeat;
				margin-right: 0.2em;
			}
		}
	}
	.pBox {
		width: 100%;
		background-color: #d1d5e2;
		border-radius: 10px;
		line-height: 1.3;
		font-size: 4.6cqw;
		padding: 0.3em;
		margin-bottom: 15px;
	}
	.merit {
		align-self: flex-end;
justify-content: flex-start;
align-items: center;
		gap:20px 2%;

		div {
			width: 32%;
		}
	}
}

#sec06 {
	padding: 0;
	.btWrap {
		padding: 3% 0 0;
		a {
			display: block;
			width: 90%;
			max-width: 580px;
			margin: 0 auto;
			background-color: #fbd106;
		}
	}
}

@media screen and (max-width: 599px){
	#main h2::after {
		bottom: 60%;
	}
	#sec01 .flex01 {
    width: 90%;
	}
	#sec01 .flex02 {
		width: 90%;
		max-width: 350px;
		margin: 0 auto;
		gap:20px 0;
		.fig01 {
			width: 100%;
		}
		.fig02 {
			width: 100%;
		}
	}
	.h3Wrap {
    h3 {
        font-size: 4cqw;
			font-size: clamp(13px, 4cqw, 18px);
    }
	}
	#sec02 .flex01,#sec02 .box03{
    width: 90%;
		max-width: 350px;
	}
	#sec02 {
		padding-bottom: 50px;
    .box {
			width: 100%;
			.numBox {
				width: 20cqw;
			}
    }
		.box02 {
			padding-top: 30px;
		}
		.res {
			width: 100%;
        padding-top: 15px;
    }
	}
	#sec02 dl dt {
		font-size: 6.4cqw;
		line-height: 1.2;
		padding: 0.5em 0;
	}
	#sec02 dl dd {
		font-size: 4.6cqw;
		.cap {
			font-size: 12px;
			padding-left: 0em;
		}

	}
	#sec02 .box03 .numBox {
				width: 20cqw;
			}
  #sec02 .reslt .res01 p {
		font-size: 4.4cqw;
		font-size: clamp(13px, 4.4cqw, 18px);

	}
	#sec02 .reslt .res02 p {
		font-size: 4.4cqw;
font-size: clamp(13px, 4.4cqw, 18px);
	}
	#sec02 .reslt .arw {
		width: 6.0cqw;
    padding: 15px 0;
	}
	#sec03 .imgMain h4 img {
    width: 80%;

	}
	#sec03 .boxWidth {
		max-width: 350px;
	}
	#sec03 .imgMain h4 span {
		font-size: clamp(13px, 2cqw, 20px);
    padding-top: 0.2em;
	}
	#sec03 .h3-02 h3 {
	  left: 7%;
	  top: 50%;
	  transform: translate(0%, -50%);
	  font-size: 4.8cqw;
	  line-height: 1.4;
	}
	#sec03 .h3-02 .ph {
	  width: 22%;
	  transform: translateY(-10%);
	}
	#sec03 .zumenWrap {
	  width: 90%;
	  margin: 0 auto;
	}
	#sec03 .zumenWrap .zumenBox {
	  width: 100%;
		padding-bottom: 20px;
	}
	#sec03 .zumenWrap .rightBox {
	  width: 100%;
	}
	#sec03 .itemWrap {
	  padding: 10px 20px;
	}
	#sec03 .item02 {
    margin: 30px 0;
}
	#sec03 .item03 {
	  margin: 0px 0;
	}
	#sec03 .itemWrap h5 {
	  font-size: 6.2cqw;
	  text-align: center;
		padding-left: 0;
	}
	#sec03 .itemWrap dl dt {
	  font-size: 5.0cqw;
	  text-align: center;
	}
	#sec03 .itemWrap h5::before {
	  width: 25cqw;
	  height: 25cqw;
	}
	#sec03 .itemWrap dl dd {
	  flex-direction: column-reverse;
	}
	#sec03 .itemWrap dl dd .imgBox {
	  width: 60%;
	  margin: 10px auto 0;
	}
	#sec03 .itemWrap dl dd p {
	  width: 100%;
	  font-size: 4.6cqw;
	}
	#sec03 .item03 a {
	  font-size: 5.8cqw;
	}
	#sec03 .item03 {
    h5 .mr {
        position: absolute;
			width: 60%;
			right: 20%;
			top: 0;
			transform: translateY(-100%);
    }
	}
	.h3-04 {
    .point {
        width: 30cqw;
        margin: 0 auto;
        padding-bottom: 15px;
    }
	}
	 .h3-04 {
    h3 {
        font-size: 4.5cqw;
			line-height: 1.4;
			span {
            position: absolute;
            right: 95%;
            bottom: 94%;
            width: 15cqw;
        }
    	}
	}
	#sec04 .scnWrap {
		width: 90%;
		max-width: 350px;
		margin: 0 auto;
    h4 {
        font-size: 4.8cqw;
    }
}
	#sec04 .scn01 .flex01 {
    .imgBox {
        width: 100%;
			margin: 0 auto;
    }
		    p {
        width: 100%;
        text-align: justify;
        font-size: 3.8cqw;
					padding-top: 1em;
    }
}
	#sec04 .box02 .flex02 {
		width: 80%;
		max-width: 350px;
        .itemBox {
            width: 100%;
            max-width: 100%;
					.imgBox {
						width: 80%;
						margin: 0 auto;
					}
    }
}
	#sec05 .main {
    .imgBox, .txtBox {
        width: 100%;
			h4 {
				text-align: center;
				padding-top: 1em;
			}
    }
}
	#sec05 .bg .h5Box {
        h5 {
            font-size: 4.5cqw;
					font-size: clamp(13px, 4.5cqw, 20px);
        }
		p {
			font-size: 3.6cqw;
			font-size: clamp(13px, 3.6cqw, 16px);
        }
	}
	#sec05 h4.zehi {
    font-size: 4.6cqw;
		font-size: clamp(13px, 4.5cqw, 20px);
}
	#sec05 .itemWrap {
    max-width: 350px;
    margin: 0 auto;
    gap: 15px 0;
		.itemBox {
			width: 100%;
		}
}

}