@charset "utf-8";

.edit-area {
	&.history {
		padding-bottom: 6rem;

		@media screen and (max-width: 767px) {
			padding-bottom: 3rem;
		}

		.history-detail {
			margin-bottom: 6rem;
			font-weight: 400;
			line-height: 1.75;
			letter-spacing: 0.06em;
			font-feature-settings: "palt" on;
		}

		.history-list {
			display: flex;
			flex-direction: column;
			gap: 3rem;

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

			& li {
				// position: relative;
				// left: -1rem;
				// opacity: 0;
				// width: 100rem;
				padding: 4rem 6.7rem;
				background: #fff;
				border-radius: 0 9.5rem 9.5rem 0;
				// transition:
				// 	ease 0.25s left,
				// 	ease 0.25s opacity;

				// &.on {
				// 	left: 0;
				// 	opacity: 1;
				// }

				// @media print {
				// 	left: 0;
				// 	opacity: 1;
				// }

				@media screen and (max-width: 767px) {
					padding: 2rem;
					width: 100%;
					border-radius: 0 2rem 2rem 0;
				}

				// @media print,
				// screen and (min-width: 767.01px) {
				// 	&:nth-child(2) {
				// 		margin-left: 15.2rem;
				// 	}

				// 	&:nth-child(3) {
				// 		margin-left: 30rem;
				// 	}

				// 	&:nth-child(4) {
				// 		margin-left: 44rem;
				// 	}
				// }
			}

			.list-title {
				display: flex;
				flex-wrap: wrap;
				gap: 1.4rem;
				margin-bottom: 2rem;

				font-weight: 700;
				font-size: 1.8rem;
				letter-spacing: 0.06em;
				font-feature-settings: "palt" on;

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

				.title-date {
					color: #0033b3;

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

			.list-set {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				gap: 4rem;

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

				.set-text {
					font-weight: 400;
					line-height: 1.5;
					letter-spacing: 0.06em;
					font-feature-settings: "palt" on;
				}

				.set-photo {
					flex-shrink: 0;
				}
			}
		}



		.history-group {
			.group-title {
				display: flex;
				flex-wrap: wrap;
				gap: 1.4rem;
				margin-bottom: 2rem;

				font-weight: 700;
				font-size: 1.8rem;
				letter-spacing: 0.06em;
				font-feature-settings: "palt" on;

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

				.title-date {
					color: #0033b3;

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

			.group-set {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				gap: 4rem;

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

				.set-text {
					font-weight: 400;
					line-height: 1.5;
					letter-spacing: 0.06em;
					font-feature-settings: "palt" on;
				}

				.set-photo {
					flex-shrink: 0;
					& img{
						mix-blend-mode: multiply;
					}
				}
			}
		}
	}

	&.keywords {
		padding: 6rem 0 12rem;
		background: #e5ebf0;

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

		.keywords-list {
			display: flex;
			flex-direction: column;
			gap: 10rem;
			padding: 14.1rem 14.8rem 11rem;
			background: linear-gradient(128.62deg, #000000 4.62%, #140470 28.17%, #0638bb 65.55%, #2691d7 93.68%);
			border-radius: 6rem;
			counter-reset: number;

			@media screen and (max-width: 767px) {
				gap: 4rem;
				padding: 4rem 2rem;
				border-radius: 2rem;
			}

			& li {
				counter-increment: number;
				padding-bottom: 7rem;
				border-bottom: 0.2rem solid #fff;

				@media screen and (max-width: 767px) {
					padding-bottom: 3rem;
				}
			}

			.list-title {
				position: relative;
				padding-left: 8.7rem;
				margin-bottom: 2.7rem;

				font-weight: 700;
				font-size: 2.8rem;
				letter-spacing: 0.08em;
				font-feature-settings: "palt" on;
				color: #ffffff;

				@media screen and (max-width: 767px) {
					margin-bottom: 2rem;
					padding-left: 5rem;
					font-size: 1.8rem;
					line-height: 1.5;
				}

				&:before {
					content: counter(number, decimal-leading-zero);
					position: absolute;
					left: 0;
					top: 50%;
					z-index: 1;
					font-family: "Roboto Flex";
					font-weight: 600;
					font-size: 7rem;
					line-height: 4.8rem;
					letter-spacing: 0.02em;
					transform: translateY(-50%);
				}

				@media screen and (max-width: 767px) {
					&:before {
						font-size: 3.4rem;
						line-height: 2rem;
					}
				}
			}

			.list-detail {
				font-weight: 500;
				font-size: 2rem;
				line-height: 1.5;
				letter-spacing: 0.06em;
				font-feature-settings: "palt" on;
				color: #ffffff;

				@media screen and (max-width: 767px) {
					font-size: 1.4rem;
					line-height: 1.8;
				}
			}
		}
	}

	&.numbers {
		padding: 12rem 0;

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

		.numbers-list {
			display: flex;
			flex-wrap: wrap;
			gap: 5rem;
			margin-bottom: 5rem;

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

			&:last-child {
				margin-bottom: 0;
			}

			& li {
				padding: 3.6rem 0 2.7rem;
				border: 0.2rem solid #0033b3;

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

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

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

			&.type02 {
				& li {

					@media print,
					screen and (min-width: 767.01px) {
						padding-bottom: 3.6rem;
					}

					width: calc(100% / 2 - 5rem / 2);

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

				.list-title,
				.list-detail {
					text-align: left;
				}

				.list-value {
					justify-content: flex-start;
				}

				.list-set {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					@media print,
					screen and (min-width: 767.01px) {
						padding: 0 0 0 5rem;
					}

					.set-text {
						width: 19.5rem;

						@media screen and (max-width: 767px) {
							width: 13rem;

							.list-detail {
								font-size: 1.2rem;
							}
						}
					}

					.set-photo {
						display: flex;
						align-items: center;
						justify-content: center;
						width: calc(100% - 19.5rem);
						text-align: center;

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

			&.type03 {
				& li {

					@media print,
					screen and (min-width: 767.01px) {
						padding-left: 4.8rem;
						padding-right: 4.8rem;
					}
				}

				.list-title,
				.list-detail {
					text-align: left;
				}

				.list-title {
					margin-bottom: 1rem;
					font-feature-settings: normal;
				}

				.list-detail {
					margin-bottom: 2rem;
					font-feature-settings: normal;
				}

				.list-photo {
					@media screen and (max-width: 767px) {
						position: relative;

						&:after {
							content: "クリックして画像を開く";
							position: absolute;
							left: 50%;
							bottom: 0;
							z-index: 1;
							display: inline-block;
							color: #FFF;
							font-size: 1rem;
							padding: 0.5rem 2.5rem 0.5rem 1rem;
							border-radius: 0.4rem;
							background: #111 url(../../common/images/com_ic01.png) no-repeat right 0.9rem top 0.5rem / 1rem auto;
							white-space: nowrap;
							transform: translateX(-50%);
							pointer-events: none;
						}
					}
				}
			}

			.list-title {
				margin-bottom: 3.9rem;
				font-weight: 700;
				font-size: 2.4rem;
				line-height: 1.42;
				text-align: center;
				letter-spacing: 0.08em;
				font-feature-settings: "palt" on;
				color: #0033b3;

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

			.list-value {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				gap: 0.6rem;
				margin-bottom: 3.4rem;

				@media screen and (max-width: 767px) {
					margin-bottom: 1.6rem;
				}

				.value-main {
					font-family: "Roboto Flex";
					font-weight: 700;
					font-size: 11rem;
					line-height: 8rem;
					text-align: right;
					letter-spacing: 0.04em;

					@media screen and (max-width: 767px) {
						font-size: 6rem;
						line-height: 4rem;
					}
				}

				.value-unit {
					font-weight: 900;
					font-size: 5.2rem;
					letter-spacing: 0.08em;
					font-feature-settings: "palt" on;

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

			.list-detail {
				font-weight: 400;
				font-size: 1.8rem;
				line-height: 1.67;
				text-align: center;
				letter-spacing: 0.06em;
				font-feature-settings: "palt" on;

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

	&.message {
		padding: 12rem 0 24rem;
		background: #e5ebf0;

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

		.message-set {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 12rem;

			@media screen and (max-width: 767px) {
				margin-bottom: 4rem;
				flex-direction: column-reverse;
			}

			.set-text {
				width: calc(100% - 68.9rem - 6rem);
				font-weight: 400;
				font-size: 1.8rem;
				line-height: 1.67;
				letter-spacing: 0.06em;
				font-feature-settings: "palt" on;

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

				& p {
					margin-bottom: 3rem;

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

					&:last-child {
						margin-bottom: 0;
					}
				}
			}

			.set-photo {
				display: flex;
				flex-wrap: nowrap;
				width: 68.9rem;

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

				& img {
					min-width: 92.9rem;
					border-radius: 8.8rem 0 0 0;

					@media screen and (max-width: 767px) {
						min-width: auto;
						border-radius: 0;
					}
				}
			}
		}

		.job-box {
			padding: 5.7rem 0 9rem;
			background: linear-gradient(90deg, #d51d05 0%, #ed5300 100%);
			border-radius: 14.3rem;

			@media screen and (max-width: 767px) {
				padding: 3rem 2rem;
				border-radius: 1rem;
			}

			.box-title {
				margin-bottom: 4.2rem;
				font-weight: 700;
				font-size: 2.8rem;
				text-align: center;
				letter-spacing: 0.06em;
				font-feature-settings: "palt" on;
				color: #ffffff;

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

			.box-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 2.4rem;

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