@charset "UTF-8";

.edit-area {
	&.service {
		padding-bottom: 11.5rem;
		@media screen and (max-width: 767px) {
			padding-bottom: 6rem;
		}

		.service-bsp {
			margin-bottom: 6.5rem;
			padding: 5.6rem;
			background: #f8f8f8;
			border-radius: 2rem;
			@media screen and (max-width: 767px) {
				margin-bottom: 4rem;
				padding: 3rem 2rem;
				border-radius: 1rem;
			}

			.bsp-title {
				margin-bottom: 3.3rem;
				@media screen and (max-width: 767px) {
					margin-bottom: 2rem;
				}
				.title-main {
					margin-bottom: 1rem;
					font-weight: 700;
					font-size: 2.4rem;
					line-height: 1.4;
					text-align: center;
					letter-spacing: 0.11em;
					@media screen and (max-width: 767px) {
						margin-bottom: 0.5rem;
						font-size: 2rem;
					}
				}
				.title-sub {
					font-family: "Jost";
					font-weight: 600;
					line-height: 120%;
					text-align: center;
					letter-spacing: 0.01em;
					color: #e50012;
				}
			}
			.common-text {
				margin: 0 auto;
				max-width: 87rem;
			}
		}

		.service-photo {
			text-align: center;
			& img {
				display: inline-block;
			}
		}

		.service-set{
			display: flex;
			flex-direction: row-reverse;
			gap: 6rem;
			margin: 8rem 0;
			@media screen and (max-width: 767px) {
				flex-direction: column;
				gap: 3rem;
			}
			.set-photo{
				width: 60rem;
				flex-shrink: 0;
				@media screen and (max-width: 767px) {
					width: 100%;
				}
			}
		}

		.service-info {
			margin-bottom: 6rem;
			padding: 4.7rem 6rem;
			background: #f8f8f8;
			border-radius: 2rem;
			@media screen and (max-width: 767px) {
				margin-bottom: 4rem;
				padding: 3rem 2rem;
				border-radius: 1rem;
			}
			.info-title {
				margin-bottom: 3.5rem;
				font-weight: 700;
				font-size: 2rem;
				line-height: 1.6;
				letter-spacing: 0.08em;
				@media screen and (max-width: 767px) {
					margin-bottom: 2rem;
					font-size: 1.8rem;
				}
			}

			.info-group {
				position: relative;
				display: flex;
				flex-wrap: wrap;
				gap: 14rem;
				@media screen and (max-width: 767px) {
					gap: 6rem;
				}
				&:before {
					content: "";
					position: absolute;
					left: calc(50% - 2.2rem);
					top: calc(50% - 2.2rem);
					width: 4.4rem;
					height: 4.4rem;
					pointer-events: none;
					background: url(../../img/service/icon_arrow01.svg) no-repeat 50% 50% / 100% auto;
				}
				@media screen and (max-width: 767px) {
					&:before {
						left: calc(50% - 1.5rem);
						top: calc(50% - 0.5rem);
						width: 3rem;
						height: 3rem;
						transform: rotate(90deg);
					}
				}
				.group-list {
					display: flex;
					flex-direction: column;
					width: calc(50% - 7rem);
					gap: 2rem;
					padding: 5rem 4.4rem;
					background: #fff;
					border-radius: 2rem;
					@media screen and (max-width: 767px) {
						width: 100%;
						padding: 3rem 2rem;
						gap: 1rem;
						border-radius: 1rem;
					}
					& li {
						position: relative;
						padding-left: 2rem;
						@media screen and (max-width: 767px) {
							padding-left: 1.5rem;
						}
						&:before {
							content: "";
							position: absolute;
							left: 0;
							top: 1rem;
							z-index: 1;
							width: 0.8rem;
							height: 0.8rem;
							background: #e50012;
							border-radius: 50%;
						}
						@media screen and (max-width: 767px) {
							&:before{
								top: 0.8rem;
								width: 0.6rem;
								height: 0.6rem;
							}
						}
					}
					.list-title {
						margin-bottom: 0.7rem;
						font-weight: 700;
						font-size: 1.8rem;
						line-height: 142%;
						letter-spacing: 0.02em;
						@media screen and (max-width: 767px) {
							margin-bottom: 0.5rem;
							font-size: 1.6rem;
						}
					}
					.list-detail {
						font-weight: 400;
						font-size: 1.8rem;
						line-height: 142%;
						letter-spacing: 0.02em;
						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
						}
					}
				}
			}

			.info-list {
				display: flex;
				flex-wrap: wrap;
				gap: 13rem;
				@media screen and (max-width: 767px) {
					flex-direction: column;
					gap: 3rem;
				}

				> li {
					display: flex;
					align-items: center;
					justify-content: center;
					width: calc(100% / 3 - 13rem * 2 / 3);
					min-height: 13rem;
					font-weight: 600;
					font-size: 1.8rem;
					line-height: 142%;
					letter-spacing: 0.02em;
					background: #fff;
					border-radius: 1rem;
					@media screen and (max-width: 767px) {
						width: 100%;
						min-height: 6rem;
						font-size: 1.6rem;
					}
				}

				.list-child {
					display: flex;
					flex-direction: column;
					gap: 1rem;
					width: 100%;
					height: 100%;
					background: #f8f8f8;
					@media screen and (max-width: 767px) {
						flex-direction: row;
					}

					> li {
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						padding: 1.8rem;
						background: #fff;
						border-radius: 1rem;
						@media screen and (max-width: 767px) {
							width: calc(50% - 0.5rem);
							font-size: 1.5rem;
							padding: 2rem 1rem;
						}

						&:before,
						&:after {
							content: "";
							position: absolute;
							z-index: 1;
							width: 7.5rem;
							height: 3rem;
							pointer-events: none;
							background: url(../../img/service/icon_arrow02.svg) no-repeat 50% 50% / 100% auto;
						}
						@media screen and (max-width: 767px) {
							&:before,
							&:after {
								width: 1.5rem;
								height: 1.5rem;
								transform: rotate(90deg);
								background-size: 5rem auto;
								background-position: right 0 top 50%;
							}
						}

						&:before{
							right: calc(100% + 3rem);
							top: calc(50% - 1.5rem);
						}
						@media screen and (max-width: 767px) {
							&:before{
								top: calc(100% + 0.75rem);
								right: auto;
								left: calc(50% - 1rem);
							}
						}

						&:after{
							left: calc(100% + 3rem);
							top: calc(50% - 1.5rem);
						}
						@media screen and (max-width: 767px) {
							&:after{
								top: auto;
								bottom: calc(100% + 0.75rem);
								left: calc(50% - 1rem);
							}
						}

					}
				}
			}

			.info-set {
				display: flex;
				align-items: center;
				gap: 10.6rem;
				@media screen and (max-width: 767px) {
					flex-direction: column;
					gap: 3rem;
				}
				.set-photo {
					width: 52rem;
					@media screen and (max-width: 767px) {
						width: 100%;
					}
				}
				.set-text {
					.text-list {
						display: flex;
						flex-direction: column;
						gap: 3rem;
						@media screen and (max-width: 767px) {
							gap: 1.5rem;
						}
						> li {
							padding-bottom: 3rem;
							border-bottom: 1px solid #e3e3e3;
							@media screen and (max-width: 767px) {
								padding-bottom: 2rem;
							}
							&:last-child {
								border-bottom: none;
								padding-bottom: 0;
							}
						}
						.list-title {
							margin-bottom: 2rem;
							font-weight: 700;
							font-size: 2rem;
							line-height: 1.6;
							letter-spacing: 0.08em;
							@media screen and (max-width: 767px) {
								margin-bottom: 1rem;
								font-size: 1.8rem;
							}
						}
						.list-detail {
							display: flex;
							flex-direction: column;
							gap: 0.8rem;
							& li {
								position: relative;
								padding-left: 2rem;
								font-weight: 400;
								font-size: 1.8rem;
								line-height: 142%;
								letter-spacing: 0.02em;

								@media screen and (max-width: 767px) {
									padding-left: 1.5rem;
									font-size: 1.4rem;
								}
								&:before {
									content: "";
									position: absolute;
									left: 0;
									top: 1rem;
									z-index: 1;
									width: 0.8rem;
									height: 0.8rem;
									background: #e50012;
									border-radius: 50%;
								}
								@media screen and (max-width: 767px) {
									&:before{
										top: 0.6rem;
										width: 0.6rem;
										height: 0.6rem;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}