/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
}

@media (min-width: 600px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 480px) {
}

@media (min-width: 481px) and (max-width:767px) {
}

@media (min-width: 768px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 750px) {
}

@media (min-width: 751px) {
}

/*
009644
cfe5d9

background: #009644;
background: linear-gradient(0deg,rgba(0, 150, 68, 0.5) 0%, rgba(0, 110, 50, 0) 99%);
*/

/* ---------------------------------------- main */

@media (max-width: 480px) {
	main { font-size: clamp(1.3rem, 0.438rem + 1.88vw, 1.6rem); }
}

@media (min-width: 481px) and (max-width:750px) {
	main { font-size: clamp(1.6rem, 0.106rem + 2.97vw, 2.4rem); }
}

@media (max-width: 750px) {
	.pc { display: none !important; }
	/* main { font-size: clamp(1.3rem, 0.301rem + 2.56vw, 2.4rem); } */
}

@media (min-width: 751px) {
	main { font-size: clamp(1.3rem, 0.14rem + 1.43vw, 1.8rem); }
	.sp { display: none !important; }
}

.learnMore a {
	display: inline-block;
	color: #009644;
	border: 1px #fff solid;
	background: #fff;
	font-weight: bold;
	text-align: center;
	padding: .5em 3em;
	border-radius: 100px;
	position: relative;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.learnMore.greens a {
	color: #fff;
	border: 1px #009644 solid;
	background: #009644;
}
.learnMore a i {
	position: absolute;
	top: 50%;
	right: 1em;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.learnMore a:hover {
	color: #fff;
	background: #009644;
}
.learnMore.greens a:hover {
	color: #009644;
	background: #fff;
}

/* ---------------------------------------- bnrarea */

.bnrarea { 
	background: #fffee3; 
	text-align: center;
}
.bnrarea a { 
	display: inline-block; 
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.bnrarea a:hover { 
	opacity: .5;
}

@media (max-width: 750px) {

	.bnrarea {
		padding: 2.5em .58333em;
	}

}

@media (min-width: 751px) {

	.bnrarea {
		padding: 3.3333em 1em;
	}

}

/* ---------------------------------------- service */

#service {
	contain: paint;
}
#service h2 {
	text-align: center;
	font-weight: bold;
}
#service h2 small {
	display: block;
	color: #009644;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
}

#service section .num {
	color: #003894;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
}
#service section h3 {
	font-weight: bold;
}
#service section h3 small {
	display: block;
	color: #11b356;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
}

@media (max-width: 750px) {

	#service { padding: 3em 0; }
	#service h2 {
		font-size: clamp(2.4rem, 0.291rem + 6.05vw, 5.2rem);
		margin: 0 0 1.5em;
	}
	#service h2 small {
		font-size: clamp(1.6rem, 0.442rem + 2.79vw, 2.8rem);
	}

	/* section */
	
	#service section {
		width: 100%;
	}
	#service section + section { margin: 2.6em 0 0; }

	#service section figure { margin: 0 1.5em 0 0; }
	#service section .wrap { margin: 0 0 0 1.5em; }
	#service section.reverse figure { margin: 0 0 0 1.5em; }
	#service section.reverse .wrap { margin: 0 1.5em 0 0; }

	#service section figure img {
		width: 100%;
		height: 16em;
		display: block;
		object-fit: cover;
		position: relative;
		z-index: 3;
	}

	#service section .wrap {
		color: #fff;
		padding: .75em 1.5em 1.5em 2em;
		position: relative;
	}
	#service section.reverse .wrap {
		padding: .75em 2em 1.5em 1.5em;
	}
	#service section .wrap::after {
		content: "";
		display: block;
		width: 100%;
		height: calc( 20% + 100% );
		background: #009644;
		background: linear-gradient(90deg,rgba(0, 150, 68, 1) 0%, rgba(0, 110, 50, 1) 99%);
		position: absolute;
		top: -20%;
		left: 0;
		z-index: -1;
	}
	#service section.reverse .inside .detail::after {
		background: linear-gradient(-90deg,rgba(0, 150, 68, 1) 0%, rgba(0, 110, 50, 1) 99%);
	}

	#service section .num { margin: 0 0 .5em; }
	#service section .num em {
		font-size: clamp(5.6rem, 2.291rem + 6.05vw, 8.2rem);
		line-height: .8;
	}
	#service section h3 {
		font-size: clamp(2rem, -0.145rem + 6.98vw, 5rem);
		line-height: 1.3;
		margin: 0 0 .5em;
	}
	#service section h3 small {
		font-size: clamp(1.4rem, 0.317rem + 2.79vw, 2.6rem);
	}
	#service section .detail p { 
		line-height: 2; 
		margin: 0 0 1.5em;
	}


}

