@charset "utf-8";

.content_area {
	max-width: 1920px;
	padding: 0 0 100px;
}

/*---------- environment ----------*/


#environment_links {
	padding-top: 90px;
	margin-bottom: 0;
}

#environment_links a:hover {
	opacity: 0.7;
	transition-duration: 0.3s;
}

#environment_links h3.section-title {
	margin: 0;
	padding-top: 40px;
}

#environment_links h3.section-title::before {
	top: 0.5em;
}

#environment_links a img {
	border-radius: 15px;
}

#environment_links .m-gallery a img {
	border-radius: 15px;
}

#environment_links a {
	position: relative;
	--bg: #fff;
	--fg: #0084DD;
	--dot: #0084DD;
	--arr: #fff;
	text-decoration: none;
}

#environment_links a::before {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 8px;
	width: 45px;
	height: 45px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	--size: 17px;
	background: radial-gradient(circle at center, var(--arr) var(--size), var(--arr) var(--size));
	-webkit-mask: url(../images/arrow-right.svg) no-repeat center / var(--size) var(--size);
	mask: url(../images/arrow-right.svg) no-repeat center / var(--size) var(--size);
	background-color: var(--arr);
	z-index: 1;
}

#environment_links a::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 8px;
	width: 45px;
	height: 45px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: #0084DD;
}


@media screen and (max-width: 767px) {
	.h1_title::before {
		font-size: 4rem;
	}



	#environment_links a::before {
		bottom: 8px;
		width: 30px;
		height: 30px;
		--size: 12px;
	}

	#environment_links a::after {
		bottom: 8px;
		width: 30px;
		height: 30px;
	}

	#environment_links {
		padding: 50px 0 0;
	}
	section#environment_links .m-gallery{
		padding: 20px 0 0 !important;
	}
	#environment_links img.m_photo {
    height: 200px;
}

	#environment_links.column_1-1 {
		gap: 20px;
	}

}