@charset "utf-8";
/* CSS Document */
.fv .swiper-container .swiper-wrapper .swiper-slide{
	opacity: 1;
}
.fv .swiper-pagination-bullet{
	opacity: 1;
}
.fv .swiper-pagination-bullets{
	position: static;
	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;
	padding-top: 50px;
	gap: 5px;
	opacity: 1;
}
.fv .swiper-pagination-bullet{
	width: 50px;
	height: 4px;
	background-color: #909090;
	border-radius: 0;
}
.fv .swiper-pagination-bullet-active{
	background-color: #F25122;
}

.fv{
	position: relative;
	overflow: hidden;
	margin-top: 100px;
	padding: 100px 50px;
}
.fv .swiper-container{
	position: relative;
	width: 80%;
	max-width: 1000px;
	margin: 0 auto;
}
.fv .swiper-container .swiper-wrapper{
	position: relative;
}
.fv .swiper-container .swiper-wrapper .swiper-slide{
	position: relative;
	opacity: 1;
	overflow: hidden;
}


.section01 .boxwrap .box{
	position: relative;
	width: calc(100% / 3);
	flex-direction: column;
	gap: 15px;
	padding: 40px 20px;
	border: 1px solid #B2B2B2;
	border-left: none;
}
.section01 .boxwrap .box:nth-of-type(2){
	animation-delay: 0.2s;
}
.section01 .boxwrap .box:last-of-type{
	border-right: none;
	animation-delay: 0.4s;
}
.section01 .boxwrap .box .num{
	position: absolute;
	top: 0;
	left: 0;
	width: 110px;
	height: 110px;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 15px;
}
.section01 .boxwrap .box .num::after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 110px;
	height: 110px;
	background-color: #0E0E0F;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
	transform: rotate(-90deg);
	z-index: 1;
}
.section01 .boxwrap .box .num p{
	font-family: "Outfit",  sans-serif;
	font-size: 38px;
	line-height: 1;
	color: #fff;
	position: relative;
	z-index: 2;
}
.section01 .boxwrap .box .num p::before{
	content: "#";
	font-family: "Outfit",  sans-serif;
font-size: 30px;
}
.section01 .boxwrap .box .imgbox{
	max-width: 200px;
}
.section01 .more_d > div{min-width: 100%;}

.section02{
	background-color: #F35122;
}
.section02 p,.section02 h2,.section02 h3{
	color: #fff;
}
.section02 .title-style1 .en_title{
	color: rgba(255, 255, 255, 0.2);
}
.top_boxwrap1 .box{
	width: calc(100% / 5);
	padding: 0 20px;
	gap: 15px;
	flex-direction: column;
	justify-content: flex-start;
	border-right: 2px dotted #FFFFFF;
}
.top_boxwrap1 .box:nth-of-type(2){animation-delay: 0.1s;}
.top_boxwrap1 .box:nth-of-type(3){animation-delay: 0.2s;}
.top_boxwrap1 .box:nth-of-type(4){animation-delay: 0.3s;}
.top_boxwrap1 .box:nth-of-type(5){animation-delay: 0.4s;}
.top_boxwrap1 .box:last-of-type{
	border-right: none;
}
.top_boxwrap1 .box .imgbox,.top_boxwrap1 .box h3,.top_boxwrap1 .box p{
	transition: ease 0.3s;
}
.top_boxwrap1 .box:hover .imgbox,.top_boxwrap1 .box:hover h3,.top_boxwrap1 .box:hover p{
	opacity: 0.5;
}
.top_boxwrap1 .box .price{
	gap: 5px;
}
.top_boxwrap1 .box .price p{
	line-height: 1;
}
.section03{
	background-color: #F2F2F2;
}
.section03 .top_boxwrap1 .box{
	border-color: #B2B2B2;
}

.section04 .boxwrap{
	gap: 30px;
}
.section04 .boxwrap .box{
	width: calc(100% / 4 - 90px / 4);
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	gap: 15px;
}
.section04 .boxwrap .box:nth-of-type(2){
	animation-delay: 0.1s;
}
.section04 .boxwrap .box:nth-of-type(3){
	animation-delay: 0.2s;
}
.section04 .boxwrap .box:nth-of-type(4){
	animation-delay: 0.3s;
}
.section04 .boxwrap .box .date{
	color: #B7B7B7
}

