@charset "utf-8";

.edit-area {
	&.concept {
		padding: 136px 0;
		background: #f3f6fa;

		@media screen and (max-width: 767px) {
			padding: 60px 0;
		}
		.concept-set {
			display: flex;
			flex-direction: row-reverse;
			align-items: flex-start;
			@media screen and (max-width: 767px) {
				display: flex;
				flex-direction: column;
				gap: 3rem;
			}

			.set-photo {
				position: sticky;
				top: 13.5rem;
				z-index: 1;
				width: 48rem;
				flex-shrink: 0;
				@media screen and (max-width: 1240px) {
					width: 40%;
				}
				@media screen and (max-width: 767px) {
					position: static;
					margin: 0 auto;
					width: 80%;
				}

				& video{
					display: block;
					width: 100%;
					height: auto;
				}
			}
			.set-text {
				.text-title {
					margin-bottom: 3rem;
					font-weight: 900;
					font-size: 3.2rem;
					line-height: 150%;
					letter-spacing: 0.05em;
					color: #009f6d;
					@media screen and (max-width: 767px) {
						margin-bottom: 2rem;
						font-size: 2rem;
					}
				}
				.text-detail {
					margin-bottom: 6.4rem;
					padding-right: 4rem;
					font-weight: 400;
					font-size: 1.8rem;
					line-height: 180%;
					letter-spacing: 0.05em;
					@media screen and (max-width: 767px) {
						margin-bottom: 3rem;
						font-size: 1.4rem;
					}
				}
			}
		}
	}

	&.efficiency {
		padding: 13.6rem 0;
		@media screen and (max-width: 767px) {
			padding: 6rem 0;
		}

		.efficiency-list {
			display: flex;
			flex-direction: column;
			gap: 13.6rem;
			counter-reset: number;

			@media screen and (max-width: 767px) {
				gap: 6rem;
			}

			> li {
				counter-increment: number;
				.list-title {
					position: relative;
					margin-bottom: 2rem;
					padding-left: 6.4rem;
					font-weight: 700;
					font-size: 3rem;
					line-height: 140%;
					letter-spacing: 0.05em;
					color: #1f1f1f;

					@media screen and (max-width: 767px) {
						padding-left: 4.6rem;
						font-size: 2rem;
					}

					&:before {
						content: counter(number, decimal-leading-zero);
						position: absolute;
						left: 0;
						top: 0;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 4.8rem;
						height: 4.8rem;

						font-family: "Lato";
						font-weight: 700;
						font-size: 2.2rem;
						line-height: 160%;
						text-align: center;
						color: #ffffff;

						background: #83d400;
						border-radius: 0.8rem;
					}

					@media screen and (max-width: 767px) {
						&:before {
							top: -0.4rem;
							width: 3.6rem;
							height: 3.6rem;
							font-size: 1.8rem;
							border-radius: 0.4rem;
						}
					}
				}
				.list-detail {
					margin-bottom: 4.8rem;
					font-weight: 400;
					line-height: 160%;
					letter-spacing: 0.05em;
					color: #000000;

					@media screen and (max-width: 767px) {
						margin-bottom: 2rem;
						font-size: 1.4rem;
					}
				}

				.list-child {
					& li {
						background: #f3f6fa;
						border-radius: 0.8rem;
						overflow: hidden;

						.list-photo{
							& img{
								@media screen and (max-width: 767px) {
									width: 100%;
								}
							}
						}

						.list-text {
							.text-title {
								margin-bottom: 0.8rem;
								font-weight: 700;
								font-size: 2rem;
								line-height: 150%;
								letter-spacing: 0.05em;
								color: #009f6d;
								@media screen and (max-width: 767px) {
									font-size: 1.8rem;
								}
							}
							.text-detail {
								font-weight: 400;
								line-height: 160%;
								letter-spacing: 0.05em;
								@media screen and (max-width: 767px) {
									font-size: 1.4rem;
								}

								& p {
									margin-bottom: 0.8rem;
									&:last-child {
										margin-bottom: 0;
									}
								}

								.detail-list {
									&.num {
										counter-reset: detail-num;
										& li {
											position: relative;
											counter-increment: detail-num;
											padding-left: 2rem;

											@media print, screen and (min-width: 767.01px) {
												font-size: 1.5rem;
											}

											&:before {
												content: counter(detail-num) ".";
												position: absolute;
												left: 0;
												z-index: 1;
											}
										}
									}
								}
							}
						}
					}

					&.type01 {
						display: flex;
						gap: 2.4rem;

						@media screen and (max-width: 767px) {
							flex-direction: column;
							gap: 1.5rem;
						}

						& li {
							width: calc(100% / 3 - 2.4rem * 2 / 3);

							@media screen and (max-width: 767px) {
								width: 100%;
							}

							.list-text {
								padding: 2.4rem 3.2rem;
								@media screen and (max-width: 1240px) {
									padding: 2rem;
								}
								@media screen and (max-width: 767px) {
									padding: 2rem;
								}
							}
						}
					}

					&.type02 {
						display: flex;
						flex-direction: column;
						gap: 1.5rem;

						& li {
							display: flex;
							@media screen and (max-width: 767px) {
								flex-direction: column;
							}

							.list-photo {
								width: 34.4rem;
								flex-shrink: 0;
								@media screen and (max-width: 767px) {
									width: 100%;
								}
							}
							.list-text {
								padding: 2.8rem 3.2rem 2.8rem;
								@media screen and (max-width: 767px) {
									padding: 2rem;
								}
							}
						}
					}

					&.type03 {
						display: flex;
						flex-direction: column;
						gap: 4.8rem;

						& li {
							display: flex;
							flex-direction: row-reverse;
							@media screen and (max-width: 767px) {
								flex-direction: column;
							}
							.list-photo {
								width: 64.8rem;
								padding: 0.4rem;
								flex-shrink: 0;

								@media screen and (max-width: 1240px) {
									width: 40%;
								}
								@media screen and (max-width: 767px) {
									width: 100%;
									padding: 0.2rem;
								}
							}
							.list-text {
								padding: 2.8rem 3.2rem;
								@media screen and (max-width: 767px) {
									padding: 2rem;
								}
							}
						}
					}
				}
			}
		}
	}
}