@charset "utf-8";
/* CSS Document */
.header{
	opacity: 0;
	transform: translateY(-50%);
	pointer-events: none!important;
	transition: ease 0.4s;
	-ms-filter: blur(6px);
	filter: blur(6px);
}
.header.on,.header.active{
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto!important;
	-ms-filter: blur(0px);
	filter: blur(0px);
}
body.on .fv{
	position: relative;
	height: 100vh;
	overflow: hidden;
}
@keyframes fvtxt {
	0% {
		opacity: 0;
		transform: translateX(50px);
		-ms-filter: blur(6px);
		filter: blur(6px);
	}
	100% {
		opacity:1;
		transform: translateX(0px);
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
}

.fv .swiper{
	z-index: 1;
	position: relative;
}

body:not(.gjs-dashed) .fv::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	opacity: 0.5;
	background: #000000;
	background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(32, 32, 32, 0.9) 30%, rgba(44, 44, 44, 0.2) 50%, rgba(61, 61, 61, 0.9) 70%, rgba(84, 84, 84, 1) 100%);
}

@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;
}
body.on .fv .swiper-slide img {
	display: block!important;
	opacity: 0;
	height: auto;
	width: 100%;
}

body.on .fv .txtbox{
	color: #fff;
	position: absolute;
	bottom: 10%;
	right: 10%;
	z-index: 9;
}
body.on .fv .txtbox h1,body.on .fv .txtbox p{
	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;
	animation-delay: 1s;
}
body.on .fv .txtbox p{
	animation-delay: 1.4s;
}

.fv .nav_box{
	position: absolute;
	z-index: 9;
	top: 15%;
	left: 5%;
	width: 30%;
	max-width: 300px;
}
.fv .nav_box p{
	color: #fff;
	font-size: clamp(14px,1.6vw,18px);
	font-weight: bold;
}
.fv .nav_box i{
	color: #fff;
	font-size: clamp(14px,1.6vw,18px);
}
.fv .nav_box .logo{
	width: 100%;
	margin-bottom: 40px;
}
.fv .nav_box .topbox{
	gap: 10px;
	align-items: stretch;
	margin-bottom: 30px;
}
.fv .nav_box .topbox a{
	width: calc(100% / 2 - 10px / 2);
	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: column;
	gap: 15px;
	border-radius: 2px;
	background-color: rgba(0,0,0,0.40);
	padding: 30px 0;
}
.fv .nav_box .topbox a img{
	width: 30px;
}
.fv .nav_box .bottombox{
	flex-direction: column;
	gap: 20px;
}
.fv .nav_box .bottombox > div,.fv .nav_box .bottombox > div a{
	width: 100%;
}
.fv .nav_box .bottombox > div a > div{
	gap: 15px;
}
.fv .nav_box .bottombox .mail_link a{
	border: 1px solid #fff;
	border-radius: 2px;
	padding: 15px;
}
.fv .nav_box .bottombox .mail_link a i{transition: ease 0.3s;}
.fv .nav_box .bottombox .mail_link a:hover i{transform: translateX(3px)}
.fv .nav_box .bottombox .tel_link a p{
	font-size: clamp(18px,2.2vw,24px);
}

.section01{
	position: relative;
}
.section01::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0.2;
	background-image: url("https://arai-mokuzai.com/system_panel/uploads/images/sectio01_bg.jpg");
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
}
.section01 > div{
	position: relative;
	z-index: 3;
}
.section01 .txtbox .titlebox{
	position: relative;
}
.section01 .txtbox .titlebox h2{
	position: relative;
	z-index: 2;
}
.section01 .txtbox .titlebox h2 span{
	font-size: clamp(24px,3.0vw,34px);
}
.section01 .txtbox .titlebox p{
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	color: #21335B;
	opacity: 0.1;
	font-size: clamp(38px,8.0vw,90px);
	font-weight: 500;
	line-height: 1;
	-ms-filter: blur(3px);
	filter: blur(3px);
}
.section01 .swiper-container{
	position: relative;
	overflow: hidden;
}
.section01 .swiper-container .swiper-wrapper{
	transition-timing-function: linear !important;
}
.section01 .swiper-container .swiper-wrapper .swiper-slide{
	opacity: 1;
}
body.gjs-dashed .section01 .swiper-container .swiper-wrapper .swiper-slide{
	width: 300px;
}


.section02 .contents .box{
	position: relative;
}
body.gjs-dashed .section02 .contents .box{
	background-color: #000;
}
.section02 .contents .box::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0.7;
	background: #000000;
	background: linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(31, 31, 31, 0.9) 40%, rgba(58, 58, 58, 0.4) 70%, rgba(84, 84, 84, 0.2) 100%);
}
.section02 .contents .box:nth-of-type(even)::after{
	background: #000000;
	background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(31, 31, 31, 0.9) 40%, rgba(58, 58, 58, 0.4) 70%, rgba(84, 84, 84, 0.2) 100%);
}
body.gjs-dashed .section02 .contents .box::after{display: none;}

.section02 .contents .box .txtbox{
	position: relative;
	z-index: 2;
	color: #fff;
	width: 45%;
	margin-left: 50%;
	max-width: 500px;
}
.section02 .contents .box:nth-of-type(even) .txtbox{
	margin-left: 5%;
}
.section02 .contents .box .txtbox .titlebox h2::first-letter{
	font-size: clamp(24px,3.4vw,40px);
}

