@charset "utf-8";

/* PLAN ////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#plan .plan-body {

	display: flex;
	flex-direction: column;
	gap: 15px;

	li {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.name {
		text-align: center;
	}

	.price {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 3.0rem;
		font-weight: 700;
		line-height: 1;
		.pricent {
			font-size: 1.6rem;
			line-height: 1;
			font-weight: 500;
		}
	}

	.body {
		padding-top: 10px;
		border-top: 1px solid #000;
	}

	.item {

		dt {
			font-size: 1.2rem;
			font-weight: bold;
			line-height: 135%;

			span::before {
				content: "SPEC／仕様";
			}
		}

		dd {
			display: flex;
			align-items: center;
			margin-top: 5px;
			padding-top: 5px;
			border-top: 1px dotted #000;
			font-size: 1.2rem;
			line-height: 135%;

			.icon {
				margin-right: 5px;
				font-size: 1.2rem;
				line-height: 135%;
			}

			&:has(.icon-item-no) {
				opacity: .35;
			}

			.spec + .spec-price {
				margin-left: auto;
			}

		}

	}

}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (min-width:769px) {
/************************************************************************************************************************/

#plan .plan-body {

	flex-wrap: wrap;
	flex-direction: row;

	li {
		width: calc((100% - 30px) / 3);
	}

	.price {
		font-size: 3.6rem;
		.pricent {
			font-size: 1.6rem;
		}
	}

}

/************************************************************************************************************************/
}