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

/*==============================*/
/* メリット */
/*==============================*/
div.meritWrap{ counter-reset: merit;}

div.merit{
	position: relative;
	padding-top: 96px;
}

div.merit::before{
	position: absolute; top: -112px; left: 0;
	content: "";
	width: 100%;
	height: 280px;
	background: #EFFAFD;
	z-index: -1;
}
div.merit:first-child::before{ position: absolute; top: 0; left: 0;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.merit{ padding-top: 72px;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.merit{ padding-top: 64px;}

		div.merit::before{
			position: absolute; top: -112px; left: 0;
			height: 256px;
		}
		div.merit:first-child::before{ height: 232px;}
	}


/*---------------------------------
   Point
---------------------------------*/
div.merit div.meritPoint{
	display: flex;
	margin-bottom: 40px;
}

div.merit:nth-child(even) div.meritPoint{ flex-direction: row-reverse;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.merit div.meritPoint{
			flex-direction: column;
			margin-bottom: 40px;
		}
		div.merit:nth-child(even) div.meritPoint{
			flex-direction: column;
		}
	}


/*-- 
------------------------- */
div.merit div.meritPoint figure{ width: 520px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.merit div.meritPoint figure{ width: 360px;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.merit div.meritPoint figure{ 
			width: 90%;
			margin: 0 auto 24px auto;
		}
	}


/*-- 
------------------------- */
div.merit div.meritPoint div{ flex: 1;}
div.merit:nth-child(odd) div.meritPoint div{ margin-left: 56px;}
div.merit:nth-child(even) div.meritPoint div{ margin-right: 56px;}

div.merit div.meritPoint div h3{
	position: relative;
	margin-bottom: 24px;
	padding-top: 40px;
	color: #00ABDC;
	font-size: 29px;
	font-weight: 600;
	line-height: 1.58em;
}
div.merit div.meritPoint div h3::before{
	position: absolute; top: 0; left: 0;
	counter-increment: merit;
	content: "Point " counter(merit) ;
	color: #8CE3FD;
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.01em;
}

div.merit div.meritPoint div p{ font-size: 15px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.merit:nth-child(odd) div.meritPoint div{ margin-left: 28px;}
		div.merit:nth-child(even) div.meritPoint div{ margin-right: 28px;}
		
		div.merit div.meritPoint div h3{
			margin-bottom: 18px;
			padding-top: 38px;
			font-size: 25px;
			line-height: 1.4em;
		}
		div.merit div.meritPoint div h3::before{ font-size: 20px;}
		div.merit div.meritPoint div p{
			font-size: 14px;
			line-height: 1.618em;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.merit:nth-child(odd) div.meritPoint div{ margin-left: 0px;}
		div.merit:nth-child(even) div.meritPoint div{ margin-right: 0px;}
		
		div.merit div.meritPoint div h3{
			margin-bottom: 20px;
			padding-top: 40px;
			font-size: 23px;
			line-height: 1.4em;
			text-align: center;
		}
		div.merit div.meritPoint div h3::before{
			position: absolute; top: 0; left: 50%;
			font-size: 21px;
			margin-left: -35px;
		}
		div.merit div.meritPoint div p{
			font-size: 14px;
			line-height: 1.618em;
		}
	}


/*---------------------------------
   Before After
---------------------------------*/
div.merit div.meritSolution{
	display: flex; display: -webkit-flex;
	justify-content: space-between; -webkit-justify-content: space-between;
}
div.merit div.meritSolution dl{
	width: calc(50% - 14px);
	box-shadow: 1px 2px 8px 0px rgba(153,153,153,0.4);
	border-radius: 5px;
	background: #fff;
}
div.merit div.meritSolution dl dt{
	padding: 6px 0;
	border-radius: 5px 5px 0 0;
	color: #fff;
	font-size: 18px;
	text-align: center;
}
/*-- Before -- */
div.merit div.meritSolution dl:first-child dt{ background: #6F7579;}
/*-- After -- */
div.merit div.meritSolution dl:last-child dt{ background: var(--themecolor);}


div.merit div.meritSolution dl dd{ padding: 20px 24px;}
div.merit div.meritSolution dl dd ul li{
	position: relative;
	padding-left: 16px;
	font-size: 14px;
	line-height: 1.414em;
}
div.merit div.meritSolution dl dd ul li::before{
	position: absolute; top: 6px; left: 0;
	content: ""; 
	width: 6px;
	height: 6px;
	background: #000;
	border-radius: 50%;
}

div.merit div.meritSolution dl dd ul li:not(:last-child){ margin-bottom: 8px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.merit div.meritSolution dl{ width: calc(50% - 8px);}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.merit div.meritSolution{ flex-direction: column;}
		div.merit div.meritSolution dl{ width: 100%;}
		div.merit div.meritSolution dl:not(:last-child){ margin-bottom: 12px;}
		div.merit div.meritSolution dl dt{ font-size: 16px;}
		div.merit div.meritSolution dl dd{ padding: 20px;}
	}