@charset "utf-8";
/*BASE*/

/*NAVI*/
header nav .service .en {
	color:rgba(72,143,187,1) !important;
}
/*HEADER*/
.keyvisual {
	background-image:url(../images/service/keyvisual.jpg);
}

/*工事の流れと段取り*/
#process .chart {
	counter-reset: chart;
	position:relative;
}
#process .chart::before {
	content:"";
	box-sizing:content-box;
	display:block;
	width:0;
	border-left:dotted 10px #dae2ff;
	line-height: 1;
	letter-spacing:1;
	position:absolute;
	top:0;
	z-index:-1;
}
#process .chart > li {
	counter-increment: chart;
	display:flex;
	align-items:flex-start;
	column-gap:2em;
	width:100%;
}
#process .chart > li::before {
	content: counter(chart);
	display:flex;
	justify-content:center;
	align-items:center;
	height:auto;
	aspect-ratio:1 / 1;
	font-weight: bold;
	line-height: 1;
	letter-spacing:1;
	color: #fff;
	background: #99adf4;
	border-radius: 50%;
}


@media screen and (max-width: 767.98px) {
/*BASE*/

/*KeyVisual*/

/*業務一覧*/
#service-list {
	background-color:rgba(255,255,255,1);
	padding:4rem 0;
}
#service-list h1.title.line {
	font-size:16px;
	padding:0 0 2rem;
}
#service-list li.content {
	padding:4rem 2rem;
}
#service-list li.content:nth-child(odd) {
	background: linear-gradient(125deg, rgba(24,140,207,.7) 0%, rgba(24,140,207,.7) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
}
#service-list li.content:nth-child(even)  {
	background: linear-gradient(125deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,214,0,1) 50%, rgba(255,214,0,1) 100%);
	margin-bottom:100px;
}
#service-list li.content:last-child {
	margin-bottom:0;
}
#service-list .content-box .img-box {
	display:flex;
	align-items:center;
	column-gap:1rem;
	width:100%
}
#service-list .content-box .img-box li {
	flex:1;
}
#service-list .content-box .img-box img {
	width:100%;
	height:auto;
}
#service-list .content-box .txt-box {
	flex:1;
}
#service-list .content-box .txt-box h2 {
	font-size:20px;
	font-weight:700;
	margin-bottom:.5em;
}
#service-list .content-box .txt-box .comment-box {
	text-align:justify;
}
#service-list .content-box a.bt-txt.sp {
	width:100%;
	padding:1rem 0;
	margin: 1rem auto 0;
	border-radius:6px;
}

/*工事の流れと段取り*/
#process {
	background-image:url(../images/tmpl/bgimg_section-paper.gif);
	padding:4rem 2rem;
}
#process h1.title .ja { letter-spacing:normal; }
#process .chart {
	font-size:12px;
}
#process .chart::before {
	line-height:1;
	letter-spacing:0;
	height:calc(100% - 6%);
	left:12px;
}
#process .chart > li:not(:last-child) {
	padding-bottom:4em;
}
#process .chart > li::before {
	font-size:18px;
	width:32px;
}
#process .chart > li .content-box {
	width:calc(100% - 32px - 2em );
	padding-top:2%;
}
#process .chart > li h2 {
	font-size:14px;
	font-weight:bold;
	text-align:justify;
	text-align-last:justify;
	white-space:nowrap;
	width:max-content;
	min-width:5.2em;
	margin-bottom:.5em;
}
#process .chart > li ul.ul { list-style-type: none; margin:.5em 0; }
#process .chart > li ul.ul > li { display:inline-block; padding-right:1em; margin-bottom:0;}
#process .chart > li ul.ul > li::before {content:"・";}
}

@media screen and (min-width: 768px), print {

/*KeyVisual*/

/*業務一覧*/
#service-list {
	background-color:rgba(255,255,255,1);
	padding:100px 0;
}
#service-list h1.title.line {
	font-size:clamp(24px, 2.4vw, 32px);
	line-height:1;
	margin-bottom:100px;
}
#service-list li.content {
	padding:100px 80px 100px;
}
#service-list li.content:nth-child(odd) {
	background: linear-gradient(125deg, rgba(24,140,207,1) 0%, rgba(24,140,207,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
}
#service-list li.content:nth-child(even)  {
	background: linear-gradient(125deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,214,0,1) 50%, rgba(255,214,0,1) 100%);
	margin-bottom:100px;
}
#service-list li.content:last-child {
	margin-bottom:0;
}
#service-list .content-box {
	display:flex;
	align-items:center;
	column-gap:40px;
	max-width:1440px;
	margin:auto;
}
#service-list li.content:nth-child(odd) .content-box {
	flex-direction:row-reverse;
}
#service-list li.content:nth-child(even) .content-box {
	flex-direction:row;
}
#service-list .content-box .img-box {
	flex:2;/*2.15*/
	display:flex;
	align-items:center;
	column-gap:40px;
	width:100%
}
#service-list .content-box .img-box li {
	flex:1;
}
#service-list .content-box .img-box img {
	width:100%;
	height:auto;
}
#service-list .content-box .txt-box {
	flex:1;
}
#service-list .content-box .txt-box h2 {
	font-size:clamp(20px, 2vw, 24px);
	font-weight:700;
	margin-bottom:.5em;
}
#service-list .content-box .txt-box .comment-box {
	color:#555;
	text-align:justify;
}

/*工事の流れと段取り*/
#process {
	background-image:url(../images/tmpl/bgimg_section-paper.gif);
	padding:100px 80px;
}
#process .chart {
	font-size:clamp(12px, 1.4vw, 16px);
	width:max-content;
	max-width:1440px;
	margin:auto;
}
#process .chart::before {
	height:calc(100% - 8%);
	left:calc(4% - .25em);
}
#process .chart > li:not(:last-child) {
	padding-bottom:4em;
}
#process .chart > li::before {
	font-size:clamp(18px, 2.4vw, 24px);
	width:8%;
}
#process .chart > li .content-box {
	flex:1;
	padding-top:2%;
}
#process .chart > li h2 {
	font-size:clamp(15px, 1.6vw, 24px);
	font-weight:bold;
	text-align:justify;
	text-align-last:justify;
	white-space:nowrap;
	width:max-content;
	min-width:5.2em;
	margin-bottom:.5em;
}
#process .chart > li ul.ul { list-style-type: none; margin:.5em 0; }
#process .chart > li ul.ul > li { display:inline-block; padding-right:1em; margin-bottom:0;}
#process .chart > li ul.ul > li::before {content:"・";}
}