@charset "utf-8";

.edit-area {
	&.our {
		padding-bottom: 21.6rem;

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

		@media print, screen and (min-width: 767.01px) {
			.inner {
				&:before {
					content: "";
					position: absolute;
					right: -24rem;
					top: 0;
					z-index: 0;
					display: block;
					width: 90rem;
					height: calc(100% + 12rem);
					border-radius: 7rem 0 0 7rem;
					background: #fff;
				}
			}
		}

		.our-list {
			position: relative;
			z-index: 1;
			display: flex;
			flex-direction: column;
			gap: 10rem;

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

			& li {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.list-text {
				width: calc(100% - 58.4rem - 17.2rem);

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

			.text-title {
				width: 100%;

				&.type01 {
					position: relative;
					margin-bottom: 6rem;
					padding-left: 2.8rem;
					font-weight: 700;
					font-size: 2.8rem;
					letter-spacing: 0.08em;

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

					&:after {
						content: "";
						position: absolute;
						left: 0;
						top: 0.6rem;
						z-index: 1;
						display: block;
						width: 1.8rem;
						height: 1.8rem;
						background: linear-gradient(141.29deg, #000000 18.32%, #140470 34.29%, #0638bb 59.63%, #2691d7 78.7%);
						border-radius: 50%;
					}

					@media screen and (max-width: 767px) {
						&:after {
							width: 1.2rem;
							height: 1.2rem;
							top: 0.4rem;
						}
					}
				}

				&.type02 {
					margin-bottom: 3rem;
					font-weight: 700;
					font-size: 2.4rem;
					line-height: 1.42;
					letter-spacing: 0.08em;
					color: #0033b3;

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

			.text-detail {
				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) {
					font-size: 1.4rem;
				}

				& p {
					margin-bottom: 3rem;

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

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

			.list-photo {
				width: 58.4rem;

				@media screen and (max-width: 767px) {
					margin-top: 2rem;
					width: 100%;
					padding: 2rem;
					background: #fff;
					border-radius: 1rem;
				}

				@media print, screen and (min-width: 767.01px) {
					&.custom01 {
						margin-top: -14rem;
					}
				}
			}
		}
	}

	&.job {
		padding: 12rem 0;

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

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

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

			.set-text {
				width: calc(100% - 59.7rem - 13rem);
				font-weight: 400;
				line-height: 1.75;
				letter-spacing: 0.06em;
				font-feature-settings: "palt" on;

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

				& p {
					margin-bottom: 2.8rem;

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

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

			.set-photo {
				width: 59.7rem;

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

				.photo-list {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					gap: 5.5rem;
					margin-top: -11rem;

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

					& li {
						width: 27.1rem;

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

					.list-icon {
						margin-bottom: 2.4rem;

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

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

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

		.job-list {
			display: flex;
			flex-wrap: wrap;
			gap: 5.6rem;

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

			> div {
				width: calc(50% - 2.8rem);

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

				&.sea {
					background: linear-gradient(90.59deg, #4286b1 6.01%, #73c4cd 93.99%);

					.list-group {
						width: calc(100% / 3 - 1.3rem * 2 / 3);
						background: linear-gradient(93.94deg, #e9f8fe 3.41%, #e0fdff 98.25%);

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

          .group-title {
            &.type01,
            &.type02 {
              color: #0033b3;
            }
          }

					& a {
						&.list-group {
							.group-title {
								&.type01 {
									&:after {
										background-image: url(../../common/img/parts/icon_arrow01.svg);
									}
								}
							}
						}
					}
				}

				&.office {
					background: linear-gradient(90.48deg, #fd6132 6.02%, #ffc36e 98.88%);

					.list-group {
						/* width: calc(100% / 2 - 1.3rem); */
						width: 100%;
						background: #fff3db;
					}
          .group-title {
            &.type01,
            &.type02 {
              color: #fd6132;
            }
          }
					& a {
						&.list-group {
							.group-title {
								&.type01 {
									&:after {
										background-image: url(../../common/img/parts/icon_arrow01_orange.svg);
									}
								}
							}
						}
					}
				}
			}

			& dt {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 6.6rem;
				font-weight: 700;
				font-size: 2.4rem;
				letter-spacing: 0.04em;
				color: #ffffff;

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

			& dd {
				display: flex;
        flex-wrap: wrap;
        align-items: center;
				gap: 0 1.3rem;
				margin: 0 0.2rem 0.2rem;
				padding: 2rem 4.8rem;
				height: calc(100% - 6.8rem);
				background: #fff;

				@media screen and (max-width: 767px) {
          padding: 2rem;
          height: auto;
          flex-direction: column;
          gap: 1rem;
					/* height: calc(100% - 5.2rem); */
					padding: 1rem;
				}
			}

			.list-group {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 6.6rem;
				text-decoration: none;
        @media screen and (max-width: 767px) {
          height: 4rem;
        }
			}

			& a {
				&.list-group {
					.group-title {
						margin-bottom: 0;
            width: auto;
						&.type01 {
							position: relative;
							padding-right: 2.6rem;
							@media screen and (max-width: 767px) {
              	padding: 0 2.6rem;
							}
							&:after {
								content: "";
								position: absolute;
								right: 0;
								top: 50%;
								z-index: 1;
								transform: translateY(-50%);
								display: block;
								width: 1.9rem;
								height: 1.9rem;
								background: no-repeat center center / 100% auto;
							}
						}
					}
				}
			}

			.group-title {
        width: 100%;
				&.type01 {
					margin-bottom: 2rem;
					font-weight: 700;
					font-size: 2rem;
					text-align: center;
					letter-spacing: 0.06em;
					font-feature-settings: "palt" on;

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

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

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

		.life-label {
			display: flex;
			flex-wrap: wrap;
			gap: 2.4rem;
			margin-bottom: 6rem;

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

			&.sea {
				.label-main {
					background: linear-gradient(90.59deg, #4286b1 6.01%, #73c4cd 93.99%);
				}
			}

			&.office {
				.label-main {
					background: linear-gradient(138.7deg, #fd6132 2.84%, #ffc36e 97.16%);
				}
			}

			.label-main {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 38.6rem;
				height: 10.9rem;

				font-weight: 700;
				font-size: 3rem;
				text-align: center;
				letter-spacing: 0.04em;
				color: #ffffff;
				border-radius: 5.45rem;

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

			.label-detail {
				width: calc(100% - 38.6rem - 2.4rem);
				padding: 2.7rem 6.6rem;
				font-weight: 400;
				line-height: 1.75;
				letter-spacing: 0.06em;
				font-feature-settings: "palt" on;
				background: #fff;
				border-radius: 5.45rem;

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

		.life-list {
			display: flex;
			flex-wrap: wrap;
			gap: 5.4rem 6.3rem;
			margin-bottom: 9.2rem;

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

			& li {
				width: calc(100% / 3 - 4.2rem);

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

			.list-photo {
				margin-bottom: 3rem;
				border-radius: 1rem;
				overflow: hidden;

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

			.list-text {
				.text-title {
					margin-bottom: 2rem;
					font-weight: 700;
					font-size: 2rem;
					line-height: 1.2;

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

				.text-detail {
					font-weight: 400;
					line-height: 1.5;
				}
			}
		}
	}
}