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

body .page_hero .hero_img{
	background-position: 50% 40%;
}
.page_hero .hero_img .bg_img{
	object-position: 50% 40%;
}

.section01{
	padding: 100px 0 0;
}
.section01 .tabs{
	max-width: 735px;
	margin: 0 auto;
	gap: 10px;
}
.section01 .tabs a{
	flex: 1;
	background-color: #242424;
	padding: 14px 10px;
	text-align: center;
}
.section01 .tabs a:hover{
	opacity: 1;
	background-color: #000;
}
.section01 .tabs a p{
	color: #f2f1e6;
	font-size: clamp(12px,1.04vw,15px);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.section02,
.section03,
.section04{
	padding: 80px 0 0;
}
.sec_head{
	border-bottom: 13px solid #000;
	padding-bottom: 20px;
	margin-bottom: 50px;
}
.sec_head .en_title2{
	font-size: 18px;
	margin-bottom: 5px;
}
.sec_head .default_title1{
	font-size: clamp(26px,3.33vw,48px);
	color: #000;
}
.lead{
	padding-bottom: 50px;
}

.feat{
	margin-bottom: 60px;
}
.feat .photo{
	width: calc(570 / 1220 * 100%);
	border: 2px solid #000;
	box-sizing: border-box;
}
.feat .photo img{
	width: 100%;
	height: auto;
	display: block;
}
.feat .txtbox{
	width: calc(560 / 1220 * 100%);
}
.feat .txtbox .default_title1{
	margin-bottom: 30px;
	color: #000;
}
.feat .box{
	margin-top: 30px;
	background-color: #e7e7e7;
	padding: 20px;
}
.feat .box .ttl{
	font-size: 18px;
	font-weight: 700;
	color: #333;
	margin-bottom: 10px;
}
.feat .tags{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.feat .tags p{
	border: 1px solid #adadad;
	padding: 5px 10px;
	font-size: 15px;
	font-weight: 500;
	color: #333;
}

.works_head .en_title1{
	font-size: clamp(48px,6.25vw,90px);
	margin: 40px 0 30px;
}
.works_list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px calc(30 / 1220 * 100%);
}
.works_list .webgene-item{
	width: calc((100% - 2 * (30 / 1220 * 100%)) / 3);
}
.works_list .webgene-item a{
	width: 100%;
}
.works_list .webgene-item a:hover{
	opacity: 1;
}
.works_list .webgene-item .imgbox{
	aspect-ratio: 1 / 1;
	border: 2px solid #000;
	box-sizing: border-box;
}
.works_list .webgene-item img{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.works_list .webgene-item h3{
	margin-top: 15px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	color: #333;
}

.section05{
	margin-top: 130px;
}

@media screen and (max-width: 768px){
	.section01 .tabs{
		flex-wrap: wrap;
	}
	.section01 .tabs a{
		flex: auto;
		width: 100%;
	}
	.feat{
		flex-direction: column !important;
		gap: 24px;
	}
	.feat .photo,
	.feat .txtbox{
		width: 100%;
	}
	.feat .photo img{
		height: auto;
	}
	.works_list .webgene-item{
		width: 100%;
	}
}