@charset "utf-8";
/* トップページ---------------- */
#main-image{
	position:relative;
}
#main-image .text{
	position:absolute;
	left:0;
	bottom:14%;
	width:50%;
}
#main-image .pin{
	position:absolute;
	height:7.5%;
	width:2.5%;
	cursor:pointer;
}
#main-image .pin:before{
	content:"";
	display:block;
	width:100%;
	height:100%;
	animation: bound-anim 1s infinite;
	background:url(../images/pin.png) no-repeat center center /contain;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
@keyframes bound-anim {
	0%,100% {top: 0;transform: scale(1);}
	30% {top: -20%; transform: scale(0.96,1.04);}
	60% {transform: scale(1);}
	90% {top: 0;transform: scale(1.15,0.9);}
}
#main-image .pin a{
	display:block;
	width:150%;
	height:125%;
	position:absolute;
	left:-25%;
	top:-12.5%;
	z-index:3;
}
#main-image .comment{
	position:absolute;
	cursor:pointer;
	z-index:2;
	display:none;
}
#main-image .pin:hover+.comment{
	display:block;
}
#main-image #pin-01{
	left:16.2%;
	top:0.71%;
}
#main-image #pin-02{
	left:25%;
	top:4.6%;
}
#main-image #pin-03{
	left:62.2%;
	top:11.2%;
}
#main-image #pin-04{
	left:18.5%;
	top:42.8%;
}
#main-image #pin-05{
	left:55.2%;
	top:54.6%;
}
#main-image #pin-06{
	left:80.9%;
	top:41.8%;
}
#main-image #comment-01{
	width:12.3%;
	height:12.6%;

	left:3.2%;
	top:0%;
}
#main-image #comment-02{
	width:13.3%;
	height:10.3%;

	left:42.1%;
	top:-2%;
}
#main-image #comment-03{
	width:7.9%;
	height:11.2%;

	left:54.5%;
	top:14.3%;
}
#main-image #comment-04{
	width:12.3%;
	height:11.1%;

	left:23.2%;
	top:37.8%;
}
#main-image #comment-05{
	width:10.3%;
	height:11.8%;

	left:46.0%;
	top:50.0%;
}
#main-image #comment-06{
	width:9.1%;
	height:10.4%;

	left:84.4%;
	top:51.0%;
}

@media only screen and (max-width:1100px){

#main-image .pin{
	display:none;
}
#main-image .comment{
	display:none;
}
	#main-image .text{
		left:0;
		bottom:14%;
		width:62.5%;
	}
}

#top-about_us{
	width:100%;
	display:flex;
	justify-content:end;
	gap:90px;
	margin-bottom:150px;
}

#top-about_us .text{
	margin-top:40px;
	width:31.25%;
	min-width:600px;
	margin-left:20px;
}
#top-about_us .text h2{
	margin-bottom:50px;
}
#top-about_us .text p.heading{
	font-size:3em;
	font-weight:700;
	line-height:1.74;
	margin-bottom:40px;
}
#top-about_us .text p.read{
	line-height:2.5;
	font-weight:500;
	margin-bottom:30px;
}
#top-about_us .image{
	width:42.7%;
}

@media only screen and (max-width:1100px){
	#top-about_us{
		margin-top:35px;
		margin-bottom:50px;
		flex-direction:column;
		gap:30px;
	}
	#top-about_us .text h2{
		margin-bottom:30px;
	}
	#top-about_us .text p.heading{
		font-size:1.25em;
		line-height:1.45;
		margin-bottom:20px;
	}
	#top-about_us .text{
		width:100%;
		min-width:100%;
		margin-top:0%;
		margin-left:0%;
		padding:0 20px;
	}
	#top-about_us .image{
		width:100%;
	}

}



#top-product{
	width:100%;
	margin-bottom:150px;
}
#top-product h2{
	margin-bottom:80px;
}
#top-product .link-wrap{
	width:100%;
	display:flex;
	justify-content:space-between;
}
#top-product .link-wrap .link{
	position:relative;
	width:100%;
}
#top-product .link-wrap .link a{
	position:absolute;
	z-index:3;
	display:block;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:rgba(0,0,0,0.32);
	transition:0.3s ease background;
}
#top-product .link-wrap .link a:hover{
	background:rgba(0,0,0,0.08);
}
#top-product .link-wrap .link .text{
	position:absolute;
	z-index:2;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	opacity:1;
	color:#fff;
	text-align:center;
	font-family: 'Noto Serif JP', serif;
	font-weight:700;
}
#top-product .link-wrap .link .text .jp{
	font-size:2.18em;
	line-height:1.42;
	letter-spacing:0.1em;
}
#top-product .link-wrap .link .text .en{
	font-size:1.25em;
	line-height:1.42;
	letter-spacing:0.1em;
}
#top-product .link-wrap .link .image{
	position:relative;
	z-index:1;
	display:block;
}

@media only screen and (max-width:1100px){

	#top-product{
		width:100%;
		margin-bottom:40px;
	}
	#top-product h2{
		margin-bottom:30px;
	}
	#top-product .link-wrap{
		flex-direction:column;
		gap:20px;
	}
	#top-product .link-wrap .link .text .jp{
		font-size:1.25em;
	}
	#top-product .link-wrap .link .text .en{
		font-size:1em;
	}
}





