@charset "utf-8";
/* CSS Document */
.main-wrap .section03 .webgene-blog .webgene-item h3 {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fv{}
body.on .fv .bg_img_wrap2 > img{
	display: block!important;
	opacity: 0;
}
.main-wrap .section01{
	margin-bottom: 5vw;
}
.main-wrap .section01 .top_box{
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 3;
	margin-bottom: -50px;
}
.main-wrap .section01 .bottom_box{
	position: relative;
	z-index: 1;
	padding: 120px 0px 80px;
}
.main-wrap .section01 .top_box > div{
	max-width: 40%;
}
.main-wrap .section01 .top_box .titlebox{
	padding: 80px 0;
}
.main-wrap .section01 .top_box .titlebox .title p{
	padding: 30px 40px 20px;
	border-radius: 0 30px 30px 30px;
}
.main-wrap .section01 .top_box .titlebox .title p span{
	display: inline-block;
	transform: scale(1.4) translateY(-10%);
	padding: 0 20px;
}
.main-wrap .section01 .top_box .titlebox > div:not(.title) p span{
	display: inline-block;
	line-height: 1;
	padding: 5px 15px;
	background-color: #fff;
}
.main-wrap .section01 .bottom_box .box_wrap,.main-wrap .section01 .bottom_box .box_wrap > div{
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
	flex-direction: row;
}
.main-wrap .section01 .bottom_box .box_wrap{
	align-items: stretch;
	padding: 0 10vw;
}
.main-wrap .section01 .bottom_box .box_wrap .box{
	width: calc(100% / 3 - 140px / 3);
	padding: 15px 5px;
	border: 3px solid #1AAB79;
}
.main-wrap .section01 .bottom_box .box_wrap .xmark{
	width: 70px;
}
.main-wrap .section01 .bottom_box .box_wrap .xmark i{
	color: #DEA33E;
}

.main-wrap .section01 .bottom_box .imgbox{
	position: absolute;
	width: 20vw;
	bottom: 0;
	left: 0;
	transform: translate(-50%,50%);
}
.main-wrap .section01 .bottom_box .imgbox img{
	border: 10px solid #fff;
}

.main-wrap .section02 .box_wrap .box{
	position: relative;
	width: calc(100% - 50px);
	padding: 80px;
}
.main-wrap .section02 .box_wrap .box:not(:last-of-type){
	margin-bottom: 100px;
}
.main-wrap .section02 .box_wrap .box:nth-of-type(even){
	margin-left: auto;
	margin-right: 0;
}

.main-wrap .section02 .box_wrap .box .title{
	position: absolute;
	top: 0;
	padding: 30px 20px;
	border-radius: 0 30px 30px 30px;
	text-align: center;
	background-color: #E17903;
}
.main-wrap .section02 .box_wrap .box .title img{
	width: 40px;
	margin-bottom: 20px;
}
.main-wrap .section02 .box_wrap .box .title p{
	color: #fff;
	font-weight: 900;
	font-size: 38px;
}
.main-wrap .section02 .box_wrap .box:nth-of-type(2) .title{
	background-color: #EACF00;
}
.main-wrap .section02 .box_wrap .box:nth-of-type(3) .title{
	background-color: #95CA66;
}
.main-wrap .section02 .box_wrap .box:nth-of-type(odd) .title{
	right: 0;
	transform: translate(50px,-50px);
}
.main-wrap .section02 .box_wrap .box:nth-of-type(even) .title{
	left: 0;
	transform: translate(-50px,-50px);
}

.main-wrap .section02 .box_wrap .box .imgbox{
	width: 40%;
}
.main-wrap .section02 .box_wrap .box .txtbox{
	width: 60%;
	padding-left: 50px;
}

.main-wrap .section03{
}
.main-wrap .section03 .titlebox{
	position: relative;
}
.main-wrap .section03 .titlebox .more{
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
.main-wrap .section03 .webgene-blog {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  gap: 50px 30px;
}
.main-wrap .section03 .webgene-blog .webgene-item {
  width: calc(100% / 4 - 90px / 4);
	transition: ease 0.3s;
}
.main-wrap .section03 .webgene-blog .webgene-item:hover{
	opacity: 0.5!important;
}
.main-wrap .section03 .webgene-blog .webgene-item a{
	display: block;
}

.main-wrap .section03 .webgene-blog .webgene-item .imgbox {
  margin-bottom: 20px;
  border-radius: 20px;
  overflow: hidden;
  height: 180px;
}
.main-wrap .section03 .webgene-blog .webgene-item .imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-wrap .section03 .webgene-blog .webgene-item .cate{
	display: inline-block;
	padding: 7px 15px;
	border-radius: 200px;
	line-height: 1;
     background-color: #1AAB79;
}
.main-wrap .section03 .webgene-blog .webgene-item .date{
	display: inline-block;
	border-radius: 200px;
	line-height: 1;
    
}

.main-wrap .section04{
	background-color: #E9CF01;
}
.main-wrap .section04 .box_wrap{
	justify-content: space-between;
}
.main-wrap .section04 .box_wrap .box{
	width: 45%;
	flex-wrap: nowrap;
	gap: 20px;
}
.main-wrap .section04 .box_wrap .box .title{
	padding: 30px 15px;
	border-radius: 0 30px 30px 30px;
	text-align: center;
	background-color: #1AAB79;
}
.main-wrap .section04 .box_wrap .box .title h2{
	color: #fff;
}
.main-wrap .section04 .title {
  display: flex;
  width: 60px;
  box-sizing: border-box;
}
.main-wrap .section04 .title h2 {
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.2; 
  max-width: 100%;
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.main-wrap .section01 .top_box{
		align-items: flex-end;
	}
	.main-wrap .section01 .bottom_box .box_wrap{
		padding: 0 9vw;
	}
	.main-wrap .section01 .bottom_box .imgbox{
		width: 18vw;
	}
	.main-wrap .section01 .bottom_box .imgbox img{
		border-width: 5px;
	}
	.main-wrap .section02 .box_wrap .box .title p{
		font-size: 32px;
	}
	.main-wrap .section03 .webgene-blog {
		gap: 50px 20px;
	}
	.main-wrap .section03 .webgene-blog .webgene-item {
		width: calc(100% / 4 - 60px / 4);
	}
	.main-wrap .section04 .box_wrap{
		gap: 50px;
	}
	.main-wrap .section04 .box_wrap .box{
		width: calc(50% - 25px);
	}
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.main-wrap .section01 .top_box .titlebox{
		max-width: 60%;
	}
	.main-wrap .section01 .bottom_box .box_wrap .box{
		width: calc(100% / 3 - 100px / 3);
		padding: 15px 5px;
		border: 3px solid #1AAB79;
	}
	.main-wrap .section01 .bottom_box .box_wrap .xmark{
		width: 50px;
	}
	.main-wrap .section02 .box_wrap .box{
		padding: 50px 60px;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.main-wrap .section01 .top_box > div{
		max-width: calc(100% / 2 - 50px / 2);
	}
	.main-wrap .section01 .bottom_box{
		width: 95%!important;
	}
	.main-wrap .section02 .box_wrap .box{
		padding: 50px 50px;
	}
	
	.main-wrap .section02 .box_wrap .box .imgbox{
		width: 70%;
		margin-bottom: 30px;
	}
	.main-wrap .section02 .box_wrap .box .txtbox{
		width: 100%;
		padding-left: 0px;
	}
	.main-wrap .section02 .box_wrap .box .txtbox h2,.main-wrap .section02 .box_wrap .box .txtbox .more{
		display:-webkit-box;
		display:-moz-box;
		display:-ms-box;
		display:-webkit-flexbox;
		display:-moz-flexbox;
		display:-ms-flexbox;
		display:-webkit-flex;
		display:-moz-flex;
		display:-ms-flex;
		display:flex;
		-webkit-box-lines:multiple;
		-moz-box-lines:multiple;
		-webkit-flex-wrap:wrap;
		-moz-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}
	
	.main-wrap .section04 .box_wrap .box{
		position: relative;
		padding-left: 20px;
		padding-top: 20px;
	}
	.main-wrap .section04 .box_wrap .box .title{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.main-wrap .section03 .webgene-blog {
		gap: 50px 30px;
	}
	.main-wrap .section03 .webgene-blog .webgene-item {
		width: calc(100% / 2 - 30px / 2);
	}

}
@keyframes fv_anime {
	0% {
		background-position:center center;
	}
	25% {
		background-position:center left;
	}
	50% {
		background-position:center center;
	}
	75% {
		background-position:center right;
	}
	100% {
		background-position:center center;
	}
}

/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	body.on .fv .bg_img_wrap2{
		height: 50vh;
		animation-name: fv_anime;
		animation-duration: 18s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
	}
	.main-wrap .section01 .top_box {
		justify-content: center;
	}
	.main-wrap .section01 .top_box > div{
		max-width: 90%;
	}
	.main-wrap .section01 .top_box .titlebox{
		max-width: 100%;
		padding-top: 0;
		padding-bottom: 50px;
	}
	.main-wrap .section01 .top_box .titlebox .title p{
		padding: 15px 20px 10px;
		border-radius: 0 15px 15px 15px;
		font-size: 20px;
	}
	.main-wrap .section01 .top_box .titlebox .title p span{
		padding: 0 15px;
	}
	.main-wrap .section01 .bottom_box{
		width: 100%!important;
		margin-left: 0;
		padding: 80px 20px 50px;
	}
	
	.main-wrap .section01 .bottom_box .box_wrap .box{
		width: 100%;
		padding: 15px 5px;
		border: 3px solid #1AAB79;
	}
	.main-wrap .section01 .bottom_box .box_wrap .xmark{
		width: 50px;
		padding: 15px 0;
	}
	.main-wrap .section01 .bottom_box .imgbox{
		width: 40vw;
	}
	
	.main-wrap .section02 .box_wrap .box{
		width: calc(100% - 20px);
		padding: 20px 20px;
	}
	.main-wrap .section02 .box_wrap .box:not(:last-of-type){
		margin-bottom: 80px;
	}
	.main-wrap .section02 .box_wrap .box .title{
		padding: 15px 10px;
		border-radius: 0 15px 15px 15px;
	}
	.main-wrap .section02 .box_wrap .box:nth-of-type(odd) .title{
		right: 0;
		transform: translate(20px,-30px);
	}
	.main-wrap .section02 .box_wrap .box:nth-of-type(even) .title{
		left: 0;
		transform: translate(-20px,-30px);
	}
	.main-wrap .section02 .box_wrap .box .title img{
		width: 30px;
		margin-bottom: 10px;
	}
	.main-wrap .section02 .box_wrap .box .title p{
		font-size: 28px;
	}
	.main-wrap .section02 .box_wrap .box .imgbox{
		width: 100%;
		margin-bottom: 20px;
	}
	.main-wrap .section02 .box_wrap .box .txtbox{
		width: 100%;
		padding-left: 0px;
	}
	
	.main-wrap .section04 .box_wrap{
		gap: 30px;
	}
	.main-wrap .section04 .box_wrap .box{
		width: 100%;
	}
	.main-wrap .section04 .box_wrap .box .more{
		display:-webkit-box;
		display:-moz-box;
		display:-ms-box;
		display:-webkit-flexbox;
		display:-moz-flexbox;
		display:-ms-flexbox;
		display:-webkit-flex;
		display:-moz-flex;
		display:-ms-flex;
		display:flex;
		-webkit-box-lines:multiple;
		-moz-box-lines:multiple;
		-webkit-flex-wrap:wrap;
		-moz-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}
	.main-wrap .section03 .webgene-blog {
		gap: 40px 20px;
	}
	.main-wrap .section03 .webgene-blog .webgene-item {
		width: 100%;
		text-align: center;
	}
	.main-wrap .section03 .webgene-blog .webgene-item p:not(.cate), .main-wrap .section03 .webgene-blog .webgene-item h3 {
		text-align: left;
	}

	.main-wrap .section03 .webgene-blog .webgene-item .imgbox {
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}

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