@charset "utf-8";

/* -----------------------------------------------------------
   サービス共通
-------------------------------------------------------------- */
/* -----------------------------------------------------------
    cmn-service-table-fix
-------------------------------------------------------------- */
.cmn-service-table-unit {
	display: flex;
	justify-content: flex-end;
	gap: 20px;
	text-align: right;
}

.cmn-service-table-cap {
	margin-top: 30px;
}

.cmn-service-table-fix table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	table-layout: auto;
	line-height: 1.4;
}

.cmn-service-table-fix th, .cmn-service-table-fix td {
	background: #fff;
	width: 100px;
	vertical-align: middle;
	padding: 15px 10px;
	border: 1px solid #ccc;
	text-align: center;
}

.cmn-service-table-fix table tbody tr:first-of-type th {
	background: var(--cmnbg5);
}

.cmn-service-table-fix .table-fix-01 {
	background: var(--cmnbg5);
}

.cmn-service-table-fix .table-fix-02 {
	background: var(--cmnbg5);
}

/*cmn-service-table-caution------------------------*/
.cmn-service-table-caution {
	align-items: center;
	border: 1px solid var(--border3);
	background: #fff;
	display: flex;
	gap: 25px;
	margin-top: 30px;
	padding: 30px 35px;
}

.cmn-service-table-caution .caution-img {
	aspect-ratio: 645/320;
	flex-shrink: 0;
	width: 400px;
}

.cmn-service-table-caution .caution-img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.cmn-service-table-caution .caution-note p:not(:first-of-type) {
	margin-top: 15px;
}

@media screen and (max-width: 768px) {
	.cmn-service-table-unit {
		font-size: 1.5rem;
		margin: 0 0 5px;
	}

	.cmn-service-table-fix {
		overflow-x: scroll;
		margin: 0 0 0 20px;
		padding: 0 20px 20px 0;
		width: auto;
	}

	.cmn-service-table-fix table {
		font-size: 1.5rem;
		table-layout: fixed;
	}

	.cmn-service-table-fix th, .cmn-service-table-fix td {
		width: 140px;
		padding: 8px 5px;
	}
	
	[data-pricebox="dm"] .cmn-service-table-fix th, [data-pricebox="dm"] .cmn-service-table-fix td{
		padding: 12px 5px;
	}
	[data-servicetable="cost"] th {
		font-size: 1.4rem;
	}


	.cmn-service-table-fix .table-fix-01 {
		position: sticky;
		left: 0;
		width: 80px;
	}

	.cmn-service-table-fix .table-fix-02 {
		position: sticky;
		left: 80px;
		width: 80px;
	}

	.cmn-service-table-fix .table-fix-01::before, .cmn-service-table-fix .table-fix-02::before {
		content: "";
		position: absolute;
		top: -1px;
		left: -1px;
		width: 100%;
		height: 100%;
		border: 1px solid #ccc;
	}

	/*cmn-service-table-caution------------------------*/
	.cmn-service-table-caution {
		flex-direction: column;
		gap: 15px;
		padding: 25px 20px 23px;
		width: calc(100% - 40px);
		margin: 20px auto 0;
	}

	.cmn-service-table-caution dt {
		padding: 0 0 0 28px;
	}

	.cmn-service-table-caution dt::before {
		font-size: 2.1rem;
		left: 0;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		top: 45%;
	}

	.cmn-service-table-caution .caution-img-wrap {
		flex-direction: column;
		gap: 20px;
	}

	.cmn-service-table-caution .caution-img {
		width: 100%;
	}

	.cmn-service-table-caution .caution-note p:not(:first-of-type) {
		margin-top: 15px;
	}
}

/* -----------------------------------------------------------
    price-add
-------------------------------------------------------------- */
.price-add-txt {
	font-size: 1.7rem;
}

@media screen and (max-width: 768px) {
	.price-add-txt {
		font-size: 1.6rem;
	}
}

/* -----------------------------------------------------------
    price-add-list
-------------------------------------------------------------- */
.price-add-list {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 15px 0 0;
}

.price-add-item {
	background: #fff;
	border-radius: 2px;
	border: 1px solid var(--border1);
	font-size: 1.7rem;
	padding: 13px 15px;
	text-align: center;
	width: fit-content;
}

@media screen and (max-width: 768px) {
	.price-add-item {
		font-size: 1.6rem;
		padding: 10px 12px;
	}
}

/* -----------------------------------------------------------
    price-add-list2
-------------------------------------------------------------- */
.price-add-item2 {
	line-height: 1.5;
	position: relative;
	padding: 0 0 0 14px;
	margin: 15px 0 0;
}

.price-add-list2 .price-add-item2:first-child {
	margin: 0;
}

.price-add-item2::before {
	position: absolute;
	top: 8px;
	left: 0;
	width: 7px;
	height: 7px;
	content: '';
	border-radius: 50%;
	background: var(--main);
}

@media screen and (max-width: 768px) {
	
	.price-add-item2 {
		padding: 0 0 0 12px;
		letter-spacing: .03em;
		line-height: 1.7;
	}
	.price-add-item2::before {
		width: 6px;
		height: 6px;
		top: 9px;
	}
}