
/*  Project
---------------------------------------------------------- */

/*heroArea*/
.p-heroArea{
	width: 100%;
	height: auto;
	position: relative;
	/*aspect-ratio: 40/17;*/
	aspect-ratio: 47/20;
	/*overflow: hidden;*/
	min-width: 1160px;
	min-height: 492px;
	margin-top: -51px;
	background: url("../images/bg_hero.jpg") no-repeat 50% 50%;
	background-size: cover;
	opacity: 0;
	transition: opacity 0.8s;
}
.p-heroArea.is-appear{
	opacity: 1;
}

/*heroArea__catch*/
.p-heroArea__catch{
	position:absolute;
	left:0px;
	top:120px;
	width: 100%;
	z-index: 1;
	opacity: 0;
	/*transition: opacity 1.2s 0.6s, margin-top 1.2s 0.6s, width 0.4s;*/
	transition: opacity 0.8s 0.4s, top 0.8s 0.4s;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	align-items: center;
}
.p-heroArea__catch>h2{
	width: clamp(60vw,740px,100%);
	max-width: 1200px;
	padding: 0 10px;
}
.p-heroArea__catch .p-logo{
	width: clamp(22vw,260px,36%);
	max-width: 430px;
	/*margin-top: 6px;*/
	margin-top: 24px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s 0.6s, transform 0.6s 0.6s;
}
.sp .p-heroArea__catch .p-logo{
	width: clamp(22vw,260px,50%);
}
.is-appear .p-heroArea__catch .p-logo{
/*	width: clamp(22vw,260px,36%);
	max-width: 430px;
	margin-top: 6px;*/
	transform: translateY(0px);
	opacity: 1;
}

.p-heroArea__catch img{
	width: 100%;
	height: auto;
}
.is-appear .p-heroArea__catch{
	opacity: 1;
	top: 76px;
}


@media screen and ( max-width:959px) {
	.p-heroArea{
		min-width: inherit;
	}

}
