@charset "utf-8";


.edit-area {
	&.data {
		padding-top: 2rem;
		padding-bottom: 24rem;

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

	.data-list {
		display: flex;
		flex-wrap: wrap;
		gap: 5rem 4.8rem;

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

		& li {
			width: calc(100% / 3 - (4.8rem * 2 / 3));
			padding: 6rem 0 5.1rem;
			background: #ffffff;
			box-shadow: 0 0 1.8rem rgba(0, 0, 0, 0.04);
			border-radius: 0.6rem;

			@media screen and (max-width: 767px) {
				/* padding: 3rem 0; */
				padding: 2rem 0;
				width: calc(50% - 0.5rem);
			}
		}

		.list-title {
			margin-bottom: 4.4rem;
			font-weight: 500;
			font-size: 2.2rem;
			text-align: center;
			letter-spacing: 0.05em;
			color: #000000;
			@media screen and (max-width: 767px) {
				margin-bottom: 1.5rem;
				/* font-size: 1.8rem; */
				font-size: 1.3rem;
				line-height: 1.4;
			}
		}

		.list-photo {
			margin-bottom: 4.2rem;
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 15rem;
			text-align: center;
			@media screen and (max-width: 767px) {
				margin-bottom: 1.5rem;
				min-height: auto;
			}

			& img{
				@media screen and (max-width: 767px) {
					width: auto;
					max-height: 4rem;
				}
			}
		}

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

			@media screen and (max-width: 767px) {
				/* margin-bottom: 1.8rem; */
				margin-bottom: 1.4rem;
			}

			.value-main {
				font-family: "Roboto";
				font-weight: 500;
				font-size: 7rem;
				letter-spacing: -0.04em;
				color: #0577dc;
				line-height: 5.4rem;

				@media screen and (max-width: 767px) {
					/* font-size: 5rem; */
					/* line-height: 3.7rem; */
					font-size: 2.8rem;
					line-height: 1.8rem;
				}
			}
			.value-unit {
				margin-left: 0.8rem;
				font-weight: 500;
				font-size: 3.8rem;
				letter-spacing: 0.05em;
				color: #0577dc;
				@media screen and (max-width: 767px) {
					/* font-size: 2rem; */
					margin-left: 0.4rem;
					font-size: 1.6rem;
				}
			}
		}

		.list-notes {
			font-weight: 400;
			font-size: 1.8rem;
			text-align: center;
			letter-spacing: 0.02em;
			color: #5f5f5f;
			@media screen and (max-width: 767px) {
				/* font-size: 1.2rem; */
				font-size: 1rem;
				line-height: 1.4;
			}
		}
	}
}