.edit-area {
	&.price {
		.price-list {
			display: flex;
			gap: 64px;
			margin-bottom: 32px;

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

			& li {
				width: calc(100% / 2 - 32px);
				border-radius: 8px;
				background: #fff;
				border: 4px solid #009f6d;

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

				&.plan {
					position: relative;
					border-color: #83d400;

					.list-title {
						background: #83d400;
					}

					&:before,
					&:after {
						content: "";
						position: absolute;
						left: -53px;
						top: calc(50% - 2px);
						z-index: 1;
						display: block;
						width: 32px;
						height: 4px;
						background: #000;
					}

					&:after {
						transform: rotate(90deg);
					}

					@media screen and (max-width: 767px) {
						&:before,
						&:after {
							left: calc(50% - 10px);
							top: auto;
							bottom: calc(100% + 25px);
							width: 20px;
							height: 3px;
						}
					}
				}
			}

			.list-title {
				padding: 18px 0;
				font-weight: 900;
				font-size: 24px;
				line-height: 160%;
				text-align: center;
				letter-spacing: 0.05em;
				color: #ffffff;
				background: #009f6d;

				@media screen and (max-width: 767px) {
					padding: 10px 0;
					font-size: 18px;
				}
			}

			.list-detail {
				padding: 18px 28px 28px;

				@media screen and (max-width: 767px) {
					padding: 10px 15px 20px;
				}

				.detail-value {
					display: flex;
					justify-content: center;
					align-items: baseline;
					margin-bottom: 16px;

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

					.value-label {
						margin-right: 8px;
						font-weight: 700;
						font-size: 28px;
						line-height: 160%;
						color: #000000;

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

					.value-main {
						font-family: "Lato";
						font-weight: 900;
						font-size: 50px;
						line-height: 160%;
						text-align: center;
						color: #ffae00;

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

					.value-unit {
						display: flex;
						align-items: baseline;
						text-align: center;
						font-weight: 700;
						margin-left: 8px;
						font-size: 28px;
						line-height: 160%;
						color: #000000;

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

						& span {
							font-size: 18px;

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

				.detail-notes {
					font-weight: 500;
					font-size: 16px;
					line-height: 160%;
					text-align: center;
					letter-spacing: 0.05em;
					color: #000000;

					@media screen and (max-width: 767px) {
						font-size: 14px;
						text-align: left;
					}
				}
			}
		}

		.price-group {
			margin-bottom: 32px;
			padding: 48px 56px;
			background:
				url(/img/index/renewal02/price_object01.png) no-repeat left 104px bottom 48px / 168px auto,
				url(/img/index/renewal02/price_object02.png) no-repeat right 104px bottom 48px / 168px auto,
				#fff;
			border-radius: 8px;

			@media screen and (max-width: 767px) {
				margin-bottom: 20px;
				padding: 30px 15px 160px;
				background-position:
					left 15px bottom 30px,
					right 15px bottom 30px;
				background-size:
					126px auto,
					126px auto;
			}

			.group-title {
				margin-bottom: 24px;

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

				.title-emphasis {
					display: block;
					margin-bottom: 16px;
					font-weight: 900;
					font-size: 28px;
					line-height: 100%;
					text-align: center;
					letter-spacing: 0.05em;
					color: #ffae00;

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

				.title-main {
					display: block;
					font-weight: 700;
					font-size: 22px;
					line-height: 160%;
					text-align: center;
					letter-spacing: 0.05em;
					color: #000000;

					@media screen and (max-width: 767px) {
						padding: 0 28px;
						font-size: 16px;
						text-align: left;
					}
				}
			}

			.group-list {
				margin: 0 auto;
				padding: 24px 50px 24px 70px;
				width: 560px;
				border: 2px solid #009f6d;
				border-radius: 8px;
				background: #fff;

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

				& li {
					position: relative;
					padding-left: 1em;
					font-weight: 400;
					font-size: 16px;
					line-height: 160%;
					letter-spacing: 0.05em;
					color: #000000;

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

					&:before {
						content: "・";
						position: absolute;
						left: 0;
					}
				}
			}
		}
	}
}