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

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

.section01{
	padding: 130px 0 0;
}
.section01 .en_title1{
	font-size: clamp(48px,6.25vw,90px);
	margin-bottom: 40px;
}

.section01 .vttl p{
	writing-mode: vertical-rl;
	font-size: 14px;
	letter-spacing: 0.2em;
	white-space: nowrap;
}
.section01 .txtbox{
	width: calc(544 / 1220 * 100%);
}
.section01 .txtbox .script{
	font-family: "Kaushan Script", "Sen", cursive;
	font-size: clamp(42px,5.28vw,76px);
	line-height: 1.1;
	margin-bottom: 20px;
}
.section01 .txtbox .default_title1{
	margin-bottom: 40px;
	color: #333;
}
.section01 .photo{
	width: calc(530 / 1220 * 100%);
	border: 2px solid #000;
	box-sizing: border-box;
}
.section01 .photo img{
	width: 100%;
	height: auto;
	display: block;
}

.section02{
	padding: 80px 0 0;
}
.section02 .sec_head .en_title2{
	font-size: clamp(22px,2.36vw,34px);
	margin-bottom: 5px;
}
.section02 .sec_head .default_title1{
	margin-bottom: 40px;
}
.section02 .steps{
	max-width: 1062px;
	margin: 0 auto;
}
.section02 .step{
	width: 190px;
}
.section02 .step .circle_box{
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: #333333;
	margin-bottom: 30px;
}
.section02 .step .num{
	font-family: "Sen", sans-serif;
	font-size: clamp(14px,2vw,18px);
	font-weight: 700;
	margin-bottom: 10px;
	color: #fff;
}
.section02 .step .ttl{
	font-size: clamp(18px,2.5vw,23px);
	font-weight: 700;
	margin-bottom: 16px;
	color: #fff;
}
.section02 .arrow{
	width: 21px;
	height: 16px;
	background-image: url("https://shintech2024.co.jp/system_panel/uploads/images/flow_arrow.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	margin-top: 0;
}

.section03{
	padding: 130px 0 0;
}
.section03 .en_title1{
	font-size: clamp(48px,6.25vw,90px);
	text-align: center;
	margin-bottom: 40px;
}
.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;
}

@media screen and (max-width: 768px){
	.section01{
		padding: 80px 0 0;
		flex-direction: column;
		gap: 24px;
	}
	/*
	.section01 .vttl{
		display: none;
	}
	*/
	.section01 .vttl p{
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
		font-size: 14px;
		letter-spacing: 0.2em;
		white-space: nowrap;
	}
	.section01 .txtbox,
	.section01 .photo{
		width: 100%;
	}
	.section01 .txtbox{
		margin-bottom: 50px;
	}
	.section01 .photo img{
		height: auto;
	}
	.section02 .steps{
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}
	.section02 .arrow{
		transform: rotate(90deg);
		margin: 0;
	}
	.works_list .webgene-item{
		width: 100%;
	}
}
@media screen and (max-width: 576px){
	.section02 .sec_head .default_title1{font-size: 20px;}
}