.section03 .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: flex-start;
	flex-direction: row;
	gap: 10px;
}
.section03 .contents .webgene-blog .webgene-item{
	display: block;
	width: calc(100% / 4 - 30px / 4);
}
.section03 .contents .webgene-blog .webgene-item a{
	width: 100%;
	background-color: #fff;
	transition: ease 0.6s;
}
.section03 .contents .webgene-blog .webgene-item a:hover{
	opacity: 1;
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.section03 .contents .webgene-blog .webgene-item a .imgbox{
	position: relative;
	width: 100%;
	aspect-ratio: 1.6 / 1;
	overflow: hidden;
}
.section03 .contents .webgene-blog .webgene-item a .imgbox .cate{
	position: absolute;
	top: 0;
	left: 0;
	min-width: 150px;
	padding: 4px 15px;
	background-color: #fff;
	z-index: 2;
}
.section03 .contents .webgene-blog .webgene-item a .imgbox .img-tool{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%,-50%);
	transition: ease 0.8s;
}
.section03 .contents .webgene-blog .webgene-item a:hover .imgbox .img-tool{
	transform: translate(-50%,-50%) scale(1.1);
}
.section03 .contents .webgene-blog .webgene-item a .txtbox{
	width: 100%;
	padding: 15px;
}
.section03 .contents .webgene-blog .webgene-item a .txtbox h3{
	margin-bottom: 10px;
}

.section04{
	background-color: #5D646E;
}
.section04 .title_item1 .en,.section04 .title_item1 .title,.section04 .webgene-blog .webgene-item a p,.section04 .webgene-blog .webgene-item a h3{
	color: #fff;
}
.section04 .webgene-blog{
	display: block;
	max-width: 100%;
}
.section04 .webgene-blog .webgene-item{
	width: 100%;
}
.section04 .webgene-blog .webgene-item:not(:last-of-type){
	margin-bottom: 30px;
}
.section04 .webgene-blog .webgene-item a{
	display: block;
	box-shadow: none;
}
.section04 .webgene-blog .webgene-item a > div{
	width: 100%;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 15px;
}
.section04 .webgene-blog .webgene-item a .date{
	width: 90px;
}
.section04 .webgene-blog .webgene-item a .cate{
	width: 100px;
	justify-content: center;
	display: flex;
	padding: 3px 15px;
	border-radius: 200px;
	border: 1px solid #fff;
}
.section04 .webgene-blog .webgene-item a h3{
	max-width: calc(100% - 220px);
}

.section05 .title_item1 i{
	font-size: clamp(25px,5.0vw,50px);
	color: #21335B;
}
.section05 .title_item1 .en{letter-spacing: 0.2rem;}
.section05 .swiper-container{
	position: relative;
	overflow: hidden;
}
.section05 .swiper-container .swiper-wrapper{
	transition-timing-function: linear !important;
}
.section05 .swiper-container .swiper-wrapper .swiper-slide{
	opacity: 1;
}
body.gjs-dashed .section05 .swiper-container .swiper-wrapper .swiper-slide{width: 25%;display: inline-block;}

.section05 .swiper-container .swiper-wrapper .swiper-slide a{
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.section03 .contents .webgene-blog{
		gap: 20px;
	}
	.section03 .contents .webgene-blog .webgene-item{
		display: block;
		width: calc(100% / 2 - 20px / 2);
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.section02 .contents .box .txtbox{
		width: 55%;
		margin-left: 45%;
	}
	.section04 .webgene-blog .webgene-item a > div{
		flex-wrap: wrap;
	}
	.section02 .contents .box:nth-of-type(even) .txtbox{
		margin-left: 0;
	}
	.section04 .webgene-blog .webgene-item a h3{
		width: 100%;
		max-width: 100%;
	}
	.section04 .webgene-blog .webgene-item a .date{
		width: 70px;
	}
}
/* ---------- 767px ~ ---------- */
@media screen and (max-width: 767px){
	.fv .nav_box{
		display: none;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.header{
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto!important;
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
	body.on .fv .txtbox{
		right: 5%;
		bottom: 25%;
		width: 90%;
	}
	.section01 .txtbox > p{
		text-align: left;
		padding: 0 0px;
	}
	.section02 .contents .box .txtbox{
		width: 100%;
		margin-left: 0;
	}
	.section02 .contents .box:nth-of-type(even) .txtbox{
		margin-left: 0;
	}
	.section02 .contents .box::after{
		opacity: 0.8;
		background: #000000;
		background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(31, 31, 31, 0.9) 40%, rgba(58, 58, 58, 0.8) 70%, rgba(84, 84, 84, 0.7) 100%);
	}
	.section02 .contents .box:nth-of-type(even)::after{
		background: #000000;
		background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(31, 31, 31, 0.9) 40%, rgba(58, 58, 58, 0.8) 70%, rgba(84, 84, 84, 0.7) 100%);
	}
	.section03 .contents .webgene-blog{
		gap: 20px;
	}
	.section03 .contents .webgene-blog .webgene-item{
		display: block;
		width: 100%;
	}
  .section01 .txtbox .titlebox h2 span{
    display: inline-block;
  }
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}