@charset "utf-8";
/* CSS Document */

/*----------------------------
料金一覧
----------------------------*/
.pr-h2 {
	margin-bottom: 10px;
}

.price-wrap {
	display: grid;
	gap: 34px;
	margin-bottom: 50px;
}

.price-title {
	position: relative;
	display: flex;
	align-items: center;
	height: 50px;
	margin-bottom: 40px;
	padding-left: 65px;
	background-color: #67ccfe;
	font-size: 30px;
	font-weight: bold;
	color: #fff;
}

.price-title.mb-20 {
	margin-bottom: 20px;
}

.price-title::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 40px;
	transform: translateY(-50%);
	z-index: 2;
	display: block;
	width: 186px;
	height: 100%;
	background-image: url(../img/price/pr_title-bg.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.price-text {
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
	font-size: 17px;
}

.price_inner {
	padding-left: 25px;
	padding-right: 25px;
}

.price_note-wrap {
	margin-top: 40px;
}

.price_note {
	display: flex;
	font-size: 16px;
	line-height: 1.5;
}

.price_note::before {
	content: '※';
}

/* 基本料金 */
.basic {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.basic_items {
	display: grid;
	gap: 30px;
}

.basic_item.main {
	min-height: 295px;
}

.basic_item.bg-img {
	position: relative;
}

.basic_item.bg-img::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: -10px;
	width: 156px;
	height: 88px;
	background-image: url(../img/price/pr_img.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.basic_item-title {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	font-size: 27px;
	font-weight: bold;
	color: #fff;
	border-radius: 26px;
}

.teiki .basic_item-title {
	background-color: #f95f96;
}

.spot .basic_item-title {
	background-color: #fe8b24;
}

.option .basic_item-title {
	height: 45px;
	background-color: #83ba45;
}

.basic_item-title::after {
	content: '';
	position: absolute;
	left: 20px;
	bottom: 0;
	z-index: 2;
	display: block;
	height: 100%;
	background-size: contain;
	background-position: center bottom;
	background-repeat: no-repeat;
}

.teiki .basic_item-title::after {
	width: 42px;
	background-image: url(../img/price/pr_teiki-icon.png);
}

.spot .basic_item-title::after {
	width: 45px;
	background-image: url(../img/price/pr_spot-icon.png);
}

.basic_item-title.option::after {
	display: none;
}

.basic_item-inner {
	margin-top: 10px;
}

.basic_item-wrap {
	position: relative;
	display: grid;
	grid-template-columns: 80px 1fr;
	justify-content: center;
	align-items: center;
	gap: 25px;
	height: 75px;
	padding-top: 4px;
}

.basic_item-wrap.option {
	grid-template-columns: 90px 1fr;
	gap: 30px;
	height: 50px;
}

.basic_item-wrap:not(:first-child)::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 100%;
	height: 4px;
	background-image: url(../img/price/pr_dot-line.png);
	background-size: contain;
	background-position: center;
	background-repeat: repeat;
}

.basic_item-label-pink {
	padding: 5px;
	border: 2px solid #f95f96;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	color: #f95f96;
}

.basic_item-label {
	padding: 2px 3px 1px;
	border-radius: 13px;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
}

.basic_item-label.blue {
	border: 2px solid #67ccfe;
	color: #67ccfe;

}

.basic_item-label.green {
	border: 2px solid #83ba45;
	color: #83ba45;
}

.basic_item-body {
	display: flex;
	align-items: center;
	gap: 15px;
}

.basic_price-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

.basic_price-num {
	font-family: 'Roboto', sans-serif;
	font-size: 43px;
}

.option .basic_price-num {
	font-size: 35px;
}

.basic_price-unit {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
}

.option .basic_price-unit {
	font-size: 20px;
}

.basic_price-unit::before {
	content: '税込';
	display: block;
	font-size: 10px;
	line-height: 1;
}

.basic_price-slash {
	font-size: 34px;
}

.option .basic_price-slash {
	font-size: 30px;
}

.basic_price-around {
	margin-top: auto;
	padding-bottom: 5px;
	font-size: 15px;
}

.option .basic_price-around {
	font-size: 13px;
}

.basic_price-symbol {
	padding-left: 30px;
	font-size: 50px;
	line-height: 1;
}

.basic_price-symbol.batsu {
	position: relative;
	top: -3px;
}

/* 月額料金例 */
.monthly {
	display: grid;
	gap: 30px;
}

.monthly_item {
	display: grid;
	gap: 18px;
}

.monthly_item-title-wrap {
	display: grid;
	grid-template-columns: 215px 1fr;
	gap: 18px;
	align-items: center;
}

.monthly_item-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 215px;
	height: 40px;
	border-radius: 20px;
	font-size: 25px;
	font-weight: bold;
	color: #fff;
}

.teiki .monthly_item-title {
	background-color: #f95f96;
}

.spot .monthly_item-title {
	background-color: #fe8b24;
}

.monthly_item-title-text {
	font-size: 20px;
	font-weight: bold;
}

.teiki .monthly_item-title-text {
	color: #f95f96;
}

.spot .monthly_item-title-text {
	color: #fe8b24;
}

.monthly_item-body {
	display: grid;
	grid-template-columns: 465px 1fr;
	gap: 20px;
}

.monthly_item-formula-wrap {
	display: grid;
	grid-template-columns: max-content 34px max-content;
	align-items: center;
	gap: 20px;
	padding: 12px 26px 10px;
}

.teiki .monthly_item-formula-wrap {
	border: 1px solid #f95f96;
}

.spot .monthly_item-formula-wrap {
	border: 1px solid #fe8b24;
}

.monthly_item-formula-box {
	display: grid;
	grid-template-columns: fit-content;
	gap: 12px;
}

.monthly_item-formula-label {
	display: inline-block;
	padding: 2px 15px 1px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	border-radius: 4px;
}

.teiki .monthly_item-formula-label {
	background-color: #f95f96;
}

.spot .monthly_item-formula-label {
	background-color: #fe8b24;
}

.monthly_item-formula-num {
	padding-left: 15px;
	font-family: 'Roboto', sans-serif;
	font-size: 19px;
}

.monthly_item-formula-plus {
	font-size: 34px;
	font-weight: bold;
	line-height: 1;
}

.teiki .monthly_item-formula-plus {
	color: #f95f96;
}
.spot .monthly_item-formula-plus {
	color: #fe8b24;
}

.monthly_item-price-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.monthly_item-price-text {
	font-size: 20px;
	font-weight: bold;
}

.monthly_item-price {
	display: flex;
	line-height: 1;
	background: linear-gradient(transparent 80%, #faf29c 0%);
}

.monthly_item-price-num {
	font-family: 'Roboto', sans-serif;
	font-size: 43px;
	font-weight: bold;
}

.monthly_item-price-unit {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: bold;
	line-height: 1;
}
.monthly_item-price-unit::before {
	content: '税込';
	display: block;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
}



/* --- */
.tbl-ttl-blue {
	background: url(../img/price/icon_pr01.png) no-repeat left center;
	padding-left: 25px;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
}

.tbl-ttl-pink {
	background: url(../img/price/icon_pr02.png) no-repeat left center;
	padding-left: 25px;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
}

.tbl-ttl-purple {
	background: url(../img/price/icon_pr03.png) no-repeat left center;
	padding-left: 25px;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
}

.tbl-ttl-orange {
	background: url(../img/price/icon_pr04.png) no-repeat left center;
	padding-left: 25px;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
}

.tbl-ttl-blue a,
.tbl-ttl-pink a,
.tbl-ttl-purple a,
.tbl-ttl-orange a {
	color: #333;
	text-decoration: underline;
}

.tbl-ttl-blue a:hover,
.tbl-ttl-pink a:hover,
.tbl-ttl-purple a:hover,
.tbl-ttl-orange a:hover {
	color: #333;
	text-decoration: none;
}

.pr-ttl-flL {
	width: 560px;
	float: left;
}

.btn-tbl-ttl {
	width: 160px;
	float: right;
	margin-bottom: 3px;
}

.pr-tbl-blue,
.pr-tbl-pink,
.pr-tbl-purple,
.pr-tbl-orange {
	border-left: 1px solid #d6d6d6;
	border-top: 1px solid #d6d6d6;
	width: 100%;
	margin-bottom: 20px;
}

.pr-tbl-blue th {
	background-color: #e2f8fc;
}

.pr-tbl-pink th {
	background-color: #fbe5e5;
}

.pr-tbl-purple th {
	background-color: #f5e9fa;
}

.pr-tbl-orange th {
	background-color: #fef7e2;
}

.pr-tbl-blue th,
.pr-tbl-blue td,
.pr-tbl-pink th,
.pr-tbl-pink td,
.pr-tbl-purple th,
.pr-tbl-purple td,
.pr-tbl-orange th,
.pr-tbl-orange td {
	padding: 10px;
	border-right: 1px solid #d6d6d6;
	border-bottom: 1px solid #d6d6d6;
	text-align: center;
}