/* =============================
  complication
=================================*/
#complication {
	background: #f2f2f3;
	padding-block: 7rem 12rem;
}

/* =============================
  counterplan
=================================*/
#counterplan {
	padding-block: 12rem 10rem;
	background: #fff;

	.inner {
		width: 1180px;

		.counterplanFlow {
			margin-top: 11rem;

			.counterplanFlow__notes {
				font-size: var(--fontSize16);
				letter-spacing: 0.025em;
				margin-top: 3rem;
				margin-left: 6.3rem;
			}
		}

		.cloud__list {
			li {
				&:nth-child(3) {
					.cloud__listbox {
						dt {
							.cloud__list_img {
								img {
									height: 5rem;
										@media (max-width:767px) {
											height: 3.5rem;
										}
								}
							} 
						}
					}
				}

				&:nth-child(1),
				&:nth-child(4),
				&:nth-child(6) {
					.cloud__listbox {
						& dd {

							.cloud__list_blueText {
								padding-top: 1rem;
							}
						}
					}
				}

				&:nth-child(2),
				&:nth-child(3),
				&:nth-child(5) {
					.cloud__listbox {
						dt {
							.cloud__list_sub {
								margin-top: 3rem;

								@media (max-width:767px) {
									margin-top: 1rem;
								}
							}
						}
					}
				}

				.cloud__listbox {
					padding-top: 1.5rem;

					dt {
						.cloud__list_subText {
							font-size: var(--fontSize13);
						}
					}

					dd {
						margin-top: 0;

						.cloud__list_text {
							font-size: var(--fontSize13);
						}
					}
				}
			}
		}
	}

	@media (max-width:767px) {
		padding-block: 8rem;

		.inner {
			.counterplanFlow {
				margin-top: 8rem;

				.counterplanFlow__notes {
					margin-left: 8vw;
				}
			}
		}
	}
}



