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

.concept li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #d7edec;
	padding: 20px 25px 5px 20px;
	margin-bottom: 30px;
	position: relative;
}
.concept h3 {
	flex-basis: 30%;
	color: #00aebb;
	font-weight: bold;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.4;
	text-align: center;
	border-bottom: none;
    margin-bottom: 0;
}
.concept li h3 span {
	white-space: nowrap;
}
.concept li p {
	flex-basis: 67%;
}
.concept li em {
	font-weight: normal;
	color: #dc2672;
}

.page_content {
    counter-reset: my-counter;
}

.concept li h3::before {
	content: counter(my-counter);
	counter-increment: my-counter;
	position: absolute;
	top: 10px;
	left: 10px;
	font-weight: bold;
	font-size: 28px;
	line-height: 1;
	color: white;
}


@media screen and (max-width: 768px) {
	
	.concept li {
		display: block;
		padding: 20px 20px 5px;
	}
	.concept li h3 {
		/*font-size: 22px;
		font-size: 2.2rem;*/
        font-size: clamp(1.8rem, 4vw, 2.2rem);
		margin-bottom: 5px;
		text-align: left;
        text-indent: -1.2em;
        padding-left: 1.2em;
	}
	.concept li h3::before {
		position: static;
		margin-right: .3em;
		font-size: 120%;
	}
	
} /* end media query */