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

/*==============================*/
/* About */
/*==============================*/
div.serviceAbout{
	display: flex;
	gap: 48px;
}

	 /* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.serviceAbout{
			align-items: flex-start;
			gap: 32px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.serviceAbout{
			flex-direction: column-reverse;
			gap: 28px;
		}
	}


/*---------------------------------
   img
---------------------------------*/
div.serviceAbout figure{
	flex: 1 1 48%;
}
div.serviceAbout figure img{
	border-radius: 16px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.serviceAbout figure{
			width: 100%;
			flex: none;
		}
		div.serviceAbout figure img{
			object-fit: cover;
			width: 100%;
			height: 200px;
			aspect-ratio: 4 / 2;
			border-radius: 12px;
		}
	}


/*---------------------------------
   Content
---------------------------------*/
div.serviceAbout div{
	position: relative;
	flex: 1 1 52%;
	min-width: 0;
	padding-top: 0px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.serviceAbout div{
			width: 100%;
			flex: none;
			padding-top: 0px;
		}
	}

/*-- 
------------------------- */
div.serviceAbout div h2{
	margin-bottom: 20px;
	color: #000;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.serviceAbout div h2{
			font-size: 24px;
			line-height: 1.5em;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.serviceAbout div h2{
			margin-bottom: 16px;
			font-size: 22px;
			line-height: 1.5em;
		}
	}

/*-- Text
------------------------- */
div.serviceAbout div p{
	font-size: 15px;
	line-height: 1.68em;
}
div.serviceAbout div p.presidentName{
	color: #000;
	text-align: right;
	font-size: 20px;
	font-weight: 600;
}
div.serviceAbout div p.presidentName small{
	display: block;
	font-size: 14px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.serviceAbout div p{
			font-size: 14px;
			line-height: 1.7em;
		}
		div.serviceAbout div p.presidentName{
			font-size: 19px;
			font-weight: 600;
		}
	}



/*==============================*/
/* About */
/*==============================*/

/*---------------------------------
   
---------------------------------*/
div.serviceConsultation h3{
	margin-bottom: 36px;
	color: #000;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.5em;
	text-align: center;
}
/* ======= TB =======*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
}
/* ======= SP =======*/
@media (max-width: 767px) {
	div.serviceConsultation h3{
		margin-bottom: 32px;
		font-size: 22px;
	}
}


