@charset "UTF-8";

/* +++#features+++ */
.comment01{
	margin-bottom: 1em;
	font-size: 1.8rem;
}
.comment01 .text-red{
	font-size: 125%;
	padding-inline: .25em;
}
.comment02{
	width: fit-content;
	font-size: 2.4rem;
	margin: 0 auto 6rem;
	position: relative;
}
.comment02 .text-red{
	font-size: 150%;
}
.comment02 .slide-up{
	transform: translateY(3em);
}

.feature{
	width: 100%;
	position: relative;
	margin-bottom: 7.2rem;
	align-items: center;
}
.feature .pic-area{
	position: relative;
	width: min(43.548rem, calc(95vw * .382));
	height: min(43.548rem, calc(95vw * .382));
}
.feature .text{
	width: calc(61.8% - 7.2rem);
}
.feature:nth-of-type(2n+1){
	flex-direction: row-reverse;
}

.feature h3{
	font-size: 2.2rem;
	line-height: 1.75;
	margin-bottom: 1.8rem;
}
.feature p{
	font-size: 1.5rem;
}
.feature .pic{
	position: absolute;
}
.feature:nth-of-type(1) .pic01,
.feature:nth-of-type(3) .pic01{
	left: 0;
	top: 0;
	width: 61.8%;
}
.feature:nth-of-type(1) .pic02,
.feature:nth-of-type(3) .pic02{
	right: 0;
	bottom: 0;
	width: 61.8%;
}
.feature:nth-of-type(2) .pic01{
	left: 0;
	top: 0;
	width: 80%;
}
.feature:nth-of-type(2) .pic02{
	right: 0;
	bottom: 0;
	width: 80%;
}
.feature h3 .slide-up{
	transform: translateY(3em);
}
.feature p .slide-up{
	transform: translateY(100%);
}

mark{
	padding: 0 .5em;
	position: relative;
	font-size: 110%;
	background: none;
}
mark:before{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #e8ff00;
	mix-blend-mode: darken;
}
#features .slide-left-open:before,
#features .slide-right-open:before,
#features .slide-top-open:before,
#features .slide-bottom-open:before{
	background: #f5f8fa;
}

main a{
	text-decoration: underline;
	color: #009d80;
}





@media screen and (max-width: 768px){
/* +++#features+++ */
	.comment02{
		font-size: 1.6rem;
		margin: 0 auto 3.6rem;
	}
	.comment02 .text-red{
		font-size: 125%;
	}
	.comment02 .slide-up{
		transform: translateY(5em);
	}

	.feature-area{
		display: block;
	}
	.feature{
		width: 100%;
	}
	.feature .pic-area{
		width: calc(100% - 4rem);
		height: calc(100vw - 8rem);
		margin: 0 auto 2.4rem;
	}

	.feature h3{
		font-size: 1.6rem;
		margin-bottom: 1.2rem;
	}
	.feature p{
		font-size: 1.3rem;
	}
	.feature:nth-of-type(2){
		margin-top: 6rem;
	}
	.feature:nth-of-type(3){
		margin-top: 6rem;
	}
	.feature .text {
		width: 100%;
	}
	mark{
		padding: 0 .25em;
		font-size: 105%;
	}

}