@charset "utf-8";

@media print, screen and (min-width: 768px) {
	#breadcrumbs {
		margin-bottom: 7.8rem;
	}
}

.edit-area {
	&.office {
		padding-bottom: 25rem;

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

	.office-list {
		&.type01 {
			display: grid;
			gap: 4.2rem 4rem;
			margin-bottom: 4rem;
			grid-template-columns: auto 58rem;
			align-items: flex-start;
			@media screen and (max-width: 767px) {
				margin-bottom: 1rem;
				grid-template-columns: 1fr;
				gap: 1rem;
			}
			& li {
				@media print, screen and (min-width: 768px) {
					&:nth-child(2) {
						grid-column: 2;
						grid-row: 1 / 3;
					}
				}
			}
		}
		&.type02 {
			display: flex;
			flex-wrap: wrap;
			gap: 4.2rem 4rem;

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

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

				&.large {
					width: 100%;
				}
			}
		}

		& li {
			position: relative;
			border-radius: 0.6rem;
			overflow: hidden;
		}

		.list-label {
			position: absolute;
			left: 3rem;
			top: 3rem;
			z-index: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 700;
			font-size: 1.9rem;
			border-radius: 0.4rem;
			overflow: hidden;
			@media screen and (max-width: 767px) {
				left: 0.8rem;
				top: 0.8rem;
				font-size: 1.2rem;
			}

			.label-sub,
			.label-main {
				padding: 1.3rem 1.6rem;
				background: #ffffff;
				@media screen and (max-width: 767px) {
					padding: 0.6rem 0.8rem;
				}
			}
			.label-sub{
				min-width: 7rem;
				color: #FFF;
				background: #6A7382;
				@media screen and (max-width: 767px) {
					min-width: auto
				}
			}
		}
	}
}