.section05{
	position: relative;
}
.section05::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #1B2024;
	opacity: 0.6;
	mix-blend-mode: multiply;
}
.section05 .contents{
	position: relative;
	z-index: 3;
}
.section05 .contents::before,.section05 .contents::after{
	content: "";
	display: block;
	position: absolute;
	width: 200px;
	height: 200px;
	background-color: #F35122;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
	z-index: 1;
	opacity: 0.5;
}
.section05 .contents::before{
	top: 0;
	left: 0;
	transform: rotate(-90deg);
}
.section05 .contents::after{
	bottom: 0;
	right: 0;
	transform: rotate(90deg);
}
.section05 .contents h3 span{
	position: relative;
}
.section05 .contents h3 span::after{
	position: absolute;
	color: #fff;
	bottom: 100%;
	left: 0;
	line-height: 1;
	font-weight: 200;
}
.section05 .contents h3 span:nth-of-type(1)::after{
	content: "・・・・";
}
.section05 .contents h3 span:nth-of-type(2)::after{
	content: "・・";
}
.section05 .itemimg{
	position: absolute;
	top: 50%;
	right: 10%;
	width: 25%;
	z-index: 2;
}

.section06 .titlebox{
	align-items: flex-start;
	gap: 30px;
}
.section06 .titlebox .en_title,.company_info .title .en_title{
	font-size: clamp(32px,5vw,56px);
	color: #F25121;
}
.section06 .titlebox{
    width: 30%;
}
.section06 .contents{
    width: 70%;
}
.section06 .contents .webgene-blog .webgene-item a{
	padding: 15px 0;
	border-bottom: 1px solid #B2B2B2;
}
.section06 .contents .webgene-blog .webgene-item a .date{
	color: #B7B7B7;
}
.section06 .contents .webgene-blog .webgene-item a .cate{
	color: #F25121;
	border: 1px solid #F25121;
	padding: 0 5px;
}

