@charset "utf-8";

main.service section.x1 {
	padding:100px 0 0;
}
main.service section.x1 .inner {
	padding:30px 0 271px;
	position:relative;
	z-index:1;
}
main.service section.x1 .inner .top_bx {
	margin:0 0 0 10vw;
	position:relative;
	z-index:10;
}

main.service section.x1 .inner .top_bx h1 {
	font-size:64px;
	line-height:1.1;
	position:relative;
	z-index:10;
	overflow:hidden;
}
main.service section.x1 .inner .top_bx h1 span {
	margin:0;
	padding:0;
	display:block;
	line-height:inherit;
}

main.service section.x1 .inner .top_bx p {
	font-size:24px;
	font-weight:500;
	position:relative;
	overflow:hidden;
}
main.service section.x1 .inner .top_bx p span {
	display:block;
	color:#216fc6;
}

main.service section.x1 .inner .bg {
	width:72vw;
	height:400px;
	position:absolute;
	top:0;
	right:0;
	z-index:1;
	overflow:hidden;
	display:flex;
	justify-content:center;
	align-items:center;
}

/*
main.service section.x1 .inner .bg::before {
	content:"";
	width:100%;
	height:100%;
	z-index:100;
	position:absolute;
	top:0;
	left:0;
	background-image:linear-gradient(90deg, rgba(255, 255, 255, 1) 10vw, rgba(255, 255, 255, 0) 30vw);
}
*/
main.service section.x1 .inner .bg img {width:100%;}

main.service section.x2 {margin:50px 0 0;}
main.service section.x2 .inner {
	width:100%;
	max-width:1500px;
	margin:0 auto 100px;
	padding:0 50px;
}
main.service section.x2 .inner h2 {
	font-size:36px;
	margin:0 0 0.8em;
	letter-spacing:0.15em;
}
main.service section.x2 .inner p {
	font-size:18px;
	letter-spacing:0.015em;
}
main.service section.x2 .inner ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:stretch;
	width:100%;
	border-top:solid 1px #d8d8d8;
	border-left:solid 1px #d8d8d8;
	margin:80px 0 0;
}
main.service section.x2 .inner ul li {
	width:50%;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	padding:25px;
	border-right:solid 1px #d8d8d8;
	border-bottom:solid 1px #d8d8d8;
}
main.service section.x2 .inner ul li img {
	width:20%;
	margin:0 35px;
}
main.service section.x2 .inner ul li h2 {
	font-size:22px;
	line-height:1.7;
	letter-spacing:0.05em;
	margin:0;
}
main.service section.x2 .inner ul li h2 span {
	position:relative;
}
main.service section.x2 .inner ul li h2 span::after {
	content:"";
	width:100%;
	height:3px;
	background-color:#ce0b0b;
	position:absolute;
	bottom:-5px;
	left:0;
}
main.service section.x3 {
	margin:0;
	padding:100px 0 150px;
	background-color:#f0f4f5;
}
main.service section.x3 .inner {
	width:100%;
	max-width:1500px;
	margin:0 auto;
	padding:0 50px;
}
main.service section.x3 .inner h2 {
	font-size:32px;
	margin:0 0 100px;
}
main.service section.x3 .inner ul {
	display:flex;
	justify-content:space-between;
	align-items:strech;
	flex-wrap:wrap;
}
main.service section.x3 .inner ul li {
	width:32%;
	background-color:#fff;
	margin:0 0 1em;
	border:solid 1px #d8d8d8;
}
main.service section.x3 .inner ul li a {
	height:100%;
	display:flex;
	padding:25px 25px 10px;
	text-decoration:none;
	flex-direction:column;
}
main.service section.x3 .inner ul li a h3 {
	position:relative;
	margin:0 0 0.5em;
}
main.service section.x3 .inner ul li a h3 span {
	position:absolute;
	display:block;
	bottom:0;
	background-color:#005eb5;
	color:#fff;
	width:100%;
	padding:0.7em 0.8em 0.6em;
	line-height:1;
}

main.service section.x3 .inner ul li a .link {
	display:flex;
	justify-content:flex-end;
	align-items:center;
	margin:auto -12px 0;
}
main.service section.x3 .inner ul li a .link span {
	color:#005eb5;
	line-height:1.2;
}
main.service section.x3 .inner ul li a .link svg {
	fill:#055eb1;
	width:2.5em;
	margin:0 0 0 1em;
}


/* メディアクエリ------------------------------------------------------------------*/
@media print, screen and (min-width:1900px){}
@media print, screen and (max-width:1500px){
	main.service section.x1 .inner .bg img {
		width:auto;
		height:100%;
	}
	main.service section.x2 .inner {padding:0 5vw;}
	main.service section.x2 .inner ul li img {
		width:15%;
		margin:2% 25px;
	}
	main.service section.x3 .inner h2 {margin:0 0 5vw;}
}
@media print, screen and (max-width:1200px){
	main.service section.x2 .inner ul li {padding:25px 15px;}
	main.service section.x2 .inner ul li h2 {
		font-size:20px;
		line-height:1.2;
	}
}
@media print, screen and (max-width:1000px){
	main.service section.x3 .inner ul li {width:48%;}
}
@media print, screen and (max-width:900px){
	main.service section.x2 .inner ul li {
		flex-direction:column;
		aspect-ratio:3 / 2;
		justify-content:center;
		padding:2vw;
	}
	main.service section.x2 .inner ul li img {width:35%;}
}

@media print, screen and (max-width:768px){
	main.service section.x1 .inner {padding:0;}
	main.service section.x1 .inner .top_bx {margin:0 0 0 5vw;}
	main.service section.x1 .inner .top_bx h1 {font-size:12vw;}
	main.service section.x1 .inner .top_bx p {font-size:6vw;}
	main.service section.x1 .inner .bg {
		position:relative;
		width:100%;
		height:40vw;
		margin:0 0 5vw 10vw;
	}
	main.service section.x2 {margin:10vw 0 0;}
	main.service section.x2 .inner {margin:0 auto 20vw;}
	main.service section.x2 .inner h2 {
		font-size:7.8vw;
		line-height:1.2;
		letter-spacing:0.1em;
	}
	main.service section.x2 .inner p {
		font-size:4.2vw;
		line-height:2.2;
		text-align:justify;
	}
	main.service section.x2 .inner ul {margin:15vw 0 0;}
	main.service section.x2 .inner ul li {
		aspect-ratio:unset;
		width:100%;
		flex-direction:initial;
		padding:4vw 1vw;
		justify-content:flex-start;
	}
	main.service section.x2 .inner ul li img {
		width:20%;
		margin:0 5%;
	}
	main.service section.x2 .inner ul li h2 {font-size:4.2vw;}
	main.service section.x2 .inner ul li h2 span::after {
		height:2px;
		bottom:-1px;
	}
	main.service section.x3 {padding:20vw 0;}
	main.service section.x3 .inner {padding:0 5vw;}
	main.service section.x3 .inner ul li {width:100%;}
	main.service section.x3 .inner ul li p {text-align:justify;}
	main.service section.x3 .inner ul li.delay01 {transition-delay:0s;}
	main.service section.x3 .inner ul li.delay02 {transition-delay:0s;}


	.ios main.service section.x2 .inner ul li h2 span::after {bottom:-3px;}
}