/*---------------------------------
   
---------------------------------*/
div.serviceConsultation ul{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	counter-reset: consultation;
}
div.serviceConsultation ul li{
	position: relative;
	width: calc(calc(100% - 20px * 1) / 2);
	padding: 20px 20px 18px 104px;
	background: #F5F7F8;
	border-radius: 5px;
	color: #000;
	font-size: 16px;
	line-height: 1.618em;
}
div.serviceConsultation ul li::before{
	position: absolute; top: 4px; left: 10px;
	content: "CASE 0"counter(consultation) ;
	counter-increment: consultation;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3em;
	font-family: "Inter", sans-serif;
	z-index: 1;
}
div.serviceConsultation ul li::after{
	position: absolute; top: 0; left: 0;
	content: "";
	width: 88px;
	height: 26px;
	background: #F1A63F;
	border-radius: 5px 0 5px 0;
	clip-path: polygon(
		0 0,
		100% 0,
		82% 100%,
		0 100%
	);
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.serviceConsultation ul li{
			padding: 36px 20px 16px 20px;
			font-size: 15px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.serviceConsultation ul{
			flex-direction: column;
			gap: 16px;
		}
		div.serviceConsultation ul li{
			width: 100%;
			padding: 36px 20px 16px 20px;
			font-size: 15px;
		}
	}




/*==============================*/
/* SUPPORT */
/*==============================*/
section.supportArea-wrap{
	padding-top: 96px;
	padding-bottom: 96px;
	background: linear-gradient(135deg,  #bcddfe 1%,#ffffff 50%,#fde4c8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		section.supportArea-wrap{
			padding-top: 72px;
			padding-bottom: 72px;
		}
	}

/*---------------------------------
   
---------------------------------*/
div.supportArea-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 36px;
	margin-bottom: 40px;
}
div.supportArea-title h2{
	flex: 0 0 280px;
	margin: 0;
}
div.supportArea-title div{
	flex: 1;
	padding-top: 36px;
}
div.supportArea-title div p{ font-size: 16px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.supportArea-title div{
			padding-top: 28px;
		}
		div.supportArea-title div p{ font-size: 15px;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.supportArea-title{
			align-items: flex-start;
			flex-direction: column;
			gap: 0px;
			margin-bottom: 36px;
		}
		div.supportArea-title h2{
			flex: auto;
			margin-bottom: 16px;
		}
		div.supportArea-title div{
			flex: auto;
			padding-top: 0px;
		}
		div.supportArea-title div p{ font-size: 15px;}
	}



/*---------------------------------
   
---------------------------------*/
div.supportArea{
	display: flex;
	flex-wrap: wrap;
	flex: 1;
	gap: 36px;
}
div.supportArea dl{
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 31px 32px 40px 32px;
	background: #FFFFFF;
	box-shadow: 0px 0px 10px 0px rgba(153,153,153,0.2);
	border-radius: 20px;
}
div.supportArea dl:nth-child(1),
div.supportArea dl:nth-child(2){ width: calc(calc(100% - 36px * 1) / 2);}

div.supportArea dl:nth-child(3),
div.supportArea dl:nth-child(4),
div.supportArea dl:nth-child(5){ width: calc(calc(100% - 36px * 2) / 3);}


div.supportArea dl:nth-child(1)::after{
	position: absolute; bottom: 24px; right: 0;
	content: "";
	width: 200px;
	aspect-ratio: 545/344;
	background: url("/common/img/service/web/icon-support01.svg");
	background-size: contain;
}
div.supportArea dl:nth-child(2)::after{
	position: absolute; bottom: 8px; right: 24px;
	content: "";
	width: 184px;
	aspect-ratio: 536/388;
	background: url("/common/img/service/web/icon-support02.svg");
	background-size: contain;
}


div.supportArea dl dt{
	margin-bottom: 16px;
	color: #000;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.414em;
}

div.supportArea dl dd ul li{
	position: relative;
	padding-left: 30px;
	font-size: 15px;
	line-height: 1.5em;
	z-index: 1;
}
div.supportArea dl dd ul li:not(:last-child){ margin-bottom: 8px;}
div.supportArea dl dd ul li::before {
    position: absolute; top: 2px; left: 0;
    content: "";
    width: 20px;
    height: 20px;
    background: #5296CF;
    border-radius: 50%;
}
div.supportArea dl dd ul li::after {
    position: absolute; top: 8px; left: 5px;
    content: "";
    width: 11px;
    aspect-ratio: 62 / 46;
    background: url(/common/img/share/icon-check.svg);
    background-size: cover;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.supportArea{
			gap: 20px;
		}
		div.supportArea dl{
			padding: 28px 26px 32px 26px;
		}
		div.supportArea dl:nth-child(1),
		div.supportArea dl:nth-child(2){ width: calc(calc(100% - 20px * 1) / 2);}

		div.supportArea dl:nth-child(3),
		div.supportArea dl:nth-child(4),
		div.supportArea dl:nth-child(5){ width: calc(calc(100% - 20px * 2) / 3);}
		
		div.supportArea dl:nth-child(1)::after{
			position: absolute; bottom: 24px; right: 0;
			width: 120px;
		}
		div.supportArea dl:nth-child(2)::after{
			position: absolute; bottom: 8px; right: 20px;
			width: 112px;
		}
		
		
		
		div.supportArea dl dt{
			margin-bottom: 14px;
			font-size: 18px;
		}
		
		div.supportArea dl dd ul li{
			padding-left: 26px;
			font-size: 14px;
		}
		div.supportArea dl dd ul li::before {
			position: absolute; top: 3px; left: 0;
			width: 18px;
			height: 18px;
		}
		div.supportArea dl dd ul li::after {
			position: absolute; top: 8px; left: 4px;
			width: 10px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.supportArea{
			flex-direction: column;
			gap: 12px;
		}
		div.supportArea dl{
			padding: 28px 24px 32px 24px;
		}
		div.supportArea dl:nth-child(1),
		div.supportArea dl:nth-child(2){ width: 100%; padding: 28px 24px 88px 24px;}

		div.supportArea dl:nth-child(3),
		div.supportArea dl:nth-child(4),
		div.supportArea dl:nth-child(5){ width: 100%;}
		
		div.supportArea dl:nth-child(1)::after{
			position: absolute; bottom: 16px; right: 0;
			width: 120px;
		}
		div.supportArea dl:nth-child(2)::after{
			position: absolute; bottom: 8px; right: 20px;
			width: 112px;
		}
		
		
		div.supportArea dl dt{
			margin-bottom: 12px;
			font-size: 19px;
		}

		div.supportArea dl dd ul li{
			padding-left: 28px;
			font-size: 14px;
		}
		div.supportArea dl dd ul li:not(:last-child){ margin-bottom: 8px;}
		div.supportArea dl dd ul li::before {
			position: absolute; top: 2px; left: 0;
			width: 18px;
			height: 18px;
		}
		div.supportArea dl dd ul li::after {
			position: absolute; top: 7px; left: 4px;
			width: 10px;
		}
	}


/*==============================*/
/*  */
/*==============================*/
section.supportAbout-wrap{
	padding-top: 0;
}

div.supportAbout:not(:last-child){ margin-bottom: 32px;}

div.supportAbout{
	display: flex;
	align-items: center;
	gap: 64px;
}

	 /* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.supportAbout{
			align-items: flex-start;
			gap: 32px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.supportAbout{ gap: 16px;}
		div.supportAbout:nth-child(odd){ flex-direction: column;}
		div.supportAbout:nth-child(even){ flex-direction: column-reverse;}
		
		div.supportAbout:not(:last-child){ margin-bottom: 48px;}
	}


/*---------------------------------
   img
---------------------------------*/
div.supportAbout figure{
	flex: 1 1 50%;
}
div.supportAbout figure img{
	border-radius: 16px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.supportAbout figure{
			width: 100%;
			flex: none;
		}
	}


/*---------------------------------
   Content
---------------------------------*/
div.supportAbout div{
	position: relative;
	flex: 1 1 50%;
	min-width: 0;
	padding-top: 16px;
}

div.supportAbout:nth-child(1) div{ padding-top: 72px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.supportAbout div{
			width: 100%;
			flex: none;
			padding-top: 0px;
		}
		div.supportAbout:nth-child(1) div{ padding-top: 0px;}
	}

/*-- 
------------------------- */
div.supportAbout div h2{
	margin-bottom: 20px;
	color: #000;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.5em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.supportAbout div h2{
			font-size: 23px;
			line-height: 1.414em;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.supportAbout div h2{
			margin-bottom: 16px;
			font-size: 23px;
			line-height: 1.414em;
			text-align: center;
		}
	}

/*-- Text
------------------------- */
div.supportAbout div p{
	font-size: 15px;
	line-height: 1.8em;
}
div.supportAbout div p.presidentName{
	color: #000;
	text-align: right;
	font-size: 20px;
	font-weight: 600;
}
div.supportAbout div p.presidentName small{
	display: block;
	font-size: 14px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.supportAbout div p{
			font-size: 14px;
			line-height: 1.7em;
		}
		div.supportAbout div p.presidentName{
			font-size: 19px;
			font-weight: 600;
		}
	}