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

/* ---------- FV ---------- */
.fv{
	position: relative;
	width: 100%;
	height: calc(790 / 1440 * 100vw);
	max-height: 100vh;
	padding: calc(18 / 1440 * 100vw);
	box-sizing: border-box;
	background-color: #f0f0ef;
	overflow: hidden;
}
.fv .fv_img{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.fv .fv_img .swiper-wrapper,
.fv .fv_img .swiper-slide{
	width: 100%;
	height: 100%;
}
.fv .fv_img .swiper-slide{
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.fv .fv_img .swiper-slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.fv .fv_img::after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.2);
	pointer-events: none;
	z-index: 2;
}
.fv .logo{
	position: fixed;
	left: calc(40 / 1440 * 100vw);
	top: calc(38 / 1440 * 100vw);
	width: calc(129 / 1440 * 100vw);
	max-width: 172px;
	z-index: 9;
}
.fv .logo img{
	width: 100%;
	height: auto;
	display: block;
}
.fv .logo::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("https://shintech2024.co.jp/system_panel/uploads/images/logo.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 0;
	transition: ease 0.4s;
}
.fv.active .logo{
	max-width: 140px;
}
.fv.active .logo img{
	opacity: 0;
}
.fv.active .logo::after{
	opacity: 1;
}

.fv .fv_ttl{
	position: absolute;
	left: 50%;
	top: calc(144 / 1440 * 100vw);
	transform: translateX(-50%);
	z-index: 3;
	width: calc(802 / 1440 * 100vw);
	max-width: 804px;
}
.fv .fv_ttl img{
	width: 100%;
	height: auto;
	display: block;
}
.fv .fv_copy{
	position: absolute;
	left: 50%;
	top: calc(320 / 1440 * 100vw);
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	align-items: flex-start;
	gap: 11px;
}
.fv .fv_copy .col{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.fv .fv_copy .col1{
	margin-top: 19px;
}
.fv .fv_copy .col p{
	writing-mode: vertical-rl;
	font-weight: 700;
	font-size: clamp(22px,2.71vw,39px);
	line-height: 1.23;
	color: #f2f1e6;
	letter-spacing: 0.12em;
}
.fv .fv_copy .col .mark{
	width: 13px;
	height: 13px;
	margin-top: 8px;
}
.fv .fv_nav{
	position: absolute;
	left: calc(60 / 1440 * 100vw);
	bottom: calc(58 / 1440 * 100vw);
	z-index: 3;
	padding-left: 20px;
	border-left: 3px solid #ededed;
}
.fv .fv_nav a{
	display: block;
	margin-bottom: 5px;
}
.fv .fv_nav a:last-of-type{
	margin-bottom: 0;
}
.fv .fv_nav a p{
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.11em;
	color: #e5e5e5;
	line-height: 1.45;
}
body.gjs-dashed .fv,body.gjs-dashed .fv .fv_img,body.gjs-dashed .fv .fv_img .swiper-wrapper,body.gjs-dashed .fv .fv_img .swiper-slide,body.gjs-dashed .fv .fv_img .swiper-slide img{
	height: auto!important;
	max-height: none;
}
body.gjs-dashed　.fv .fv_img::after{display: none}

/* ---------- About ---------- */
.section01{
	padding: 130px 0;
}
.section01 .vttl{
	width: 28px;
	padding-top: 10px;
	flex-shrink: 0;
}
.section01 .vttl p{
	writing-mode: vertical-rl;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: 0.12em;
	color: #000;
}
.section01 .txtbox{
	width: calc(544 / 1220 * 100%);
}
.section01 .txtbox .en_title1{
	font-size: clamp(48px,6.25vw,90px);
	margin-bottom: 20px;
}
.section01 .txtbox .default_title1{
	margin-bottom: 40px;
}
.section01 .txtbox .default_txt1{
	margin-bottom: 1.7em;
}
.section01 .txtbox .more{
	margin-top: 10px;
}
.section01 .imgbox{
	position: relative;
	width: calc(487 / 1220 * 100%);
	flex-shrink: 0;
}
.section01 .imgbox .img1{
	position: relative;
	width: calc(432 / 487 * 100%);
	margin-left: auto;
	border: 2px solid #000;
	box-sizing: border-box;
}
.section01 .imgbox .img1 img{
	width: 100%;
	height: auto;
	display: block;
}
.section01 .imgbox .img1::after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(80,58,4,0.15);
	pointer-events: none;
}
.section01 .imgbox .img2{
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(320 / 487 * 100%);
	z-index: 2;
}
.section01 .imgbox .img2 img{
	width: 100%;
	height: auto;
	display: block;
}

