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

/*==============================*/
/* ナビ */
/*==============================*/
ul.categoryNavi{
    display: flex;
	flex-wrap: wrap;
	gap: 24px 24px;
	margin-bottom: 56px;
}
ul.categoryNavi li{ width: calc(calc(100% - 24px * 4) / 5);}
ul.categoryNavi li button{
    display: block;
	width: 100%;
	padding-bottom: 14px;
    border-bottom: 2px solid #cbf3ff;
	color: #1FB0DD;
    text-align: center;
    font-size: 16px;
	font-weight: 400;
	cursor: pointer;
	background: none;
}
ul.categoryNavi li button.is-active,
ul.categoryNavi li button:hover{
	border-bottom: 2px solid #00ABDC;
	font-weight: 600;
}

    /* ======= TB =======*/
    @media screen and (min-width: 768px) and (max-width: 1024px){
		ul.categoryNavi{ gap: 16px 16px;}
		ul.categoryNavi li{ width: calc(calc(100% - 16px * 4) / 5);}
		ul.categoryNavi li button{
			padding-bottom: 10px;
			font-size: 15px;
		}
    }
    /* ======= SP =======*/
    @media (max-width: 767px){
		ul.categoryNavi{ gap: 20px 14px;}
		ul.categoryNavi li{ width: calc(calc(100% - 14px * 1) / 2);}
		ul.categoryNavi li button{
			padding-bottom: 10px;
			font-size: 15px;
		}
    }


/*==============================*/
/* 料金一覧 */
/*==============================*/
.cardGrid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	padding: 0 24px;
}

	/* ======= SP =======*/
	@media (max-width: 767px){
		.cardGrid{ grid-template-columns: 1fr; padding: 0;}
	}


/*==============================*/
/* 料金一覧 */
/*==============================*/
div.priceBox{
	padding: 32px 28px 28px 28px;
	background: #EFFAFD;
	min-height: 440px;
	border-radius: 5px;
	
	/* FLIPで効かせる */
	will-change: transform, opacity;
}
/* 消える前のフェード */
div.priceBox.is-leaving{
	opacity: 0;
	transform: scale(.98);
	transition: opacity .25s ease, transform .25s ease;
}

/* 入ってくる時（任意） */
div.priceBox.is-entering{
	opacity: 0;
}

/* 空表示（0件の時） */
.gridEmpty{
	display: none;
	padding: 18px;
	border: 1px dashed #bbb;
	border-radius: 10px;
	background: #fafafa;
}
.gridEmpty.is-show{
	display: block;
}



	/* ======= TB =======*/
    @media screen and (min-width: 768px) and (max-width: 1024px){
		div.priceWrap .isotope > div{
			width: calc(calc(100% - 36px) / 2);
			margin: 10px 8px!important;
		}
		div.priceBox{
			padding: 30px 24px 24px 24px;
			min-height: 560px;
		}
    }
    /* ======= SP =======*/
    @media (max-width: 767px){
		div.priceWrap .isotope > div{
			display: block;
			width: 100%;
			margin: 16px 0!important;
		}
		div.priceBox{
			padding: 30px 24px 24px 24px;
			min-height: auto;
		}
    }


/*---------------------------------
   Content
---------------------------------*/

/*-- 
------------------------- */
div.priceBox h3{
	margin-bottom: 12px;
	min-height: 68px;
	color: #00ABE4;
	font-size: 22px;
	font-weight: 600;
	text-align: center;
	line-height: 1.414em;
}


	/* ======= PC以下 =======*/
	@media (max-width: 1024px){
		div.priceBox h3 br{ display: none;}
	}
	/* ======= TB =======*/
    @media screen and (min-width: 768px) and (max-width: 1024px){
		div.priceBox h3{
			margin-bottom: 14px;
			font-size: 20px;
			line-height: 1.3em;
		}
    }
    /* ======= SP =======*/
    @media (max-width: 767px){
		div.priceBox h3{
			margin-bottom: 16px;
			min-height: auto;
			font-size: 20px;
			text-align: left;
			line-height: 1.3em;
		}
    }


