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

/*==============================*/
/* main */
/*==============================*/
div.contactBox{
	margin-top: 80px;
	padding: 48px 52px 44px 52px;
	background: #EFF9F5 url("/common/img/share/bg-texture.png");
	border-radius: 10px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.contactBox{
			gap: 12px;
			margin-top: 64px;
			padding: 44px 40px 44px 40px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.contactBox{
			flex-direction: column;
			gap: 16px;
			margin-top: 0px;
			padding: 44px 24px 28px 24px;
		}
	}


/*---------------------------------
   タイトル
---------------------------------*/
div.contactBox div.contactTitle{
	display: flex;
	align-items: center;
	gap: 36px;
	margin-bottom: 32px;
}
div.contactBox div.contactTitle h2{
	width: 176px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3em;
	color: #87B32E;
}
div.contactBox div.contactTitle h2 small{
	display: block;
	color: #272727;
	font-size: 16px;
	font-weight: 500;
	font-family: "Inter", sans-serif;
	letter-spacing: 0.01em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.contactBox div.contactTitle{
			gap: 32px;
			margin-bottom: 32px;
		}
		div.contactBox div.contactTitle h2{
			width: 160px;
			font-size: 26px;
		}
		div.contactBox div.contactTitle h2 small{
			font-size: 15px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.contactBox div.contactTitle{
			flex-direction: column;
			justify-content: flex-start;
			gap: 20px;
			margin-bottom: 28px;
		}
		div.contactBox div.contactTitle h2{
			width: 100%;
			font-size: 26px;
			text-align: center;
		}
		div.contactBox div.contactTitle h2 small{
			font-size: 15px;
		}
	}


/*-- 
------------------------- */
div.contactBox div.contactTitle div{ flex: 1 ;}
div.contactBox div.contactTitle div p{
	font-size: 15px;
	line-height: 1.7em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.contactBox div.contactTitle div p{
			font-size: 14px;
			line-height: 1.618em;
		}
	}


/*---------------------------------
   コンテンツ
---------------------------------*/
div.contactBox div.contactContent{
	display: flex;
	gap: 26px;
}
div.contactBox div.contactContent > dl{
	width: calc(calc(100% - 26px * 1) / 2);
	padding: 11px 11px 20px 11px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 1px 2px 6px 0px rgba(29,124,183,0.2);
}
div.contactBox div.contactContent > dl > dt{
	margin-bottom: 13px;
	padding: 4px 0;
	background: #9CC941;
	border-radius: 9px 9px 0 0;
	text-align: center;
	color: #fff;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.contactBox div.contactContent{ gap: 16px;}
		div.contactBox div.contactContent > dl{ width: calc(calc(100% - 16px * 1) / 2);}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.contactBox div.contactContent{
			flex-direction: column;
			gap: 16px;
		}
		div.contactBox div.contactContent > dl{
			width: 100%;
			padding: 10px 8px 20px 8px;
		}
		div.contactBox div.contactContent > dl > dt{
			margin-bottom: 13px;
			padding: 4px 0;
			font-size: 14px;
		}
	}


/*-- 
------------------------- */
div.contactBox div.contactContent > dl > dd p a{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #87B32E;
	font-size: 26px;
	font-weight: 700;
}
div.contactBox div.contactContent > dl > dd p a img{
	position: relative; top: 3px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.contactBox div.contactContent > dl > dd p a{ font-size: 22px;}
		div.contactBox div.contactContent > dl > dd p a img{
			position: relative; top: 3px;
			width: 30px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.contactBox div.contactContent > dl > dd p a{
			gap: 6px;
		}
		div.contactBox div.contactContent > dl > dd p a{ font-size: 19px;}
		div.contactBox div.contactContent > dl > dd p a img{
			position: relative; top: 1px;
			width: 26px;
		}
	}


/*-- 
------------------------- */
div.contactBox div.contactContent > dl > dd dl{
	display: flex;
	justify-content: center;
}
div.contactBox div.contactContent > dl > dd dl dt{
	position: relative;
	margin-right: 16px;
	font-size: 14px;
}
div.contactBox div.contactContent > dl > dd dl dt::after{
	position: absolute; top: 0; right: -16px;
	content: "：";
}
div.contactBox div.contactContent > dl > dd dl dd{
	font-size: 14px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.contactBox div.contactContent > dl > dd dl dt{
			margin-right: 14px;
			font-size: 13px;
		}
		div.contactBox div.contactContent > dl > dd dl dt::after{
			position: absolute; top: 0; right: -12px;
		}
		div.contactBox div.contactContent > dl > dd dl dd{ font-size: 13px;}
	}