@charset "utf-8";

/* RESPONSIVE */
/* -------------------------------------------------- */
@media screen and (min-width: 1024px) {

	/* 980px以上用（PC用）の記述 */
	/* メインビジュアル */
	#fv::after {
		background: url(../../img/mv/mv_jci.jpg) center center no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
	}

	.jci {
		margin-bottom: 80px;
	}

	.jciFigure {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.jciFigureCont {
		width: 300px;
		height: 300px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f9f9f9;
		border: 2px solid #b70000;
		border-radius: 50%;
		flex-direction: column;
		text-align: center;
		font-size: 1.7rem;
		font-weight: 700;
	}

	.jciFigureCont span {
		width: 40%;
		margin-bottom: 10px;
		display: block;
		font-size: 3.6rem;
		color: #fff;
		background: linear-gradient(transparent 60%, #b70000 30%);
		-webkit-text-stroke: 7px #b70000;
		text-stroke: 7px #b70000;
		paint-order: stroke;
	}

	.jciCont {
		border-bottom: 1px solid #aaa;
		margin-bottom: 30px;
	}

	/*
	.jciCont:last-child {
	border: none;
}
	*/

	.jciBox {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.jciBox .jci {
		width: 48%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {

	/* 768px - 979px用（タブレット用）の記述 */
	/* メインビジュアル */
	#fv::after {
		background: url(../../img/mv/mv_jci.jpg) center center no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
	}

	.jci {
		margin-bottom: 50px;
	}

	.jciFigure {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.jciFigureCont {
		width: 30%;
		height: auto;
		aspect-ratio: 1 / 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f9f9f9;
		border: 2px solid #b70000;
		border-radius: 50%;
		flex-direction: column;
		text-align: center;
		font-size: 1.3rem;
		font-weight: 700;
	}

	.jciFigureCont span {
		width: 40%;
		margin-bottom: 10px;
		display: block;
		font-size: 3.0rem;
		color: #fff;
		background: linear-gradient(transparent 60%, #b70000 30%);
		-webkit-text-stroke: 5px #b70000;
		text-stroke: 5px #b70000;
		paint-order: stroke;
	}

	.jciCont {
		border-bottom: 1px solid #aaa;
		margin-bottom: 30px;
	}

	.jciBox {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.jciBox .jci {
		width: 48%;
	}
}

@media screen and (max-width: 767px) {

	/* 479px以下用（スマートフォン用）の記述 */
	/* メインビジュアル */
	#fv::after {
		background: url(../../img/mv/mv_jci.jpg) center center no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
	}

	.jci {
		margin-bottom: 50px;
	}

	.jciFigure {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.5em 1em;
	}

	.jciFigureCont {
		width: 30%;
		min-width: 160px;
		height: auto;
		aspect-ratio: 1 / 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f9f9f9;
		border: 2px solid #b70000;
		border-radius: 50%;
		text-align: center;
		font-size: 1.1rem;
		font-weight: 700;
		flex-direction: column;
	}

	.jciFigureCont span {
		width: 40%;
		margin-bottom: 10px;
		display: block;
		font-size: 2.4rem;
		color: #fff;
		background: linear-gradient(transparent 60%, #b70000 30%);
		-webkit-text-stroke: 4px #b70000;
		text-stroke: 4px #b70000;
		paint-order: stroke;
	}

	.jciCont {
		border-bottom: 1px solid #aaa;
		margin-bottom: 30px;
	}

	/*
	.jciBox {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.jciBox .jci {
		width: 48%;
	}
*/
}