/*-- 
------------------------- */
div.priceBox div.priceInfo{
	display: flex; display: -webkit-flex;
	justify-content: center;
	align-items: center; -webkit-align-items: center;
	margin-bottom: 20px;
	padding: 16px 8px 16px 8px;
	background: #fff;
}

/*-- アイコン -- */
div.priceBox div.priceInfo p{
	margin-right: 20px;
	width: 50px;
	text-align: center;
}

/*-- コンテンツ -- */
div.priceBox div.priceInfo dl{ display: flex; display: -webkit-flex;}
div.priceBox div.priceInfo dl dt{
	position: relative;
	padding-right: 14px;
	font-size: 15px;
}
div.priceBox div.priceInfo dl dt::before{
	position: absolute; top: 0; right: 0px;
	content: "：";
}
div.priceBox div.priceInfo dl dd{
	flex: 1;
	font-size: 15px;
}
	/* ======= PC以下 =======*/
    @media (max-width: 1024px){
		/*-- コンテンツ -- */
		div.priceBox div.priceInfo dl dt{ font-size: 14px;}
		div.priceBox div.priceInfo dl dd{ font-size: 14px;}
	}
	/* ======= TB =======*/
    @media screen and (min-width: 768px) and (max-width: 1024px){
		/*-- アイコン -- */
		div.priceBox div.priceInfo p{
			width: 44px;
			margin-right: 14px;
		}
    }
    /* ======= SP =======*/
    @media (max-width: 767px){
		div.priceBox div.priceInfo{
			margin-bottom: 20px;
			padding: 14px 8px 15px 8px;
		}
		/*-- アイコン -- */
		div.priceBox div.priceInfo p{
			margin-right: 16px;
			width: 40px;
		}
    }


/*-- 
------------------------- */
div.priceBox div.priceDetail dl{
	display: flex;
	align-items: flex-start;
}
div.priceBox div.priceDetail dl:not(:last-child){ margin-bottom: 16px;}
div.priceBox div.priceDetail dl dt{
	width: 144px;
	padding: 2px 16px;
	border: 1px solid #00C3FF;
	border-radius: 16px;
	background: #fff;
	text-align: center;
	color: #00C3FF;
	font-size: 14px;
}
div.priceBox div.priceDetail dl dd{
	flex: 1;
	margin-left: 16px;
	font-size: 14px;
	line-height: 1.618em;
}
div.priceBox div.priceDetail dl:not(:last-child) dd{ padding-top: 4px;}
div.priceBox div.priceDetail dl:last-child dd{
	position: relative; top: -4px;
	color: #00ABDC;
	font-size: 40px;
	font-weight: 600;
	font-family: "Inter", sans-serif;
	line-height: 1em;
	letter-spacing: 0.01em;
}
div.priceBox div.priceDetail dl:last-child dd small{
	font-size: 20px;
	font-weight: bold;
	font-family: "Noto Sans JP"
}

	/* ======= TB =======*/
    @media screen and (min-width: 768px) and (max-width: 1024px){
		div.priceBox div.priceDetail dl{ flex-direction: column;}
		div.priceBox div.priceDetail dl:not(:last-child){ margin-bottom: 20px;}
		div.priceBox div.priceDetail dl dt{
			width: 100%;
			margin-bottom: 10px;
			font-size: 14px;
		}
		div.priceBox div.priceDetail dl dd{ margin: 0 4px;}
		div.priceBox div.priceDetail dl:not(:last-child) dd{ padding-top: 0px;}
		div.priceBox div.priceDetail dl:last-child dd{
			position: relative; top: 0px;
			width: 100%;
			text-align: center;
		}
    }
    /* ======= SP =======*/
    @media (max-width: 767px){
		div.priceBox div.priceDetail dl{ flex-direction: column;}
		div.priceBox div.priceDetail dl:not(:last-child){ margin-bottom: 20px;}
		div.priceBox div.priceDetail dl dt{
			width: 100%;
			margin-bottom: 10px;
			font-size: 14px;
		}
		div.priceBox div.priceDetail dl dd{ margin: 0 4px;}
		div.priceBox div.priceDetail dl:not(:last-child) dd{ padding-top: 0px;}
		div.priceBox div.priceDetail dl:last-child dd{
			position: relative; top: 0px;
			width: 100%;
			text-align: center;
		}
    }