@charset "UTF-8";

:root {
	--colorBk: #000;
	--colorWh: #fff;
	--colorNv: #343399;
}

#lead {
	background: url(../images/common/common_bg_02.jpg) no-repeat right top/100vw auto;
	padding: 110px 0 120px;
}
#services {
	min-width: 1280px;
	background: linear-gradient(to bottom, #e3f3fe 0%,#cae9fb 100%);
	padding: 110px 0 120px;
	.bl1 {
		ol {
			> li {
				border-bottom: solid 1px #cacae1;
				margin-bottom: 140px;
				padding-bottom: 140px;
				&:last-child {
					border-bottom: none;
					margin-bottom: 0;
					padding-bottom: 0;
				}
				.midashiEn {
					letter-spacing: 30%;
					margin-bottom: 15px;
				}
				h2 {
					color: var(--colorNv);
				}
				.box {
					display: flex;
					justify-content: space-between;
					.fig {
						width: 51%;
						img {
							width: 100%;
						}
					}
					.text {
						width: 45%;
						ul {
							margin-top: 50px;
							li {
								text-indent: -1.5em;
								padding-left: 3em;
							}
						}
					}
				}
				&:nth-child(2n-1) .box {
					flex-direction: row-reverse;
				}
			}
		}
	}
}
#scope {
	padding: 110px 0 120px;
	.bl1 {
		ul {
			display: flex;
			justify-content: space-between;
			li {
				width: calc(calc(100% - 105px) / 4);
				text-align: center;
				background: #f2f2f2;
				border-radius: 15px;
				padding: 50px 20px;
				.fig {
					width: 80px;
					margin: 0 auto 20px;
					img {
						width: 100%;
					}
				}
				h3 {
					color: var(--colorNv);
				}
				p {
					color: #7d7b7b;
					line-height: 1.5;
				}
			}
		}
	}
}
#client {
	min-width: 1280px;
	background: #dfdfdf;
	padding: 110px 0 120px;
	.bl1 {
		ul {
			display: flex;
			justify-content: space-between;
			li {
				width: calc(calc(100% - 80px) / 4);
				color: var(--colorWh);
				text-align: center;
				background: var(--colorNv);
				border-radius: 15px;
				padding: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}

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

	#lead {
		padding: 13vw 0;
	}
	#services {
		min-width: initial;
		padding: 13vw 0;
		.bl1 {
			ol {
				> li {
					border-bottom: solid 1px #cacae1;
					margin-bottom: 12vw;
					padding-bottom: 12vw;
					.midashiEn {
						margin-bottom: 5vw;
					}
					.box {
						display: block;
						.fig {
							width: 100%;
							margin-bottom: 5vw;
						}
						.text {
							width: 100%;
							ul {
								margin-top: 5vw;
							}
						}
					}
				}
			}
		}
	}
	#scope {
		padding: 13vw 0;
		.bl1 {
			ul {
				justify-content: flex-start;
				flex-wrap: wrap;
				gap: 4vw;
				li {
					width: calc(calc(100% - 4vw) / 2);
					padding: 6vw 4vw;
					.fig {
						width: 30%;
						margin: 0 auto 5vw;
					}
					h3 {
						font-size: 1.5rem!important;
					}
				}
			}
		}
	}
	#client {
		min-width: initial;
		padding: 13vw 0;
		.bl1 {
			ul {
				flex-wrap: wrap;
				li {
					width: calc(calc(100% - 4vw) / 2);
					margin-bottom: 4vw;
					padding: 5vw;
				}
			}
		}
	}

}