@charset "utf-8";
/* CSS Document */

h2 span,
h3 span{
  display: inline-block;
}


.fv{
	position: relative;
	background-color: #000;
}
body.on .fv{
	height: 100vh;	
	overflow: hidden;
}
.fv .swiper{
	z-index: 1;
	position: relative;
}
body.on .fv::after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: rgba(0,0,0,0.20);
	z-index: 2;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
body.on .fv .swiper-slide{
	width: 100%!important;
	height:100vh;
}

body.on .fv .swiper-slide .swiper-img{
	width: 100%!important;
	height:100vh;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.fv .swiper-slide-active .swiper-img,
.fv .swiper-slide-duplicate-active .swiper-img,
.fv .swiper-slide-prev .swiper-img {
  animation: zoomUp 10s linear 0s normal both;
}
.fv .swiper-slide img {
	display: block!important;
	opacity: 0;
	height: auto;
	width: 100%;
}
body:not(.on) .fv .swiper-slide img{
	opacity: 1;
}

body.on .fv .txtbox{
	position: absolute;
	width: 90%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 5;
}
.fv .txtbox h1,.fv .txtbox p{
	color: #fff;
}
.fv .txtbox h1{
	font-size: clamp(24px,5.2vw,80px);
	line-height: 2;
}
.fv .contact_icon{
	position: absolute;
	z-index: 4;
	width: 30%;
	max-width: 240px;
	bottom: 30px;
	right: 30px;
}
body.on .fv .txtbox h1,body.on .fv .txtbox p,body.on .fv .contact_icon{
	opacity:0;
	transform: translateY(50px);
	-ms-filter: blur(6px);
	filter: blur(6px);
	animation-name: blurin2;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
body.on .fv .txtbox h1{
	animation-delay: 0.6s;	
}
body.on .fv .txtbox p{
	animation-delay: 1.2s;	
}
body.on .fv .contact_icon{
	animation-delay: 1.8s;	
}


.title-style1 .en_title{
	opacity: 0.05;
}
.section01{
	position: relative;
	padding-bottom: 0;
}
.section01::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 15vw;
	background-color: #fff;
	z-index: 1;
}
.section01 > div{
	position: relative;
	z-index: 3;
}
.section01 .imgbox{
	position: relative;
}
.section01 .imgbox img{
	border-radius: 10px;
}
.section01 .imgbox img:first-of-type{
	position: relative;
	z-index: 2;
	box-shadow: 0 0 30px rgba(0,0,0,0.2);
}
.section01 .imgbox img:last-of-type{
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(5%,5%);
	z-index: 1;
	opacity: 0.5;
	-ms-filter: blur(6px);
	filter: blur(6px);
}
.section01 .top_img{
	justify-content: space-between;
	align-items: flex-end;
}
.section01 .top_img .img1{
	width: 50%;
	padding-bottom: 10%;
}
.section01 .top_img .img2{
	width: 30%;
}
.section01 .bottom_img .img3{
	width: 50%;
	margin-left: 30%;
}

.section01 .txtbox{
	padding: 100px 0;
}
.section01 .txtbox .contents{
	border-radius: 20px;
	background-color: #fff;
	padding: 3%;
}

.section02{
	padding-left: 0;
	padding-right: 0;
}
.section02 .boxwrap .box{
	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: column-reverse;
	position: relative;
}
.section02 .boxwrap .box:nth-of-type(even){
    align-items: flex-end;
}
.section02 .boxwrap .box:not(:last-of-type){
	margin-bottom: 80px;
}
.section02 .boxwrap .box::after{
	content: "";
	position: absolute;
	width: 24px;
	height: 100%;
	top: -80px;
}
.section02 .boxwrap .box:nth-of-type(odd):not(:first-of-type)::after{
	right: 25%;
	border-left: 10px solid #15558A;
	border-right: 3px solid #15558A;
}
.section02 .boxwrap .box:nth-of-type(even)::after{
	left: 25%;
	border-right: 10px solid #15558A;
	border-left: 3px solid #15558A;
}
.section02 .boxwrap .box .imgbox{
	width: 80%;
	position: relative;
	z-index: 2;
}
.section02 .boxwrap .box:nth-of-type(odd) .imgbox{
	margin-left: 20%;
}
.section02 .boxwrap .box:nth-of-type(even) .imgbox{
	margin-right: 20%;
}
.section02 .boxwrap .box .txtbox{
	width: 60%;
	position: relative;
	z-index: 3;
	margin-bottom: -10%;
	align-items: stretch;
}
.section02 .boxwrap .box:nth-of-type(odd) .txtbox{
	margin-left: 5%;
}
.section02 .boxwrap .box:nth-of-type(even) .txtbox{
	flex-direction: row-reverse;
	margin-right: 5%;
}
.section02 .boxwrap .box .txtbox .leftbopx{
	width: 30%;
	position: relative;
}
.section02 .boxwrap .box .txtbox .leftbopx::after{
	content: "";
	width: 80%;
	height: 100%;
	position: absolute;
	top: 0;
}
.section02 .boxwrap .box:nth-of-type(odd) .txtbox .leftbopx::after{
	right: 0;
	background: #F7F4F0;
	background: linear-gradient(270deg, rgba(247, 244, 240, 1) 0%, rgba(251, 249, 245, 0.8) 15%, rgba(251, 248, 244, 0) 100%);
}
.section02 .boxwrap .box:nth-of-type(even) .txtbox .leftbopx::after{
	left: 0;
	background: #F7F4F0;
	background: linear-gradient(90deg, rgba(247, 244, 240, 1) 0%, rgba(251, 249, 245, 0.8) 15%, rgba(251, 248, 244, 0) 100%);
}
.section02 .boxwrap .box .txtbox .rightbox{
	width: 70%;
	padding: 5%;
}
.section02 .boxwrap .box .txtbox .rightbox .en_title{
	font-size: clamp(50px, 5.2vw, 90px);
}

.section03{}
.section03 .boxwrap{
	gap: 80px;
}
.section03 .boxwrap .box{
	width: calc(100% / 2 - 80px / 2);
}
.section03 .boxwrap .box .imgbox,.section03 .boxwrap .box > p{
	padding-right: 80px;
}
.section03 .boxwrap .box .imgbox{
	position: relative;
}
.section03 .boxwrap .box .titlebox{
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	padding: 40px;
	box-shadow: -5px -5px 0 #fff;
}


.section04 .contents .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: 40px 20px;
}
.section04 .contents .webgene-blog .webgene-item{
	width: calc(100% / 4 - 60px / 4);
}

