@charset "utf-8";
/* CSS Document */
.loading_box{
	background-color: #000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999999999;
	overflow: hidden;
}
.loading_box video{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fv {
	position: relative;
	width: 100%;
	height: clamp(620px, 85svh, 820px);
	overflow: hidden;
}
.fv .contents {
	position: relative;
	width: 100%;
	height: 100%;
}

.fv .contents .imgbox {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.fv .contents .imgbox > img {
	position: absolute;
	display: block;
	object-fit: cover;
}

.fv .contents .imgbox > img:nth-of-type(1) {
	top: clamp(105px, 12vh, 145px);
	left: 0;
	width: clamp(150px, 15.5vw, 300px);
	height: clamp(210px, 22vw, 425px);
	object-position: center center;
}

.fv .contents .imgbox > img:nth-of-type(2) {
	top: clamp(190px, 22vh, 260px);
	right: 0;
	width: clamp(180px, 17.5vw, 340px);
	height: clamp(240px, 24vw, 465px);
	object-position: center center;
}

.fv .contents .imgbox > img:nth-of-type(3) {
	right: clamp(180px, 18vw, 350px);
	bottom: clamp(30px, 5vh, 65px);
	width: clamp(120px, 11.5vw, 220px);
	height: clamp(135px, 13vw, 250px);
	object-position: center center;
}
.fv .contents .imgbox .logobox {
	position: absolute;
	top: clamp(105px, 14vh, 165px);
	left: 39%;
	width: clamp(330px, 35vw, 670px);
	align-items: center;
	justify-content: flex-start;
	gap: clamp(24px, 2.5vw, 48px);
}

.fv .contents .imgbox .logobox img:first-of-type {
	width: 72%;
	height: auto;
	object-fit: contain;
	animation-name: logobox1;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	opacity:0;
	transform: translate(50px,50px);
	-ms-filter: blur(6px);
	filter: blur(6px);
	animation-delay: 7.8s;
}

.fv .contents .imgbox .logobox img:last-of-type {
	width: 13%;
	height: auto;
	object-fit: contain;
	flex-shrink: 0;
	animation-name: logobox2;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	opacity:0;
	transform: translateY(50px);
	-ms-filter: blur(6px);
	filter: blur(6px);
	animation-delay: 8.8s;
}

@keyframes logobox1 {
	0% {
		opacity:0;
		transform: translate(50px,50px);
		-ms-filter: blur(6px);
		filter: blur(6px);
	}
	100% {
		opacity:1;
		transform: translate(0px,0px);
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
}
@keyframes logobox2 {
	0% {
		opacity:0;
		transform: translateY(50px);
		-ms-filter: blur(6px);
		filter: blur(6px);
	}
	100% {
		opacity:1;
		transform: translateY(0px);
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
}

.fv .contents .txtbox {
	position: absolute;
	z-index: 5;
	right: auto;
	bottom: 0;
	left: clamp(80px, 9vw, 150px);
	width: min(70%, 1100px);
	gap: 10px;
	flex-direction: column;
	align-items: flex-start;
}

/* ---------- cate1 ---------- */
.box_wrap{
	max-width: 1440px;
	margin: 0 auto;
}
.cate1 .box_wrap{
	gap: 60px;
}
.cate1 .box_wrap .leftbox{
	width: calc(50% - 30px);
	margin-bottom: auto;
}
.cate1 .box_wrap .rightbox{
	width: calc(50% - 30px);
	align-items: flex-start;
}
/* ---------- cate2 ---------- */
.cate2 {
	padding-left: 0;
}
.cate2 .box_wrap{
	gap: 100px;
	max-width: 1280px;
	margin-right: auto;
	margin-left: 0;
}
.cate2 .box_wrap .leftbox{
	width: calc(50% - 50px);
	margin-bottom: auto;
}
.cate2 .box_wrap .rightbox{
	width: calc(50% - 50px);
	align-items: flex-start;
}
.cate2 .box_wrap .rightbox .boxitem{
	align-items: flex-start;
	width: 100%;
}
.cate2 .box_wrap .rightbox .boxitem p,
.cate2 .box_wrap .rightbox .boxitem h3{
	padding-bottom: 40px;
	border-bottom: #707070 1px solid;
	width: 100%;
}
.cate2 .box_wrap .rightbox .boxitem p span{
	font-family: "Cardo",  sans-serif;
}
/* ---------- cate3 ---------- */
.cate3 {
	position: relative;
	overflow: hidden;
}
.cate3 > .deco1 {
	position: absolute;
	top: clamp(40px, 5vw, 80px);
	right: clamp(30px, 6vw, 100px);
	z-index: 1;
	width: clamp(100px, 10vw, 160px);
	height: auto;
	pointer-events: none;
}
.cate3 .box_wrap{
	gap: 80px;
}
.cate3 .box_wrap .boxitem{
	width: calc(50% - 40px);
	align-items: flex-start;
}
.cate3 .box_wrap .boxitem:nth-of-type(2) {
	margin-top: clamp(50px, 7vw, 100px);
}
.cate3 .box_wrap .boxitem .box{
	flex-direction: column;
}
.cate3 .box_wrap .boxitem .box .txtbox{
	background-color: #333333;
	padding: 50px;
	align-items: flex-start;
}
/* ---------- cate4 ---------- */
.cate4 {
	padding-right: 0;
}
.cate4 .box_wrap{
	gap: 100px;
	max-width: 1280px;
	margin-left: auto;
	margin-right: 0;
}
.cate4 .box_wrap .leftbox{
	width: calc(50% - 50px);
	margin-bottom: auto;
}
.cate4 .box_wrap .rightbox{
	width: calc(50% - 50px);
	align-items: flex-start;
}
.cate4 .box_wrap .rightbox .boxitem{
	align-items: flex-start;
	width: 100%;
}
.cate4 .box_wrap .rightbox .boxitem a{
	padding-bottom: 40px;
	border-bottom: #707070 1px solid;
	width: 100%;
}
.cate4 .box_wrap .rightbox .boxitem a .flex{
	justify-content: space-between;
	width: 100%;
}
.cate4 .box_wrap .rightbox .boxitem a .icon{
	width: 26px;
	aspect-ratio: 1 / 1;
	background-color: #2E2F2A;
	border-radius: 50%;
	transition: ease 0.3s;
	align-items: center;
	justify-content: center;
}
.cate4 .box_wrap .rightbox .boxitem a:hover .icon{
	transform: translateX(3px);
}
.cate4 .box_wrap .rightbox .boxitem a .icon img{
	width: 5px;
}
/* ---------- sns_a ---------- */
.sns_a .title{
    flex-direction: column;
	gap: 10px;
}
.sns_a .title img{
    width: 30px;
	height: 30px;
}
.sns_a .title p{
    font-weight: 400;
}
.sns_a .box_wrap > .webgene-blog{
    display: contents;
}
.sns_a .box_wrap .webgene-item{
    width: calc((100% - 40px) / 5);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    border-radius: 0px;
}
.sns_a .box_wrap .webgene-item > a,
.sns_a .box_wrap .webgene-item > a > img{
    display: block;
    width: 100%;
    height: 100%;
}
.sns_a .box_wrap .webgene-item > a > img{
    object-fit: cover;
    object-position: center;
}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.fv {
		height: clamp(620px, 90svh, 800px);
	}

	.fv .contents .imgbox > img:nth-of-type(1) {
		top: 105px;
		width: clamp(150px, 15vw, 230px);
		height: clamp(210px, 21vw, 325px);
	}

	.fv .contents .imgbox > img:nth-of-type(2) {
		top: clamp(180px, 20vh, 220px);
		width: clamp(180px, 17vw, 260px);
		height: clamp(245px, 23vw, 355px);
	}

	.fv .contents .imgbox > img:nth-of-type(3) {
		right: clamp(175px, 18vw, 275px);
		bottom: clamp(45px, 6vh, 70px);
		width: clamp(120px, 11vw, 170px);
		height: clamp(135px, 12.5vw, 195px);
	}

	.fv .contents .imgbox .logobox {
		top: clamp(110px, 14vh, 145px);
		left: 37%;
		width: clamp(380px, 39vw, 500px);
		gap: clamp(20px, 2vw, 30px);
	}

	.fv .contents .imgbox .logobox img:first-of-type {
		width: 72%;
	}

	.fv .contents .imgbox .logobox img:last-of-type {
		width: 12%;
	}

	.fv .contents .txtbox {
		left: clamp(85px, 9vw, 115px);
		bottom: clamp(65px, 9vh, 95px);
		width: min(68%, 850px);
	}
	.fv .sc_icon {
		width: 7%;
	}
	.cate3 .box_wrap {
		gap: 60px;
	}
	.cate3 .box_wrap .boxitem {
		width: calc(50% - 30px);
	}
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){

	.fv .contents .imgbox > img:nth-of-type(2) {
		top: 300px;
	}
	.fv .contents .imgbox > img:nth-of-type(3) {
		left: 100px;
		top: 400px;
	}
	.cate1 .box_wrap {
		gap: 40px;
	}
	.cate1 .box_wrap .leftbox,
	.cate1 .box_wrap .rightbox{
		width: calc(50% - 20px);
	}
	.cate2 .box_wrap {
		gap: 60px;
	}
	.cate2 .box_wrap .leftbox,
	.cate2 .box_wrap .rightbox{
		width: calc(50% - 30px);
	}
	.cate3 .box_wrap {
		flex-direction: column;
	}
	.cate3 .box_wrap .boxitem {
		width: 70%;
	}
	.cate3 .box_wrap .boxitem:nth-of-type(2) {
		margin-top: 0;
	}
	.cate4 .box_wrap {
		gap: 60px;
	}
	.cate4 .box_wrap .leftbox,
	.cate4 .box_wrap .rightbox{
		width: calc(50% - 30px);
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){

    .fv .contents .imgbox .logobox {
        top: clamp(110px, 14vh, 145px);
        left: 30%;
        width: clamp(200px, 44vw, 500px);
        gap: clamp(20px, 2vw, 30px);
    }

	.fv .contents .txtbox {
		right: 50px;
		left: 50px;
		width: auto;
		max-width: none;
	}
	.cate1 .box_wrap {
		flex-direction: column;
	}
	.cate1 .box_wrap .leftbox,
	.cate1 .box_wrap .rightbox{
		width:  90%;
	}
	.cate2 {
		padding-left: 50px;
	}
	.cate2 .box_wrap{
		margin-left: auto;
	}
	.cate2 .box_wrap {
		flex-direction: column;
		gap: 40px;
	}
	.cate2 .box_wrap .leftbox,
	.cate2 .box_wrap .rightbox{
		width:  90%;
	}
	.cate3 .box_wrap .boxitem {
		width: 90%;
	}
	.cate3 .box_wrap .boxitem .box .txtbox {
		padding: 30px;
	}
	.cate4 {
		padding-right: 50px;
	}
	.cate4 .box_wrap{
		margin-left: auto;
	}
	.cate4 .box_wrap {
		flex-direction: column-reverse;
		gap: 40px;
	}
	.cate4 .box_wrap .leftbox,
	.cate4 .box_wrap .rightbox{
		width:  90%;
	}
	.sns_a .box_wrap .webgene-item {
		width: calc((100% - 40px) / 3);
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.fv {
		height: clamp(840px, 220vw, 920px);
	}

	.fv .contents .imgbox .logobox {
		top: 75px;
		left: 50%;
		width: min(78%, 300px);
		gap: 12px;
		transform: translateX(-50%);
	}

	.fv .contents .imgbox .logobox img:first-of-type {
		width: 75%;
	}

	.fv .contents .imgbox .logobox img:last-of-type {
		width: 13%;
	}

	.fv .contents .imgbox > img:nth-of-type(1) {
		top: 285px;
		left: 0;
		width: 80px;
		height: 120px;
	}

	.fv .contents .imgbox > img:nth-of-type(2) {
		top: 335px;
		right: 0;
		width: 90px;
		height: 135px;
	}

	.fv .contents .imgbox > img:nth-of-type(3) {
		display: block;
		top: 430px;
		right: auto;
		bottom: auto;
		left: 50%;
		width: 70px;
		height: 85px;
		transform: translateX(-50%);
	}

	.fv .contents .txtbox {
		top: 555px;
		right: 20px;
		bottom: auto;
		left: 30px;
		width: auto;
		gap: 10px;
	}
	.cate1 .box_wrap .leftbox,
	.cate1 .box_wrap .rightbox{
		width:  100%;
	}
	.cate2 {
		padding-left: 20px;
	}
	.cate2 .box_wrap .leftbox,
	.cate2 .box_wrap .rightbox{
		width:  100%;
	}
	.cate2 .box_wrap .rightbox .boxitem p, .cate2 .box_wrap .rightbox .boxitem h3 {
		padding-bottom: 30px;
	}
	.cate3 .box_wrap .boxitem {
		width: 100%;
	}
	.cate3 .box_wrap .boxitem .box .txtbox {
		padding: 30px 20px;
	}
	.cate4 {
		padding-right: 20px;
	}
	.cate4 .box_wrap .leftbox,
	.cate4 .box_wrap .rightbox{
		width:  100%;
	}
	.cate4 .box_wrap .rightbox .boxitem a {
		padding-bottom: 30px;
	}
	.sns_a .box_wrap .webgene-item {
		width: calc((100% - 40px) / 2);
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}
.fv .contents .imgbox .logobox img:first-of-type {
	animation-delay: 0.2s;
	animation-duration: 1.2s;
}

.fv .contents .imgbox .logobox img:last-of-type {
	animation-delay: 0.5s;
	animation-duration: 1.2s;
}

/* 初回は動画が終わるタイミングに合わせる */
body.first-loading .fv .contents .imgbox .logobox img:first-of-type {
	animation-delay: 7.8s;
}

body.first-loading .fv .contents .imgbox .logobox img:last-of-type {
	animation-delay: 8.8s;
}