/* ---------- Services ---------- */
.section02{
	padding-bottom: 130px;
}
.section02 .head{
	padding-bottom: 20px;
	border-bottom: 13px solid #000;
	margin-bottom: 80px;
	align-items: center;
}
.section02 .head .en_title1{
	width: 48.4%;
	font-size: clamp(32px,4.72vw,68px);
	flex-shrink: 0;
}
.section02 .head .default_txt2{
	width: 51.6%;
}
.section02 .list .item{
	margin-bottom: 60px;
}
.section02 .list .item:last-of-type{
	margin-bottom: 0;
}
.section02 .photo{
	position: relative;
	width: calc(570 / 1220 * 100%);
	border: 2px solid #000;
	box-sizing: border-box;
	flex-shrink: 0;
}
.section02 .photo img{
	width: 100%;
	height: auto;
	display: block;
}
.section02 .photo::after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(80,58,4,0.15);
	pointer-events: none;
}
.section02 .txtbox{
	width: calc(560 / 1220 * 100%);
}
.section02 .txtbox .en_title2{
	font-size: 18px;
	margin-bottom: 5px;
}
.section02 .txtbox .default_title1{
	margin-bottom: 30px;
	color: #000;
}
.section02 .txtbox .default_txt1{
	margin-bottom: 30px;
}
.section02 .btns{
	gap: 30px;
	flex-wrap: wrap;
}

/* ---------- Recruit ---------- */
.section04{
	position: relative;
	height: calc(706 / 1440 * 100vw);
	max-height: 941px;
	overflow: visible;
}
.section04 .photo{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(651 / 706 * 100%);
	background-position: center 40%;
	background-size: cover;
}
.section04 .illust{
	position: absolute;
	left: calc(34 / 1440 * 100vw);
	top: calc(74 / 1440 * 100vw);
	width: calc(212 / 1440 * 100vw);
	max-width: 212px;
	z-index: 2;
}
.section04 > .en_title1{
	position: absolute;
	right: calc(20 / 1440 * 100vw);
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
	transform-origin: center center;
	z-index: 2;
	font-size: clamp(48px,8.06vw,116px);
	letter-spacing: 0.04em;
	color: #f2f1e6;
	white-space: nowrap;
	line-height: 1;
}
.section04 .banners{
	position: absolute;
	left: calc(58 / 1440 * 100vw);
	bottom: calc(40 / 1440 * 100vw);
	z-index: 2;
	width: calc(730 / 1440 * 100vw);
	height: calc(192 / 1440 * 100vw);
}
.section04 .banner{
	position: absolute;
	background-color: #000;
	padding: 10px 17px;
	transform: rotate(-7deg);
}
.section04 .banner p{
	font-weight: 700;
	font-size: clamp(16px,2.5vw,36px);
	line-height: 1.4;
	color: #f2f1e6;
	white-space: nowrap;
}
.section04 .banner1{
	left: 0;
	top: 0;
}
.section04 .banner2{
	left: 22%;
	top: 28%;
}
.section04 .recruit_btn{
	position: absolute;
	right: calc(199 / 1440 * 100vw);
	bottom: calc(20 / 1440 * 100vw);
	z-index: 3;
	width: calc(190 / 1440 * 100vw);
	height: calc(190 / 1440 * 100vw);
	max-width: 253px;
	max-height: 253px;
	min-width: 120px;
	min-height: 120px;
	border: 2px solid #000;
	border-radius: 50%;
	background-color: #f5da43;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.section04 .recruit_btn:hover{
	opacity: 1;
	background-color: #242424;
}
.section04 .recruit_btn:hover p{
	color: #f5da43;
}
.section04 .recruit_btn p{
	font-family: "Sen", sans-serif;
	font-weight: 700;
	color: #000;
	line-height: 1.2;
}
.section04 .recruit_btn p:first-of-type{
	font-size: clamp(13px,1.39vw,20px);
	letter-spacing: 0.04em;
	margin-bottom: 6px;
}
.section04 .recruit_btn p:last-of-type{
	font-size: clamp(11px,1.04vw,15px);
	letter-spacing: 0.04em;
}