.company_info{
	position: relative;
	background-color: #2B2B2B;
	background-image: url("https://3bee.co.jp/system_panel/uploads/images/top8.png");
}
.company_info::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: #2B2B2B;
	opacity: 0.2;
	mix-blend-mode: multiply;
}
.company_info > div{
	position: relative;
	z-index: 3;
}
.company_info .contents{
	align-items: stretch;
	justify-content: space-between;
}
.company_info .img1{
	width: 35%;
}
.company_info .img2{
	width: 25%;
	align-items: flex-end;
}
.company_info .txtbox{
	max-width: 40%;
	flex-direction: column;
	align-items: flex-start;
}
.company_info .txtbox .boxwrap{
	align-items: flex-start;
	gap: 15px;
	width: 100%;
}
.company_info .txtbox .boxwrap .more_d{
	width: 100%;
	max-width: 300px;
}
.company_info .txtbox .boxwrap .more_d a{
	display: block;
	border-bottom: 1px solid #fff;
	padding-bottom: 15px;
	width: 100%;
}
.company_info .txtbox .boxwrap .more_d a p{
	color: #fff;
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.fv .swiper-pagination-bullet{
		width: 40px;
		height: 4px;
	}
	.section05 .itemimg{
		top: 50%;
		right: 0;
		width: 30%;
		z-index: 2;
	}
	.company_info .img1{
		width: 30%;
	}
	.company_info .img2{
		width: 25%;
	}
	.company_info .txtbox{
		max-width: 40%;
	}
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.top_boxwrap1{
		gap: 50px 0;
	}
	.top_boxwrap1 .box{
		width: calc(100% / 3);
		padding: 0 20px;
		gap: 15px;
	}
	.top_boxwrap1 .box:nth-of-type(3){border-right: none;}
	.top_boxwrap1 .box:nth-of-type(2){animation-delay: 0.1s;}
	.top_boxwrap1 .box:nth-of-type(3){animation-delay: 0.2s;}
	.top_boxwrap1 .box:nth-of-type(4){animation-delay: 0s;}
	.top_boxwrap1 .box:nth-of-type(5){animation-delay: 0.1s;}
	
	.section04 .boxwrap{
		gap: 50px;
	}
	.section04 .boxwrap .box{
		width: calc(100% / 2 - 50px / 2);
		gap: 15px;
	}
	.section04 .boxwrap .box:nth-of-type(2){
		animation-delay: 0.1s;
	}
	.section04 .boxwrap .box:nth-of-type(3){
		animation-delay: 0s;
	}
	.section04 .boxwrap .box:nth-of-type(4){
		animation-delay: 0.1s;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.fv .swiper-pagination-bullets{
		padding-top: 40px;
	}
	.fv .swiper-pagination-bullet{
		width: 30px;
		height: 3px;
	}
	.section01 .boxwrap .box{
		padding: 30px 20px;
	}
	.section01 .boxwrap .box .num{
		width: 90px;
		height: 90px;
		padding: 10px;
	}
	.section01 .boxwrap .box .num::after{
		width: 90px;
		height: 90px;
	}
	.section01 .boxwrap .box .num p{
		font-size: 30px;
	}
	.section01 .boxwrap .box .num p::before{
		font-size: 24px;
	}
	.section04 .boxwrap{
		gap: 40px;
	}
	.section04 .boxwrap .box{
		width: calc(100% / 2 - 40px / 2);
		gap: 15px;
	}

	.section05 .itemimg{
		top: 60%;
		right: 0;
		width: 35%;
		z-index: 2;
	}
	.section05 .contents .title h3{
		font-size: 22px;
	}
	.section05 .itemimg{
		top: 80%;
		width: 40%;
	}
	.section06 .titlebox{
		width: 100%;
	}
	.section06 .contents{
		width: 100%;
	}
	.section06 .news_list .titlebox{
		align-items: center;
		text-align: center;
	}
	.company_info .img1{
		width: 30%;
	}
	.company_info .img2{
		width: 22%;
	}
	.company_info .txtbox{
		max-width: 40%;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.fv{
		padding: 50px 20px;
		margin-top: 50px;
	}
	.fv .swiper-container{
		width: 100%;
	}
	.fv .swiper-pagination-bullets{
		padding-top: 20px;
		gap: 3px;
	}
	.fv .swiper-pagination-bullet{
		width: 20px;
		height: 3px;
	}
	.section01 .boxwrap .box{
		width: 100%;
		padding: 30px 20px;
		border-left: none;
		border-right: none;
	}
	.section01 .boxwrap .box:nth-of-type(2){
		animation-delay: 0s;
		border-top: none;
	}
	.section01 .boxwrap .box:last-of-type{
		border-right: none;
		border-top: none;
		animation-delay: 0s;
	}
	.top_boxwrap1 .box{
		width: calc(100% / 2);
		padding: 0 15px;
		gap: 15px;
	}
	.top_boxwrap1 .box:nth-of-type(3){border-right: 2px dotted #FFFFFF;}
	.section03 .top_boxwrap1 .box:nth-of-type(3){border-right: 2px dotted #B2B2B2;}
	.top_boxwrap1 .box:nth-of-type(odd){padding-left: 0;}
	.top_boxwrap1 .box:nth-of-type(even){border-right: none;padding-right: 0;}
	.top_boxwrap1 .box:nth-of-type(2){animation-delay: 0.1s;}
	.top_boxwrap1 .box:nth-of-type(3){animation-delay: 0s;}
	.top_boxwrap1 .box:nth-of-type(4){animation-delay: 0.1s;}
	.top_boxwrap1 .box:nth-of-type(5){animation-delay: 0s;padding: 0 7.5px;}
	
	.section04 .boxwrap{
		gap: 40px;
	}
	.section04 .boxwrap .box{
		width: 100%;
		gap: 15px;
	}
	.section04 .boxwrap .box:nth-of-type(2){
		animation-delay: 0s;
	}
	.section04 .boxwrap .box:nth-of-type(3){
		animation-delay: 0s;
	}
	.section04 .boxwrap .box:nth-of-type(4){
		animation-delay: 0s;
	}
	.company_info .txtbox .title{
		text-align: center;
	}
	.company_info .img1{
		width: 45%;
		order: 2;
	}
	.company_info .img2{
		width: 35%;
		order: 3;
	}
	.company_info .txtbox{
		width: 100%;
		max-width: 100%;
		order: 1;
		justify-content: center;
		align-items: center;
		margin-bottom: 30px;
	}
	.company_info .txtbox .boxwrap{
		align-items: center;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}