@charset "UTF-8";

.edit-area {
	&.lkk {
		padding: 13rem 0 21.4rem;
		@media screen and (max-width: 767px) {
			padding: 6rem 0;
		}

		.logomark-set {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 5.8rem;
			margin-bottom: 12.6rem;

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

			.set-icon {
				width: 14.7rem;
				flex-shrink: 0;
				@media screen and (max-width: 767px) {
					width: 10rem;
				}
			}
			.set-text {
				font-weight: 700;
				font-size: 4.2rem;
				line-height: 1.38;
				letter-spacing: 0.09em;
				@media screen and (max-width: 767px) {
					font-size: 2rem;
					text-align: center;
				}
			}
		}

		.lkk-set {
			display: flex;
			flex-direction: row-reverse;
			gap: 8.7rem;
			margin-bottom: 7rem;

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

				&.rev-sp {
					flex-direction: column-reverse;
				}
			}

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

			.set-photo {
				width: 21.4rem;
				flex-shrink: 0;
				@media screen and (max-width: 767px) {
					width: 100%;
					& img {
						margin: 0 auto;
						width: 50%;
					}
				}

				.photo-list {
					width: 24.9rem;
					display: flex;
					flex-direction: column;
					gap: 3rem;
					@media screen and (max-width: 767px) {
						width: 100%;
						gap: 2rem;
						flex-direction: row;
					}

					& li {
						@media screen and (max-width: 767px) {
							width: calc(50% - 1rem);
						}
					}

					.list-main {
						@media screen and (max-width: 767px) {
							& img {
								width: 100%;
								aspect-ratio: 194 / 140;
							}
						}
					}
					.list-caption {
						margin-top: 1rem;
						font-weight: 400;
						text-align: center;
						letter-spacing: 0.02em;
						@media screen and (max-width: 767px) {
							font-size: 1.2rem;
							line-height: 1.4;
						}
					}
				}
			}
		}
	}
}