@charset "utf-8";
#page_top {
	background-image: url(../image/service/service-page_top@pc.webp);
}

#service {
	width: 100%;
	height: auto;
	padding: 100px 0 150px;
}
	.service__inner {
		width: 90%;
		max-width: 720px;
		height: auto;
		margin: 0 auto;
	}
		.service__list {
			display: grid;
			grid-template-columns: repeat(4fr, 1fr);
			gap: 25px 20px;
			width: 100%;
			height: auto;
		}
			.service__list__item {
				width: 100%;
				height: auto;
			}
				.service__list__item__link {
					display: block;
					width: 100%;
					height: auto;
					position: relative;
					overflow: hidden;
				}
					.service__list__item__number {
						font-size: 50px;
						font-weight: 700;
						line-height: 1.16;
						letter-spacing: 0.04em;
						color: var(--color--white);
						position: absolute;
						top: 13px;
						left: 25px;
						z-index: 1;
					}
					.service__list__item__ttl {
						position: absolute;
						top: 50%;
						left: 22px;
						transform: translateY(-50%);
						z-index: 1;
					}
						.service__list__item__main_ttl {
							margin-bottom: 14px;
							font-size: 29px;
							font-weight: 700;
							line-height: 1;
							letter-spacing: 0.14em;
							color: var(--color--white);
						}
						.service__list__item__sub_ttl {
							font-size: 25px;
							font-weight: 700;
							line-height: 1;
							letter-spacing: 0.1em;
							color: var(--color--white);
						}
					.service__list__item__txt {
						font-size: 16px;
						font-weight: 400;
						line-height: 1.5;
						letter-spacing: 0.04em;
						color: var(--color--white);
						position: absolute;
						bottom: 32px;
						left: 22px;
						z-index: 1;
					}
				@media (any-hover: hover) {
					.service__list__item__link img {
						transition: .3s;
						transform: scale(1);
					}
					.service__list__item__link:hover img {
						transform: scale(1.05);
						opacity: .8;
					}
				}

/* PC ================================================== */
@media all and (min-width: 769px){

}

/* Tablet ================================================== */
@media all and (max-width: 768px){
#page_top {
	background-image: url(../image/service/service-page_top@sp.webp);
}

#service {
	padding: 24px 0;
}
	.service__inner {
		width: 100%;
		max-width: initial;
	}
		.service__list {
			grid-template-columns: repeat(1, 1fr);
			gap: 24px;
		}
			.service__list__item:nth-of-type(1),
			.service__list__item:nth-of-type(4),
			.service__list__item:nth-of-type(5) {
				grid-column: initial;
			}
					.service__list__item__number {
						top: 12px;
						left: 16px;
					}
					.service__list__item__ttl {
						top: 50%;
						left: 30px;
					}
						.service__list__item__main_ttl {
							margin-bottom: 8px;
							font-size: 22px;
						}
						.service__list__item__sub_ttl {
							font-size: 20px;
						}
					.service__list__item__txt {
						width: calc(100% - 40px);
						font-size: 14px;
						bottom: 20px;
						left: 30px;
					}
}

/* SP ================================================== */
@media all and (max-width: 575px){

}