/* =============================
  pickup
=================================*/
#pickup {
	padding-top: 11rem;

	.inner {
		width: 1180px;

		.pickupList {
			display: grid;
			gap: 12rem;
			margin-top: 3rem;

			.pickupList__item {
				display: grid;
				gap: 7rem;

				.pickupList__title {
					font-size: var(--fontSize28);
					font-family: var(--fontBIZUDPGothic);
					letter-spacing: 0.065em;
					color: var(--colorTurquoiseBlue);
					width: 100%;
					background: #fff;
					border-radius: 4rem;
					text-align: center;
					position: relative;
					padding: 1.3rem 1.6rem;

					&::before {
						content: "";
						background-image: url(../img/img-man1.png);
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
						width: 11.8rem;
						height: 12.6rem;
						position: absolute;
						left: 5%;
						bottom: 0;
					}

					&::after {
						content: "";
						position: absolute;
						bottom: -5rem;
						display: inline-block;
						vertical-align: middle;
						color: var(--colorBlack);
						line-height: 1;
						width: 0;
						height: 0;
						border-style: solid;
						border-color: transparent;
						border-width: 3rem 3rem;
						border-top-color: currentColor;
						border-bottom: 0;
						left: 50%;
						transform: translateX(-50%);
					}
				}

				.pickupList__content {
					background: #fff;
					border-radius: 4rem;

					.pickupList__head {
						font-size: var(--fontSize28);
						font-family: var(--fontBIZUDPGothic);
						letter-spacing: 0.065em;
						color: #fff;
						background: var(--colorTurquoiseBlue);
						padding: 1.3rem 1rem;
						text-align: center;
						position: relative;
						border-radius: 4rem 4rem 0 0;

						&::before {
							content: "";
							background-image: url(../img/img-man2.png);
							background-position: center;
							background-repeat: no-repeat;
							background-size: cover;
							width: 11.8rem;
							height: 12.6rem;
							position: absolute;
							right: 5%;
							bottom: 0;
						}
					}

					.pickupList__bottom {
						border-radius: 0 0 4rem 4rem;
						padding: 3rem 4rem 4rem;

						.pickupManage__column {
							display: grid;
							grid-template-columns: 1fr 1.22fr;
							padding-bottom: 3.6rem;

							.pickupManage__item {
								padding-right: 3rem;
								font-family: var(--fontBIZUDPGothic);

								.pickupManage__title {
									font-size: var(--fontSize20);
									color: var(--colorTurquoiseBlue);
									letter-spacing: 0.1em;
								}

								.pickupManage__list {
									margin-top: .7rem;

									li {
										position: relative;
										padding-left: 2rem;

										&::before {
											content: "";
											position: absolute;
											background-image: url(../img/icon-check-blue.svg);
											background-position: center;
											background-repeat: no-repeat;
											background-size: cover;
											width: 1.6rem;
											height: 1.6rem;
											left: 0;
											top: 50%;
											transform: translateY(-50%);
										}
									}
								}

								&:first-child {
									padding-left: 2rem;
								}

								&:nth-child(2) {
									border-left: 1px solid var(--colorBlack);
									padding-left: 3rem;
									padding-right: 0;

									.pickupManage__title {
										color: var(--colorGreen);
									}

									.pickupManage__list {
										li {
											&::before {
												background-image: url(../img/icon-check-green.svg);
											}
										}
									}

								}
							}
						}

						.pickupManage__img {
							img {
								width: 83%;
								margin-inline: auto;
							}

							display: flex;
							padding-top: 5rem;
							border-top: 1px solid var(--colorBlack);
						}

						.pickupList__headText {
							font-size: var(--fontSize20);
							font-family: var(--fontBIZUDPGothic);
							letter-spacing: 0.055em;
							padding: 0 4rem;
						}

						.pickup__tableWrap {
							width: 100%;

							.pickup__table {
								width: 100%;
								margin-top: 3.2rem;

								thead {
									th {
										text-align: center;
										padding: 1.2rem;
										color: var(--colorTurquoiseBlue);
										font-size: var(--fontSize16);
										font-family: var(--fontBIZUDPGothic);
										border-top: 1px solid var(--colorBlack);
										border-right: 1px solid var(--colorBlack);

										&:nth-child(1) {
											width: 23.3%;
										}

										&:nth-child(2) {
											width: 34%;
										}

										&:nth-last-child(1) {
											border-right: none;
										}
									}

								}

								tbody {
									tr {
										td {
											padding: 1.2rem 0 1.2rem 2.5rem;
											font-size: var(--fontSize16);
											font-family: var(--fontBIZUDPGothic);
											border-top: 1px solid var(--colorBlack);
											border-right: 1px solid var(--colorBlack);

											&:first-child {
												padding: 1.2rem 0;
											}

											&:nth-last-child(1) {
												border-right: none;
											}
										}

										&:nth-last-child(1) {
											td {
												border-bottom: 1px solid var(--colorBlack);
											}
										}
									}
								}
							}
						}

						.pickupFunction {
							margin-top: 3.2rem;

							.pickupFunction__head {
								font-size: var(--fontSize20);
								font-family: var(--fontBIZUDPGothic);
								color: var(--colorTurquoiseBlue);
								text-align: center;
							}

							.pickupFunction__column {
								display: grid;
								grid-template-columns: repeat(4, 1fr);
								gap: 2rem;
								margin-top: 1.2rem;

								.pickupFunction__item {
									border-radius: 1rem;
									border: 1px solid var(--colorTurquoiseBlue);
									padding: 3rem 0.2rem 3.2rem;

									.pickupFunction__title {
										font-size: var(--fontSize20);
										font-family: var(--fontBIZUDPGothic);
										position: relative;
										letter-spacing: 0.065em;
										text-align: center;
										padding-bottom: 3rem;

										&::after {
											content: "";
											width: 4rem;
											height: 1px;
											background: var(--colorBlack);
											position: absolute;
											bottom: 1.5rem;
											left: 50%;
											transform: translateX(-50%);
										}
									}

									.pickupFunction__text {
										font-size: var(--fontSize16);
										font-family: var(--fontBIZUDPGothic);
										letter-spacing: 0.035em;
										padding-inline: 2rem;
									}

									.pickupFunction__list {
										display: grid;
										gap: 0.5rem;
										padding-inline: 2rem;

										li {
											font-size: var(--fontSize16);
											font-family: var(--fontBIZUDPGothic);
											letter-spacing: 0.06em;
											position: relative;
											padding-left: 1rem;

											&::before {
												content: "";
												position: absolute;
												left: 0;
												top: 1rem;
												width: 0.4rem;
												height: 0.4rem;
												border-radius: 50%;
												background: var(--colorBlack);
											}
										}
									}
								}
							}
						}

						.pickupFlow {
							display: grid;
							grid-template-columns: repeat(3, 1fr);
							gap: 7.6rem;
							margin-top: 4rem;

							.pickupFlow__item {
								border: 1px solid var(--colorTurquoiseBlue);
								border-radius: 1rem;
								position: relative;
								background: #ebf9f8;

								&::after {
									content: "";
									position: absolute;
									display: inline-block;
									vertical-align: middle;
									color: var(--colorTurquoiseBlue);
									line-height: 1;
									width: 0;
									height: 0;
									border-style: solid;
									border-color: transparent;
									border-width: 3rem;
									border-left-color: currentColor;
									border-right: 0;
									right: -6rem;
									top: 50%;
									transform: translateY(-50%);
								}

								&:nth-last-child(1) {
									&::after {
										content: none;
									}
								}

								.pickupFlow__name {
									font-size: var(--fontSize20);
									font-family: var(--fontBIZUDPGothic);
									color: var(--colorTurquoiseBlue);
									text-align: center;
									padding: 1.4rem 2rem;
									letter-spacing: 0.065em;
									border-radius: 1rem 1rem 0 0;
									background: #fff;
									border-bottom: 1px solid var(--colorTurquoiseBlue);
								}

								.pickupFlow__desc {
									font-size: var(--fontSize16);
									font-family: var(--fontBIZUDPGothic);
									letter-spacing: 0.035em;
									padding: 1.2rem 2rem 1.5rem;
									background: #fff;
									min-height: 7.8rem;
								}

								.pickupFlow__textarea {
									position: relative;
									padding: 3.5rem 2rem 2rem;
									border-radius: 0 0 1rem 1rem;

									&::before {
										content: "";
										position: absolute;
										top: 0;
										display: inline-block;
										vertical-align: middle;
										color: var(--colorBlack);
										line-height: 1;
										width: 0;
										height: 0;
										border-style: solid;
										border-color: transparent;
										border-width: 1.5rem;
										border-top-color: currentColor;
										border-bottom: 0;
										left: 50%;
										transform: translateX(-50%);
									}

									.pickupFlow__title {
										font-size: var(--fontSize20);
										font-family: var(--fontBIZUDPGothic);
										letter-spacing: 0.065em;
										text-align: center;
										position: relative;
										padding-bottom: 3rem;

										&::after {
											content: "";
											width: 4rem;
											height: 1px;
											background: var(--colorBlack);
											position: absolute;
											bottom: 1.5rem;
											left: 50%;
											transform: translateX(-50%);
										}
									}

									.pickupFlow__list {
										display: grid;
										gap: 0.5rem;

										li {
											font-size: var(--fontSize16);
											font-family: var(--fontBIZUDPGothic);
											letter-spacing: 0.035em;
											line-height: 1.625;
											padding-left: 1rem;
											position: relative;

											&::before {
												content: "";
												position: absolute;
												left: 0;
												top: 1rem;
												width: 0.4rem;
												height: 0.4rem;
												border-radius: 50%;
												background: var(--colorBlack);
											}
										}

									}
								}
							}
						}
					}
				}
			}
		}
	}

	@media (max-width:1200px) {
		.inner {
			.pickupList {
				.pickupList__item {
					.pickupList__title {
						&::before {
							left: 0%;
						}
					}
				}
			}
		}
	}
	
	@media (max-width:767px) {
		padding-top: 8rem;

		.inner {
			.pickupList {
				gap: 8rem;

				.pickupList__item {
					.pickupList__title {
						border-radius: 2rem;
						&::before {
							content: none;
						}
					}

					.pickupList__content {
						border-radius: 2rem;
						.pickupList__head {
							border-radius: 2rem 2rem 0 0;
							&::before {
								width: calc(11.8rem * 0.7);
								height: calc(12.6rem * 0.7);
								right: 0;
							}
						}

						.pickupList__bottom {
							padding-inline: 2.5rem;
							border-radius: 0 0 2rem 2rem;

							.pickupFunction {
								.pickupFunction__column {
									grid-template-columns: 1fr;
								}
							}

							.pickupManage__img {
								padding-top: 2rem;

								img {
									width: 100%;
								}
							}

							.pickupList__headText {
								padding: 0 4vw;
							}

							.pickupFlow {
								grid-template-columns: 1fr;

								.pickupFlow__item {
									&::after {
										bottom: -7rem;
										transform: translateX(-50%) rotate(90deg);
										left: 50%;
										top: unset;
									}

									.pickupFlow__desc {
										min-height: unset;
									}
								}
							}

							.pickup__tableWrap {
								overflow-x: auto;
								-webkit-overflow-scrolling: touch;
								width: 34rem;

								.pickup__table {
									width: 98rem;
								}
							}

							.pickupManage__column {
								grid-template-columns: 1fr;
								padding-bottom: 2rem;

								.pickupManage__item {
									padding-right: 0;
									padding-bottom: 2rem;

									&:first-child {
										padding-left: 0;
									}

									&:nth-child(2) {
										padding-left: 0;
										padding-top: 2rem;
										padding-bottom: 0;
										border-left: none;
										border-top: 1px solid var(--colorBlack);
									}

									.pickupManage__list {
										li {
											&::before {
												transform: unset;
												top: 1vw;
											}
										}
									}
								}
							}
						}

					}
				}
			}
		}
	}
}

/* =============================
  comparison
=================================*/

#comparison {
	padding-block: 11rem 12rem;

	@media (max-width:767px) {
		padding-block: 8rem;
	}
}

/* =============================
  case
=================================*/
#case {
	.common__BlueLink {
		margin-top: 8rem;
	}
}

/* =============================
  service-flow
=================================*/
#service-flow {
	padding-block: 8rem 12rem;
	background: #fff;

	.inner {
		width: 1180px;

		.common__BlueLink {
			margin-top: 8rem;
		}
	}

	@media (max-width:767px) {
		padding-block: 8rem;
	}
}

/* =============================
  contact
=================================*/
#contact {
	border-top: 1px solid var(--colorBlack);
}