@charset "utf-8";
/* CSS Document */
.top_contents{
	position: relative;
}
.top_contents .bgimg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	justify-content: space-between;
}
body.gjs-dashed .top_contents .bgimg{
	position: static;
}

.top_contents .bgimg > div{
	width: 25%;
}
.top_contents .txtbox{
	position: relative;
	z-index: 2;
	width: 100%;
}
.top_contents .txtbox .morewrap{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
.top_contents .txtbox .morewrap .more1{
	width: 40%;
}
.top_contents .txtbox .morewrap .more1 a{
	width: 100%;
	max-width: 400px;
}
.top_contents .txtbox .morewrap .more1:first-of-type a{
	border-color: #FD666F;
	background-color: #FD666F;
}
.top_contents .txtbox .morewrap .more1:last-of-type a{
	border-color: #3FACE4;
	background-color: #3FACE4;
}
.top_contents .txtbox .morewrap .more1:first-of-type a:hover p,.top_contents .txtbox .morewrap .more1:first-of-type a:hover i{
	color: #FD666F;
}
.top_contents .txtbox .morewrap .more1:last-of-type a:hover p,.top_contents .txtbox .morewrap .more1:last-of-type a:hover i{
	color: #3FACE4;
}
.cate1{
	background-color: #E2EBB2;
}
.cate3{
	background-color: #E2EBB2;
}
.cate3 .boxwrap{
	gap: 30px;
	align-items: stretch;
}
.cate3 .boxwrap .box{
	width: calc(100% / 3 - 60px / 3);
	padding: 30px;
	justify-content: flex-start;
	background-color: #fff;
}
.cate3 .boxwrap .box :nth-of-type(2){
	animation-delay: 0.2s;
}
.cate3 .boxwrap .box :nth-of-type(3){
	animation-delay: 0.4s;
}
.cate3 .boxwrap .box .imgbox{
	width: 80%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}
.cate3 .boxwrap .box .txtitem{
	width: 100%;
	background-color: #F4F3ED;
}

.cate4{
	position: relative;
}
body:not(.gjs-dashed) .cate4::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: #D4E8C7;
	background: linear-gradient(90deg, rgba(212, 232, 199, 0) 0%, rgba(212, 232, 199, 0.8) 40%, rgba(212, 232, 199, 1) 50%, rgba(212, 232, 199, 0.8) 60%, rgba(212, 232, 199, 0) 100%);
	mix-blend-mode: hard-light;
}
.cate4 .contents{
	position: relative;
	z-index: 2;
}
.cate4 .contents .comment_txt{
	padding-bottom: 16px;
}
.cate4 .contents .comment_txt p{
	position: relative;
	padding: 10px 30px;
	border-radius: 200px;
	background-color: #fff;
	font-weight: 700;
}
.cate4 .contents .comment_txt p::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,100%);
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	border-top: 10px solid #fff;
	border-bottom: 0;
}
.cate4 .contents .txtitem span{
	background-color: #F4F090;
	padding: 0 3px;
	font-weight: 600;
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.cate3 .boxwrap .box{
		padding: 30px 20px;
	}
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.cate3 .boxwrap .box{
		width: calc(100% / 2 - 30px / 2);
		padding: 30px;
	}
	.cate3 .boxwrap .box :nth-of-type(2){
		animation-delay: 0s;
	}
	.cate3 .boxwrap .box :nth-of-type(3){
		animation-delay: 0s;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 767px){
	.top_contents .txtbox .morewrap{
		flex-direction: column;
		gap: 20px;
	}
	.top_contents .txtbox .morewrap .more1{
		width: 80%;
	}
	.top_contents .txtbox .morewrap .more1 a{
		width: 100%;
		max-width: 300px;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.top_contents{
		padding-left: 10px;
		padding-right: 10px;
	}
	.top_contents .txtbox p{
		font-size: 14px;
	}
	.top_contents .bgimg > div{
		width: 40%;
		position: absolute;
	}
	.top_contents .bgimg .img1{
		bottom: 0;
		left: 0;
	}
	.top_contents .bgimg .img2{
		bottom: 0;
		right: 0;
	}
	.cate3 .boxwrap .box{
		width: 100%;
		padding: 20px;
	}
	.cate4.bg_img_wrap2{
		background-position: center left 30%;
	}
	body:not(.gjs-dashed) .cate4::after{
		background: #D4E8C7;
		background: linear-gradient(90deg, rgba(212, 232, 199, 0.2) 0%, rgba(212, 232, 199, 0.8) 30%, rgba(212, 232, 199, 1) 50%, rgba(212, 232, 199, 0.8) 70%, rgba(212, 232, 199, 0.2) 100%);
	}
	
}

/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}