@media (min-width: 751px) {

	#service { padding: 3.5em 0; }
	#service h2 {
		font-size: clamp(2.85rem, 0.271rem + 3.15vw, 3.9rem);
		margin: 0 0 1.5em;
	}
	#service h2 small {
		font-size: clamp(1.6rem, 0.193rem + 1.72vw, 2.2rem);
	}

	/* section */
	
	#service section {
		display: flex;
		width: 100%;
	}
	#service section.reverse {
		flex-direction:row-reverse;
	}

	#service section + section { margin: 4.4em 0 0; }

	#service section figure,
	#service section .wrap {
		width: 50%;
	}

	#service section figure img {
		width: 100%;
		height: 22.777em;
		display: block;
		object-fit: cover;
		position: relative;
		z-index: 3;
	}

	#service section .num,
	#service section .inside {
		width: 100%;
		padding: 0 24px 0 0;
		position: relative;
	}
	#service section.reverse .inside {
		padding: 0 0 0 24px;
	}

	#service section .detail {
		display: block;
		width: auto;
		max-width: 550px;
		padding: 0 0 0 20px;
		margin: 0 auto 0 0;
	}
	#service section.reverse .detail {
		padding: 0;
		margin: 0 0 0 auto;
	}

	#service section .inside .detail {
		color: #fff;
		padding: 3.25em 0 3.25em 2em;
	}
	#service section.reverse .inside .detail {
		color: #fff;
		padding: 3.25em 2em 3.25em 0;
	}
	#service section .num .detail { padding: 0 0 0 20px; }

	#service section .num em {
		font-size: clamp(4.4rem, -2.092rem + 10.32vw, 8rem);
		line-height: .8;
	}

	#service section .inside .detail::after {
		content: "";
		display: block;
		width: calc( 25% + 50vw );
		height: 100%;
		background: #009644;
		background: linear-gradient(90deg,rgba(0, 150, 68, 1) 0%, rgba(0, 110, 50, 1) 99%);
		position: absolute;
		top: 0;
		left: -25%;
		z-index: -1;
	}
	#service section.reverse .inside .detail::after {
		background: linear-gradient(-90deg,rgba(0, 150, 68, 1) 0%, rgba(0, 110, 50, 1) 99%);
		left: 0;
	}

	#service section h3 {
		font-size: clamp(2.8rem, -0.133rem + 4.01vw, 4.2rem);
		line-height: 1.3;
		margin: 0 0 1em;
	}
	#service section h3 small {
		font-size: clamp(1.4rem, -0.201rem + 2.29vw, 2.2rem);
	}
	#service section .detail p { 
		line-height: 2; 
		margin: 0 0 1.5em;
	}

}

/* ---------------------------------------- message */

#message { text-align: center; }
#message h2 {
	/*color: #009644;*/
	line-height: 1.4;
	font-weight: bold;
	margin: 0 0 1em;
}
#message p {
	font-weight: normal;
	line-height: 2.25; 
}
#message p + p { margin: 1.5em 0 0; }

@media (max-width: 750px) {

	#message { padding: 3em 1.25em; }
	#message h2 { font-size: clamp(1.8rem, -0.084rem + 6.05vw, 4.4rem); }
	#message p { font-size: clamp(1.4rem, 0.224rem + 3.26vw, 2.8rem); }

}

@media (min-width: 751px) {

	#message { padding: 2em 1em; }
	#message h2 { font-size: clamp(2.4rem, -0.517rem + 4.3vw, 3.9rem); }

}

/* ---------------------------------------- news */

#news { background: #f4faf6; }
#news h2 {
	text-align: center;
	font-weight: bold;
}
#news h2 small {
	display: block;
	color: #009644;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
}

#news .inside ul {
	display: flex;
	flex-wrap: wrap;
}
#news .inside ul li {
	display: flex;
	align-items: stretch;
}
#news .inside ul li a {
	display: block;
	background: #fff;
	padding: 1em;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

#news .inside ul li figure { margin: 0 0 .5em; }
#news .inside ul li .date {
	color: #009644;
	margin: 0 0 .5em;
}
#news .inside ul li p:not(.date) { 
	font-weight: bold;
	line-height: 1.4; 
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

#news .inside ul li a:hover {
	color: #fff;
	background: #009644;
}
#news .inside ul li a:hover .date { color: #fff; }

#news .learnMore {
	text-align: center;
	margin: 2em 0 0;
}

@media (max-width: 750px) {

	#news { padding: 3em 1em; }
	#news h2 {
		font-size: clamp(2.4rem, 0.291rem + 6.05vw, 5.2rem);
		margin: 0 0 1.5em;
	}
	#news h2 small {
		font-size: clamp(1.6rem, 0.442rem + 2.79vw, 2.8rem);
	}

	#news .inside ul li {
		width: 48%;
		margin: 0 4% 4% 0;
	}
	#news .inside ul li:nth-child( 2n+2 ) { margin: 0 0 4% 0; }

	#news .date { font-size: clamp(1.2rem, 0.285rem + 2.33vw, 2.2rem); }

}

@media (min-width: 751px) {

	#news { padding: 3.5em 1.5em; }
	#news h2 {
		font-size: clamp(2.85rem, 0.271rem + 3.15vw, 3.9rem);
		margin: 0 0 1.5em;
	}
	#news h2 small {
		font-size: clamp(1.6rem, 0.193rem + 1.72vw, 2.2rem);
	}

	#news .inner {
		max-width: 1100px;
		margin: 0 auto;
	}
	
	#news .inside ul li {
		width: 31.333333%;
		margin: 0 2% 2% 0;
	}
	#news .inside ul li:nth-child( 3n+3 ) { margin: 0 0 2% 0; }

	#news .date { font-size: clamp(1.2rem, 0.481rem + 0.57vw, 1.4rem); }

}

/* ---------------------------------------- banners */

#banners a {
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#banners a:hover { opacity: .5; }

@media (max-width: 750px) {

	#banners { 
		background: url( ../images/sp/home/backimg.jpg ) no-repeat center center;
		background-size: cover;
		padding: 3em 1em; 
	}
	#banners ul li:not(:last-child) { margin: 0 0 1em; }

}

@media (min-width: 751px) {

	#banners { 
		background: url( ../images/pc/home/backimg.jpg ) no-repeat center center;
		background-size: cover;
		padding: 3.5em 1.5em; 
	}
	#banners .inner {
		max-width: 1100px;
		margin: 0 auto;
	}
	#banners ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#banners ul li { margin: 0 0 2.3333em; }
	#banners ul li.half {
		width: 48%;
	}

}