.section05 .box:not(:last-of-type){margin-bottom: 80px;}
.section05 .box:nth-of-type(even){
	flex-direction: row-reverse;
}
.section05 .box .imgbox{
	width: 30%;
	position: relative;
	z-index: 2;
}
.section05 .box:nth-of-type(odd) .imgbox{
	transform: translateX(80px);
}
.section05 .box:nth-of-type(even) .imgbox{
	transform: translateX(-80px);
}
.section05 .box .txtbox{
	width: 70%;
	padding: 5%;
}
.section05 .box:nth-of-type(odd) .txtbox{
	padding-left: calc(80px + 5%);
}
.section05 .box:nth-of-type(even) .txtbox{
	padding-right: calc(80px + 5%);
}
.section05 .linkbox{
	justify-content: flex-start;
	gap: 30px;
}
.section05 .linkbox a{
	gap: 15px;
	border-color: #fff;
}
.section05 .linkbox a p,.section05 .linkbox a i{
	color: #fff;
}
.section05 .linkbox a i{
	transition: ease 0.3s;
}
.section05 .linkbox a:hover i{
	transform: translateX(3px);
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.section03 .boxwrap{
		gap: 50px;
	}
	.section03 .boxwrap .box{
		width: calc(100% / 2 - 50px / 2);
	}
	.section03 .boxwrap .box .imgbox,.section03 .boxwrap .box > p{
		padding-right: 50px;
	}
	.section03 .boxwrap .box .imgbox{
		position: relative;
	}
	.section03 .boxwrap .box .titlebox{
		padding: 30px;
		box-shadow: -5px -5px 0 #fff;
	}
	.section04 .contents .webgene-blog{
		gap: 15px;
	}
	.section04 .contents .webgene-blog .webgene-item{
		width: calc(100% / 4 - 45px / 4);
	}
	.section05 .box:nth-of-type(odd) .imgbox{
		transform: translateX(60px);
	}
	.section05 .box:nth-of-type(even) .imgbox{
		transform: translateX(-60px);
	}
	.section05 .box .txtbox{
		width: 70%;
		padding: 5%;
	}
	.section05 .box:nth-of-type(odd) .txtbox{
		padding-left: calc(60px + 5%);
	}
	.section05 .box:nth-of-type(even) .txtbox{
		padding-right: calc(60px + 5%);
	}
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.section01 .top_img .img2{
		width: 35%;
	}
	.section02 .boxwrap .box .imgbox{
		width: 90%;
	}
	.section02 .boxwrap .box:nth-of-type(odd) .imgbox{
		margin-left: 10%;
	}
	.section02 .boxwrap .box:nth-of-type(even) .imgbox{
		margin-right: 10%;
	}
	.section02 .boxwrap .box .txtbox{
		width: 70%;
		margin-bottom: -10%;
		align-items: stretch;
	}
	.section02 .boxwrap .box:nth-of-type(odd) .txtbox{
		margin-left: 0%;
	}
	.section02 .boxwrap .box:nth-of-type(even) .txtbox{
		margin-right: 0%;
	}
	.section02 .boxwrap .box::after{
		width: 20px;
	}
	.section02 .boxwrap .box:nth-of-type(odd):not(:first-of-type)::after{
		right: 20%;
		border-left: 8px solid #15558A;
		border-right: 2px solid #15558A;
	}
	.section02 .boxwrap .box:nth-of-type(even)::after{
		left: 20%;
		border-right: 8px solid #15558A;
		border-left: 2px solid #15558A;
	}
	.section04 .contents .webgene-blog{
		gap: 40px 20px;
	}
	.section04 .contents .webgene-blog .webgene-item{
		width: calc(100% / 2 - 20px / 2);
	}
	.section05 .box .imgbox{
		width: 40%;
	}
	.section05 .box:nth-of-type(odd) .imgbox{
		transform: translateX(60px);
	}
	.section05 .box:nth-of-type(even) .imgbox{
		transform: translateX(-60px);
	}
	.section05 .box .txtbox{
		width: 60%;
		padding: 5%;
	}
	.section05 .box:nth-of-type(odd) .txtbox{
		padding-left: calc(60px + 5%);
	}
	.section05 .box:nth-of-type(even) .txtbox{
		padding-right: calc(60px + 5%);
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.section01 .txtbox{
		padding: 80px 0;
	}
	.section01 .top_img .img2{
		width: 40%;
	}
	.section01 .bottom_img .img3{
		width: 60%;
	}
	.section02 .boxwrap .box::after{
		width: 18px;
	}
	.section02 .boxwrap .box:nth-of-type(odd):not(:first-of-type)::after{
		right: 15%;
		border-left: 6px solid #15558A;
		border-right: 2px solid #15558A;
	}
	.section02 .boxwrap .box:nth-of-type(even)::after{
		left: 15%;
		border-right: 6px solid #15558A;
		border-left: 2px solid #15558A;
	}
	.section02 .boxwrap .box .txtbox{
		width: 75%;
	}
	.section03 .boxwrap{
		gap: 50px;
	}
	.section03 .boxwrap .box{
		width: calc(100% / 2 - 50px / 2);
	}
	.section03 .boxwrap .box .imgbox,.section03 .boxwrap .box > p{
		padding-right: 0px;
	}
	.section03 .boxwrap .box .imgbox{
		position: relative;
	}
	.section03 .boxwrap .box .imgbox img{
		margin-bottom: -50px;
	}
	.section03 .boxwrap .box .titlebox{
		position: relative;
		top: 50%;
		right: 0;
		width: 90%;
		margin-left: 5%;
		transform: translateY(0);
		padding: 30px;
		box-shadow: -3px -3px 0 #fff;
		z-index: 2;
	}
	.section05 .box:not(:last-of-type){margin-bottom: 60px;}
	.section05 .box:nth-of-type(odd) .imgbox{
		transform: translateX(40px);
	}
	.section05 .box:nth-of-type(even) .imgbox{
		transform: translateX(-40px);
	}
	.section05 .box .txtbox{
		width: 60%;
		padding: 5%;
	}
	.section05 .box:nth-of-type(odd) .txtbox{
		padding-left: calc(40px + 5%);
	}
	.section05 .box:nth-of-type(even) .txtbox{
		padding-right: calc(40px + 5%);
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.fv .txtbox p{
		text-align: left;
	}
	.fv .txtbox p br{
		display: none;
	}
	.fv .contact_icon{
		width: 40%;
		right: 10px;
		bottom: 10px;
	}
	.section01 .top_img .img1{
		width: 80%;
		padding-bottom: 10%;
	}
	.section01 .top_img .img2{
		width: 60%;
		margin-left: 40%;
	}
	.section01 .bottom_img .img3{
		width: 70%;
		margin-left: 10%;
	}
	.section01 .txtbox .contents{
		padding: 5%;
	}
	.section02 .boxwrap .box{
		display: block;
		position: relative;
	}
	.section02 .boxwrap .box .imgbox{
		width: 95%;
		margin-bottom: 20px;
	}
	.section02 .boxwrap .box:nth-of-type(odd) .imgbox{
		margin-left: 5%;
	}
	.section02 .boxwrap .box:nth-of-type(even) .imgbox{
		margin-right: 5%;
	}
	.section02 .boxwrap .box .txtbox{
		width: 100%;
		margin-bottom: 0;
	}
	.section03 .boxwrap{
		gap: 40px;
	}
	.section03 .boxwrap .box{
		width: 100%;
	}
	.section03 .boxwrap .box .imgbox,.section03 .boxwrap .box > p{
		padding-right: 0px;
	}
	.section03 .boxwrap .box .imgbox{
		position: relative;
	}
	.section03 .boxwrap .box .imgbox img{
		margin-bottom: -50px;
	}
	.section03 .boxwrap .box .titlebox{
		position: relative;
		top: 50%;
		right: 0;
		width: 90%;
		margin-left: 5%;
		transform: translateY(0);
		padding: 30px;
		box-shadow: -3px -3px 0 #fff;
		z-index: 2;
	}
	.section04 .contents .webgene-blog{
		gap: 30px;
	}
	.section04 .contents .webgene-blog .webgene-item{
		width: 100%;
	}
	.section05 .boxwrap .box:not(:last-of-type){margin-bottom: 50px;}
	.section05 .box{
		display: block;
	}
	.section05 .box .imgbox{
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: -50px;
	}
	.section05 .box:nth-of-type(odd) .imgbox{
		transform: translateX(0px);
	}
	.section05 .box:nth-of-type(even) .imgbox{
		transform: translateX(0px);
	}
	.section05 .box .txtbox{
		width: 100%;
		padding: 80px 20px 50px;
	}
	.section05 .box .txtbox .default_title{font-size: 20px;}
	.section05 .box:nth-of-type(odd) .txtbox{
		padding-left: 20px;
	}
	.section05 .box:nth-of-type(even) .txtbox{
		padding-right: 20px;
	}
	.section05 .linkbox{
		justify-content: center;
	}
	.section05 .linkbox a p, .section05 .linkbox a i{
		font-size: 14px;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}