@charset "UTF-8";

/* #plan */
#plan {
	padding-top: 30px !important;
	text-align: center;
	background: var(--col-white);
	& .plan__ttl {
		text-align: center;
		line-height: 1.4;
		color: var(--col-text);
	}
	& .plan__lead {
		--lead-mb: 34px;
	}
	& .plan__table-outer {
		max-width: var(--wrap-width);
		margin: 0 auto;
		padding-top: 22px;
		overflow-x: auto;
	}
	& .plan__table {
		min-width: 860px;
		& td {
			padding: 19px 16px;
		}
		& tbody td:not(:last-child) {
			width: 180px;
		}
		& th.plan__th-note,
		& tbody td:last-child {
			width: 270px;
		}
		& tbody td:last-child {
			text-align: left;
			font-size: 13px;
		}
		& tbody th {
			text-align: left;
			background: #f5f5f5;
			font-weight: 700;
			color: var(--col-text);
			white-space: nowrap;
		}
		& th.plan__th--recommend {
			position: relative;
		}
		& th.plan__th-note {
			text-align: center;
			font-size: 15px;
			color: var(--col-text);
			letter-spacing: .1em;
			background: var(--col-white);
		}
	}
	& .plan__th-sub {
		font-weight: normal;
	}
	& .plan__badge {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -60%);
		display: inline-block;
		border-radius: 40px;
		padding: 4px 18px;
		font-size: 12px;
	}
	& .plan__check {
		display: block;
		width: 20px;
		height: auto;
		margin: 0 auto 6px;
	}
	& .plan__check-num {
		display: block;
		font-size: 11px;
		color: var(--col-text);
	}
	& .plan__price {
		font-size: 22px;
		font-weight: 700;
		color: var(--col-text);
	}
}

/* #func-table (server-site / site-management / domain-mail / company-mail / security-support / support) */
.func-table__group {
	background: #f7fbfc;
}
#server-site,
#domain-mail,
#security-support {
	padding-bottom: 0;
}
.func-table__cat {
	line-height: 1.4;
	color: var(--col-text);
	text-align: center;
	padding-bottom: 34px;
}
.func-table__row {
	display: flex;
	align-items: stretch;
	& + .func-table__row {
		margin-top: -1px;
	}
	& dt {
		display: flex;
		align-items: center;
		flex: 0 0 300px;
		width: 300px;
		padding: 14px 20px;
		background: var(--col-teal);
		border: 1px solid var(--col-border);
		color: var(--col-white);
		font-weight: 700;
		font-size: 14px;
		letter-spacing: .04em;
		line-height: 1.4;
	}
	& dd {
		display: flex;
		align-items: center;
		flex: 1 1 auto;
		padding: 14px 20px;
		background: var(--col-white);
		border: 1px solid var(--col-border);
		border-left: none;
		color: var(--col-text);
		font-size: 14px;
		letter-spacing: .04em;
	}
}
/* tablet */
@media screen and (max-width: 1024px) {
	.func-table__row {
		& dt {
			flex-basis: 220px;
			width: 220px;
		}
	}
}

/* sp */
@media screen and (max-width: 640px) {
	.func-table__promo-section--has-price {
		padding-top: 30px;
	}
	.func-table__promo-section--has-price .func-table__promo {
		gap: 48px;
	}
	#plan {
		padding: 0 0 60px;
	}
	.func-table__row {
		flex-direction: column;
		& dt,
		& dd {
			width: 100%;
			flex-basis: auto;
		}
		& dd {
			border-top: none;
			border-left: 1px solid var(--col-border);
		}
	}
}