#top-example{
	width:100%;
	margin-bottom:150px;
	position:relative;
}

#top-example .text{
	position:absolute;
	margin-top:40px;
	width:31.25%;
	min-width:600px;
	top:9.5%;
	left:21.35%;
	background:rgba(255,255,255,0.6);
	padding:35px 45px;
}
#top-example .text h2{
	margin-bottom:45px;
}
#top-example .text p.read{
	line-height:2.5;
	font-weight:500;
	margin-bottom:45px;
}
#top-example .image{
	width:100%;
	height:890px;
}
#top-example .image img{
	width:100%;
	height:890px;
	object-fit:cover;
}
@media only screen and (max-width:1100px){

	#top-example{
		margin-bottom:50px;
	}

	#top-example .text{
		position:relative;
		margin-top:0px;
		width:100%;
		min-width:100%;
		top:0%;
		left:0%;
		background:rgba(255,255,255,0.6);
		padding:30px 20px 35px;
	}
	#top-example .text h2{
		margin-bottom:30px;
	}
	#top-example .text p.read{
		line-height:2.5;
		font-weight:500;
		margin-bottom:30px;
	}
	#top-example .image{
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
	}
	#top-example .image img{
		width:100%;
		height:100%;
		object-fit:cover;
	}
}



#top-maker{
	width:100%;
	margin-bottom:150px;
}
#top-maker h2{
	margin-bottom:80px;
}
#top-maker .link-wrap{
	width:80%;
	margin-left:auto;
	margin-right:auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:80px;
	margin-bottom:80px;
}
#top-maker .link-wrap .link{
	position:relative;
	text-align:center;
	width:22%;
}
#top-maker .link-wrap .link a{
	display:block;
}
@media only screen and (max-width:1100px){

	#top-maker{
		margin-bottom:50px;
	}
	#top-maker h2{
		margin-bottom:55px;
	}
	#top-maker .link-wrap{
		flex-wrap:wrap;
		gap:55px;
		margin-bottom:55px;
	}
	#top-maker .link-wrap .link{
		width:calc(40% - 20px);
	}
}
@media only screen and (max-width:640px){
	#top-maker .link-wrap{
		flex-wrap:wrap;
		gap:20px;
		margin-bottom:30px;
	}
	#top-maker .link-wrap .link{
		width:80%;
		margin:0 auto;
	}
}




#top-company{
	width:100%;
	margin-bottom:150px;
}

#top-company .company-wrap{
	width:100%;
	display:flex;
	flex-wrap:wrap;
}
#top-company .text{
	width:33.3%;
	background:rgba(72,121,255,0.1);
	padding:40px 50px;
}
#top-company .text h2{
	margin-bottom:40px;
}
#top-company .text p.read{
	line-height:2.5;
	font-weight:500;
	color:#00268F;
	margin-bottom:15px;
}
#top-company .image{
	width:33.3%;
}

#top-company .image img{
	width: 100%;
	height: 100%;
	object-fit:cover;
}
@media only screen and (max-width:1100px){
	#top-company{
		margin-bottom:50px;
	}
	#top-company .text{
		width:100%;
		padding:30px 20px 35px;
		margin-bottom:0px;
	}
	#top-company .text h2{
		margin-bottom:30px;
	}
	#top-company .image{
		display:none;
	}

}





#top-recruit{
	width:100%;
	margin-bottom:100px;
}
.recruit-wrap{
	display:flex;
	justify-content:space-between;
	gap:30px;
}
#top-recruit .text{
	width:42.7%;
	min-width:620px;
}
#top-recruit .text h2{
	margin-bottom:30px;
}
#top-recruit .text p.heading{
	text-align:center;
	font-size:3em;
	font-weight:700;
	line-height:1.74;
	margin-bottom:25px;
}
#top-recruit .text p.read{
	text-align:center;
	line-height:2.5;
	font-weight:500;
	margin-bottom:35px;
}
#top-recruit .image1{
	width:28.6%;
}
#top-recruit .image2{
	width:28.6%;
	display:flex;
	align-items:end;
}
.button-wrap{
	display:flex;
	justify-content:space-between;
}

.button-wrap > div{
	width:300px;
}
@media only screen and (max-width:1100px){
	#top-recruit{
		margin-bottom:50px;
	}
	.recruit-wrap{
		flex-direction:column;
		gap:30px;
	}
	#top-recruit .text h2{
		margin-bottom:35px;
	}
	#top-recruit .text p.heading{
		font-size:1.25em;
		line-height:1.45;
		margin-bottom:20px;
		text-align:left;
	}
	#top-recruit .text p.read{
		margin-bottom:30px;
		text-align:left;
	}
	#top-recruit .text{
		width:100%;
		min-width:100%;
		margin-top:0%;
		margin-left:0%;
		padding:0 20px;
		margin-bottom:30px;
		order:1;
	}
	#top-recruit .image1{
		width:100%;
		order:2;
	}
	#top-recruit .image2{
		display:none;
	}
	.button-wrap{
		flex-direction:column;
		gap:20px;
		align-items: center;
	}


}