@charset "Shift_JIS";

/* **************************************************

Name: top.css

Description: Setting of top page layout

Create: 2023.12.14
Update: 

***************************************************** */

#BrandingWrap {
	position: relative;
	margin: 0 0 30px;
	height: 44.4vw;
	overflow: hidden;
}
#BrandingWrap .brandingImage {
	position: absolute;
	top: 0;
}
#BrandingWrap .brandingImage img {
	width: 100%;
  height: auto;
}
#BrandingWrap .brandingText {
	position: absolute;
	width: 1275px;
	left: 50%;
	transform: translateX(-50%);
	bottom: 21.5%;
}
#BrandingWrap .brandingText img {
	width: 26.5vw;
}
#BrandingWrap .brandingText > p {
	position: relative;
	display: inline-block;
/*	padding: 26px 80px 26px 0;*/
	padding: 2.5% 6% 2.5% 0;
	background-color: rgba(230, 2, 39, 0.8);
	clip-path: polygon(-100% 0, 100% 0, 90% 100%, -100% 100%);
}
#BrandingWrap .brandingText > p:before {
	content: "";
	background-color: rgba(230, 2, 39, 0.8);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	width: 9999px;
	z-index: 1;
}

@media screen and (min-width :995px) and (max-width: 1304px) {
	#BrandingWrap {
		margin-left: -15px;
		margin-right: -15px;
	}
	#BrandingWrap .brandingText {
		width: 100%;
	}
	#BrandingWrap .brandingText > p {
/*		padding-left: 45px;*/
		padding-left: 3%;
	}
}

@media screen and (max-width: 994px) {
	#BrandingWrap {
		margin-left: -15px;
		margin-right: -15px;
	}
	#BrandingWrap .brandingText {
		width: 100%;
	}
	#BrandingWrap .brandingText > p {
		padding-left: 3%;
	}
}

@media screen and (max-width: 767px) {
	#BrandingWrap {
		height: 77.4vw;
	}
	#BrandingWrap .brandingText {
		bottom: 14.5%;
	}
	#BrandingWrap .brandingText > p {
		padding-left: 6%;
		padding-right: 10%
	}
	#BrandingWrap .brandingText img {
		width: 43vw;
	}
}

.healthBanner {
	text-align: right;
}

@media screen and (max-width: 767px) {
	.healthBanner {
		text-align: center;
	}

}