@charset "utf-8";
/* CSS Document */
.fv{
}
.fv .top-news .contents,.fv .top-news .contents .webgene-blog .webgene-item a{
	gap: 20px;
}
.fv .top-news .contents{
	height: 80px;
	justify-content: flex-end;
	flex-wrap: nowrap;
	width: 100%;
	padding: 0 50px;
}
.fv .top-news .contents .swiper-container{
	max-width: 80%;
}
.fv .top-news .contents .swiper-container{
	height: 20px;
	overflow: hidden;
}
.fv .top-news .contents .webgene-blog .webgene-item a{
	flex-wrap: nowrap;
	width: auto;
}
.fv .video-box{
	position: relative;
	width: 100%;
	height: calc(100vh - 100px);
	border-radius: 0 80px 0 80px;
	overflow: hidden;
	z-index: 1;
	border-bottom: 2px solid #EDECE2;
}
.fv .video-box::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #808080;
	opacity: 0.6;
	z-index: 2;
}
.fv .video-box video{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) scale(1.1);
	z-index: 1;
	-ms-filter: blur(4px);
	filter: blur(4px);
}
.fv .video-box .txt-box{
	position: absolute;
	width: 90%;
	left: 5%;
	top: 5%;
	z-index: 3;
	color: #EDECE2;
}
.fv .video-box .txt-box p{
	font-size: 5vw;
	transform: rotate(-15deg);
	line-height: 1.3;
	padding-bottom: 10vw;
}
.fv .video-box .txt-box h1{
	font-weight: 500;
	font-size: 2.4vw;
	text-shadow: 0 0 15px rgba(0,0,0,0.2);
}
body.on .fv.active .video-box .txt-box p{
	opacity: 0;
	transform: rotate(-15deg) translateX(-100px);
	animation-name: fv_txt1;
	animation-delay: 1.8s;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
body.on .fv.active .video-box .txt-box h1{
	opacity: 0;
	transform: translateY(25%);
	animation-name: fv_txt2;
	animation-delay: 2.6s;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
@keyframes fv_txt1 {
	0% {
		opacity: 0;
		transform: rotate(-15deg) translateX(-100px);
	}
	100% {
		opacity: 1;
		transform: rotate(-15deg) translateX(0);
	}
}
@keyframes fv_txt2 {
	0% {
		opacity:0;
		transform: translateY(25%);
	}
	100% {
		opacity:1;
		transform: translateY(0px);
	}
}

.fv .img-box{
	position: relative;
	z-index: 2;
 	justify-content: space-between;
	align-items: flex-end;
	flex-direction: row-reverse;
}
.fv .img-box img:nth-of-type(1){
	width: 55%;
	border-radius: 80px 0 80px 0;
	transform: translateY(-25%);
}
.fv .img-box img:nth-of-type(2){
	width: 40%;
	border-radius: 0 80px 0 80px;
}

.top-title1{
	position: relative;
	padding-bottom: 5vw;
}
.top-title1 p{
	display: inline-block;
	text-align: left;
	font-size: 5vw;
	line-height: 1;
	transform: rotate(-15deg);
}

.top-contents > div{
	width: 50%;
}
.top-contents .txt-box{
	position: relative;
}
.top-contents .img-box img{
	width: 47.5%;
}

.section01 .img-box{
	justify-content: space-between;
	align-items: flex-start;
}
.section01 .img-box img:nth-child(2){
	margin-top: 25%;
}
.section01 .txt-box{
	padding-left: 5%;
}
.section01 .top-title1{
	left: -10vw;
}
.section02 .top-title1{
	text-align: right;
	right: -10vw;
}
.section02 .img-box{
	order: 2;
	justify-content: space-between;
	align-items: flex-start;
	flex-direction: row-reverse;
}
.section02 .img-box img:nth-child(2){
	margin-top: 25%;
}
.section02 .txt-box{
	order: 1;
	padding-right: 5%;
}

.section03 .top-title1{
	position: relative;
	z-index: 2;
	margin-bottom: -6vw;
	left: -10vw;
}
.section03 .img-wrap{
	justify-content: space-between;
}
.section03 .img-wrap .img-box{
	width: 45%;
	position: relative;
}
.section03 .img-wrap .img-box a{
	display: block;
	position: relative;
}
.section03 .img-wrap .img-box p{
	position: absolute;
	top: 10%;
	left: 0;
	padding: 4px 20px;
	background-color: #8D8077;
	color: #EDECE2;
}

.section04{
	padding-left: 30px;
	padding-right: 30px;
}
.section04 .top-title1{
	padding-bottom: 0;
}
.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: center;
    align-items: stretch;
	flex-direction: row;
	gap: 40px;
}
.section04 .contents .webgene-blog .webgene-item{
	width: calc(100% / 3 - 80px / 3);
}
.section04 .contents .webgene-blog .webgene-item .img-box{
	padding: 20px;
	border-radius: 20px;
	background-color: rgba(141,128,119,0.10);
}
.section04 .contents .webgene-blog .webgene-item .img-box .rectangle-img{
	border-radius: 20px;
}
.section04 .contents .webgene-blog .webgene-item a > .flex{
	gap: 20px;
}

.section05{
	position: relative;
	min-height: 60vh;
	padding: 150px 20px;
	background-color: #000;
}
.section05::after{
	display: none;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.6;
	z-index: 1;
}
body.on .section05::after{
	display: block;
}
.section05 .top-title1{
	position: absolute;
	top: 50px;
	left: 30px;
}
.section05 > div{
	position: relative;
	z-index: 2;
	color: #EDECE2;
}
.section05 .more1 a{
	border: 1px solid #EDECE2;
	background-color: transparent;
}
.section05 .more1 a p{
	color: #EDECE2;
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.fv .video-box{
		border-radius: 0 60px 0 60px;
	}
	.fv .img-box{padding: 0 40px;}
	.fv .img-box img:nth-of-type(1){
		width: 55%;
		border-radius: 60px 0 60px 0;
		transform: translateY(-25%);
	}
	.fv .img-box img:nth-of-type(2){
		width: 40%;
		border-radius: 0 60px 0 60px;
	}
	
	.top-title1 p{
		font-size: 6vw;
	}
	.section04 .contents .webgene-blog{
		gap: 30px;
	}
	.section04 .contents .webgene-blog .webgene-item{
		width: calc(100% / 3 - 60px / 3);
	}
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.fv .video-box{
		border-radius: 0 40px 0 40px;
	}
	.fv .img-box img:nth-of-type(1){
		width: 55%;
		border-radius: 40px 0 40px 0;
		transform: translateY(-25%);
	}
	.fv .img-box img:nth-of-type(2){
		width: 40%;
		border-radius: 0 40px 0 40px;
	}
	.fv .img-box{padding: 0 20px;}
	.section04 .contents .webgene-blog .webgene-item .img-box{
		padding: 15px;
		border-radius: 15px;
	}
	.section04 .contents .webgene-blog .webgene-item .img-box .rectangle-img{
		border-radius: 15px;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.fv .top-news .contents{
		padding-right: 30px;
	}
	.fv .top-news .contents .swiper-container{
		max-width: 70%;
	}
	.fv .video-box{
		height: calc(75vh - 100px);
	}
	.fv .video-box .txt-box{
		height: 90%;
	}
	.fv .video-box .txt-box p{
		font-size: 7vw;
	}
	.fv .video-box .txt-box h1{
		font-size: 24px;
	}
	
	.top-title1 p{
		font-size: 7vw;
		padding-bottom: 20px;
	}
	.top-contents .img-box{
		width: 70%;
		margin-bottom: -10%;
	}
	.top-contents .txt-box{
		width: 100%;
		text-align: center;
	}
	.top-contents .txt-box > p{
		text-align: left;
		display: inline-block;
	}
	.section01 .img-box{
		margin-left: 30%;
	}
	.section01 .top-title1{
		left: 0;
		text-align: left;
	}
	.section01 .txt-box{
		padding-left: 0;
	}
	.section02{
		flex-direction: row;
	}
	.section02 .img-box{
		order: 1;
		margin-right: 30%;
		justify-content: space-between;
		align-items: flex-start;
		flex-direction: row-reverse;
	}
	.section02 .img-box img:nth-child(2){
		margin-top: 25%;
	}
	.section02 .txt-box{
		order: 2;
		padding-right: 0;
	}
	.section02 .top-title1{
		right: 0;
	}
	
	.section03 .top-title1{
		position: relative;
		z-index: 2;
		margin-bottom: -6vw;
		left: -3vw;
	}
	.section04 .contents .webgene-blog{
		gap: 20px;
	}
	.section04 .contents .webgene-blog .webgene-item{
		width: calc(100% / 3 - 40px / 3);
	}
	.section04 .contents .webgene-blog .webgene-item .img-box{
		padding: 10px;
		border-radius: 10px;
	}
	.section04 .contents .webgene-blog .webgene-item .img-box .rectangle-img{
		border-radius: 10px;
	}
	
	.section05{
		padding-bottom: 100px;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.fv{
		padding-right: 20px;
	}
	.fv .top-news .contents, .fv .top-news .contents .webgene-blog .webgene-item a{
		gap: 10px;
	}
	.fv .top-news .contents{
		height: 60px;
		padding-left: 0px;
		padding-right: 0px;
	}
	.fv .top-news .contents .swiper-container{
		max-width: 100%;
	}
	.fv .video-box .txt-box p{
		font-size: 9vw;
		padding-bottom: 12vw;
	}
	.fv .video-box .txt-box h1{
		font-size: 14px;
	}
	.fv .video-box{
		border-radius: 0 30px 0 30px;
	}
	.fv .img-box img:nth-of-type(1){
		width: 80%;
		border-radius: 30px 0 30px 0;
		transform: translateY(-25%);
		margin-left: auto;
		margin-right: 0;
	}
	.fv .img-box img:nth-of-type(2){
		width: 70%;
		border-radius: 0 30px 0 30px;
		transform: translateY(-40%);
	}
	
	.fv .img-box,.fv .img-box img{
		display: block;
	}
	
	.top-title1 p{
		font-size: 10vw;
	}
	.top-contents .img-box{width: 85%;margin-bottom: 0;}
	.section01 .img-box{
		margin-left: 15%;
	}
	.section02 .img-box{
		margin-right: 15%;
	}
	.section03 .top-title1{
		text-align: center;
		margin-bottom:0px;
		left: 0;
	}
	.section03 .top-title1{
	}
	.section03 .img-wrap .img-box{
		width: calc(50% - 20px / 2);
		position: relative;
	}
	.section03 .img-wrap .img-box p{
		top: 5%;
		padding: 3px 10px;
	}
	.section04 .top-title1{
		text-align: center;
		padding-bottom: 5vw;
	}
	.section04 .contents .webgene-blog{
		gap: 40px;
	}
	.section04 .contents .webgene-blog .webgene-item{
		width: 90%;
	}
	.section04 .contents .webgene-blog .webgene-item .img-box{
		padding: 10px;
		border-radius: 10px;
	}
	.section04 .contents .webgene-blog .webgene-item .img-box .rectangle-img{
		border-radius: 10px;
	}
	.section05{
		padding: 80px 20px;
	}
	.section05 .top-title1{
		position: static;
		top: 50px;
		left: 30px;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}