@charset "UTF-8";

.bl_hero_wrapper {
	position: relative;
	width: 100%;
	animation: fadeIn 4s ease 0s 1 normal;
	-webkit-animation: fadeIn 4s ease 0s 1 normal;
	/* padding-top: calc(60px + 52.5%); */
	padding-top: calc(0px + 52.5%);
	overflow-y: hidden;
}
@media screen and (max-width: 1200px) {
	.bl_hero_wrapper {
		padding-top: calc(70px + 52.5%);
	}
}

.bl_hero {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*古いブラウザ用*/
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*==================================================*/
/*  メインビジュアル 1 [画像とキャッチコピー]
/*==================================================*/
.bl_hero_img {
	/* margin-top: 8vh; */
}
@media screen and (max-width: 1200px) {
	.bl_hero_img {
		margin-top: 70px;
	}
}
.bl_hero_imgTxt {
	position: absolute;
	width: 40%;
	top: 20%;
	right: 5%;
}
@media screen and (max-width: 1200px) {
	.bl_hero_imgTxt {
		width: 50%;
		top: 30%;
	}
}
@media screen and (max-width: 768px) {
	.bl_hero_imgTxt {
		width: 60%;
		top: 40%;
	}
}

/*==================================================*/
/*  メインビジュアル 2 [画像とキャッチコピー]
/*==================================================*/
.bl_himg_txt_wrapper.__imgTxt2 {
	position: absolute;
	top: 10%;
	left: 10%;
}

/*==================================================*/
/*  メインビジュアル 3 [画像とキャッチコピー]
/*==================================================*/
.bl_himg_txt_wrapper.__imgTxt3 {
	position: absolute;
	top: 55%;
	right: 5%;
}

/*==================================================*/
/*  メインビジュアル 4 [画像とキャッチコピー]
/*==================================================*/
.bl_hero_img4 {
	/* margin-top: -5vh; */
}
@media screen and (max-width: 1200px) {
	.bl_hero_img4 {
		margin-top: 70px;
	}
}

.bl_hero_imgTxt4 {
	position: absolute;
	width: 40%;
	top: 15%;
	left: 10%;
}
@media screen and (max-width: 1200px) {
	.bl_hero_imgTxt4 {
		width: 50%;
		top: 25%;
	}
}


/*==================================================*/
/*  メインビジュアル 5 [画像とキャッチコピー]
/*==================================================*/
.bl_himg_txt_wrapper.__imgTxt5 {
	position: absolute;
	top: 50%;
	right: 10%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

/*==================================================*/
/*  メインビジュアル 6 [画像とキャッチコピー]
/*==================================================*/
.bl_himg_txt_wrapper.__imgTxt6 {
	position: absolute;
	width: 30%;
	bottom: 5%;
	right: 10%;
}

/*==================================================*/
/*  メインビジュアル 7 [画像とキャッチコピー]
/*==================================================*/
.bl_hero_img7 {
	/* margin-top: -5vh; */
}
@media screen and (max-width: 1200px) {
	.bl_hero_img7 {
		margin-top: 70px;
	}
}

/*==================================================*/
/*  メインビジュアル 8 [画像とキャッチコピー]
/*==================================================*/

/*==================================================*/
/*  メインビジュアル 9 [画像とキャッチコピー]
/*==================================================*/
.bl_hero_img9 {
	/* margin-top: -5vh; */
}
@media screen and (max-width: 1200px) {
	.bl_hero_img9 {
		margin-top: 70px;
	}
}

.bl_hero_imgTxt9 {
	position: absolute;
	width: 30%;
	top: 55%;
	right: 5%;
}
@media screen and (max-width: 1200px) {
	.bl_hero_imgTxt9 {
		width: 40%;
		top: 70%;
	}
	
}

/*==================================================*/
/*  メインビジュアル 10 [画像とキャッチコピー]
/*==================================================*/
.bl_hero_img10 {
	/* margin-top: -5vh; */
}
@media screen and (max-width: 1200px) {
	.bl_hero_img10 {
		margin-top: 70px;
	}
}

.bl_hero_imgTxt10 {
	position: absolute;
	top: 55%;
	right: 5%;
}
@media screen and (max-width: 1200px) {
	.bl_hero_imgTxt10 {
		width: 45%;
		top: 65%;
	}
}
/*==================================================*/
/*  メインビジュアル 11 [画像とキャッチコピー]
/*==================================================*/
.bl_hero_img11 {
	/* margin-top: -5vh; */
}
@media screen and (max-width: 1200px) {
	.bl_hero_img11 {
		margin-top: 70px;
	}
}
.bl_hero_imgTxt11 {
	position: absolute;
	width: 30%;
	top: 20%;
	left: 5%;
}
@media screen and (max-width: 1200px) {
	.bl_hero_imgTxt11 {
		top: 30%;
	}
}
@media screen and (max-width: 768px) {
	.bl_hero_imgTxt11 {
		top: 40%;
	}
	
}