/* ---------- News ---------- */
.section05{
	padding: 100px 0 130px;
}
.section05 .head{
	padding-bottom: 20px;
	margin-bottom: 0;
	align-items: flex-end;
}
.section05 .head .en_title1{
	font-size: clamp(40px,4.72vw,68px);
}
.section05 .webgene-blog{
	border-top: 1px solid rgba(0,0,0,0.1);
}
.section05 .webgene-item a{
	display: flex;
	align-items: center;
	width: 100%;
	gap: 32px;
	padding: 28px 0 29px;
	border-bottom: 1px solid rgba(0,0,0,0.08);
	box-sizing: border-box;
}
.section05 .webgene-item a:hover{
	opacity: 1;
}
.section05 .webgene-item a:hover h3{
	opacity: 0.5;
}
.section05 .webgene-item .date{
	font-family: "Sen", sans-serif;
	font-size: 16px;
	letter-spacing: 0.045em;
	color: #000;
	flex-shrink: 0;
	width: 110px;
}
.section05 .webgene-item .cate{
	flex-shrink: 0;
	border: 1px solid rgba(0,0,0,0.2);
	padding: 5px 13px;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: #777;
	line-height: 1.5;
}
.section05 .webgene-item h3{
	flex: 1;
	min-width: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	color: #000;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.section05 .webgene-item .ico{
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-left: auto;
}
.section05 .webgene-item .ico img{
	width: 16px;
	height: 16px;
	display: block;
}

/* ---------- Instagram ---------- */
.section06{
	padding-bottom: 0;
}
.section06 .en_title2{
	font-size: clamp(24px,2.64vw,38px);
	color: #231816;
	margin-bottom: 22px;
}
.section06 .webgene-blog{
	display: flex;
	gap: 10px;
	margin-bottom: 22px;
}
.section06 .webgene-item{
	width: calc((100% - 40px) / 5);
	box-sizing: border-box;
}
.section06 .webgene-item a{
	width: 100%;
}
.section06 .webgene-item .imgbox{
	aspect-ratio: 1 / 1;
	position: relative;
	border: 2px solid #000;
}
.section06 .webgene-item img{
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.section06 .follow{
	display: flex;
	align-items: center;
	gap: 25px;
	margin-left: auto;
	padding-bottom: 8px;
	border-bottom: 2px solid #000;
	width: fit-content;
}
.section06 .follow p{
	font-family: "Sen", sans-serif;
	font-size: 20px;
	color: #000;
	white-space: nowrap;
}
.section06 .follow p:first-of-type{
	font-weight: 700;
}
.section06 .follow p:nth-of-type(2){
	font-weight: 600;
}
.section06 .follow .ico{
	width: 17px;
	height: 17px;
}
.section06 .follow .ico img{
	width: 17px;
	height: 17px;
	display: block;
}
.section06 .follow:hover{
	opacity: 1;
}
.section06 .follow:hover p{
	opacity: 0.5;
}


/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.section02 .head{
		border-bottom-width: 8px;
	}
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.fv .fv_nav{
		display: none;
	}
	.section01{
		padding: 100px 0;
	}
	.section01 .inner{
		flex-wrap: wrap;
	}
	.section01 .vttl{
		width: 100%;
		padding-top: 0;
		margin-bottom: 20px;
	}
	.section01 .vttl p{
		writing-mode: horizontal-tb;
		font-size: 16px;
		letter-spacing: 0.2em;
	}
	.section01 .txtbox{
		width: 100%;
		margin-bottom: 50px;
	}
	.section01 .imgbox{
		width: 80%;
		max-width: 520px;
		margin-left: auto;
	}
	.section02 .head{
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 50px;
	}
	.section02 .head .en_title1,
	.section02 .head .default_txt2{
		width: 100%;
	}
	.section02 .head .en_title1{
		margin-bottom: 16px;
	}
	.section02 .list .item,
	.section02 .list .item.flex-row-re{
		flex-direction: column;
		align-items: flex-start;
	}
	.section02 .photo{
		width: 100%;
		margin-bottom: 30px;
	}
	.section02 .txtbox{
		width: 100%;
	}
	.section04 .banners{
		width: 80%;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.fv{
		height: 100vh;
		max-height: none;
		min-height: 560px;
		padding: 12px;
	}
	.fv .logo{
		left: 20px;
		top: 20px;
		width: 100px;
	}
	.fv .fv_ttl{
		top: 22%;
		width: 86%;
	}
	.fv .fv_copy{
		top: 42%;
	}
	.section01,
	.section02{
		padding-bottom: 80px;
	}
	.section01{
		padding-top: 80px;
	}
	.section02 .list .item{
		margin-bottom: 40px;
	}
	.section02 .btns{
		gap: 16px;
	}
	.section04{
		height: 70vw;
		min-height: 420px;
		max-height: none;
	}
	.section04 > .en_title1{
		font-size: 64px;
		right: -20px;
	}
	.section04 .illust{
		width: 120px;
		left: 16px;
		top: 24px;
	}
	.section04 .recruit_btn{

		right: 24px;
		bottom: -30px;
		width: 130px;
		height: 130px;
		min-width: 130px;
		min-height: 130px;
	}
	.section04 .banner p{
		font-size: 18px;
	}
	.section05{
		padding: 100px 0 80px;
	}
	.section05 .webgene-item a{
		flex-wrap: wrap;
		gap: 8px 16px;
		padding: 20px 0;
	}
	.section05 .webgene-item .date{
		width: auto;
	}
	.section05 .webgene-item h3{
		width: 100%;
		flex: auto;
		order: 3;
		white-space: normal;
	}
	.section05 .webgene-item .ico{
		order: 2;
		margin-left: auto;
	}
	.section06{
		padding-bottom: 0;
	}
	.section06 .webgene-blog{
		flex-wrap: wrap;
	}
	.section06 .webgene-item{
		width: calc((100% - 10px) / 2);
	}
	.section06 .webgene-item:nth-of-type(n+5){
		display: none;
	}
	.section06 .follow{
		gap: 12px;
	}
	.section06 .follow p{
		font-size: 16px;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.fv .fv_ttl{
		width: 90%;
	}
	.fv .logo{
		left: 20px;
		top: 20px;
		width: 72px;
	}
	.section01 .imgbox{
		width: 100%;
	}
	.section04 .banners{
		width: 90%;
		left: 16px;
		bottom: 50px;
		height: auto;
	}
	.section04 .banner{
		position: relative;
		left: auto;
		top: auto;
		display: inline-block;
		margin-bottom: 8px;
	}
	.section04 .banner2{
		margin-left: 24px;
	}
	.section04 > .en_title1{
		font-size: 42px;
		top: 18%;
		right: -30px;
		transform: rotate(90deg);
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}