/* CSS Document */

/* =================================================

@media print, screen and (min-width: 750.02px) and (max-width: 900px) {}
@media print, screen and (min-width: 750.02px) {}
@media screen and (max-width: 750px) {}

================================================= */

/* ============================================================================
	Setting
============================================================================ */

	.mainVisualWrap {
		background: url("../images/roof_heatshield/main_bg.jpg") right bottom no-repeat;
		background-size: 100% 100%;
	}
	.mainVisual .productLogoArea .btnUnit a {
		background: rgba(var(--site-themeColor-heatshield), 1);
	}

@media screen and (max-width: 900px) {	
	.mainVisualWrap {
		background-position: 76% top;
		background-size: cover;
	}
}


	.productsTechBg {
		background-image: url("../images/roof_heatshield/bg.jpg");
	}

	.redUnitWrap {
		background: url("../images/roof_heatshield/bg_unique.jpg") top right no-repeat;
	}
	.redUnitWrap::before {
		display: none;
	}
	.redUnit h2.ptHeading {
		font-family: var(--site-font_family-serif);
		margin-bottom: var(--site-marpad-S);
	}
	.redUnit h2.ptHeading + p {
		text-align: center;
	}

@media screen and (max-width: 900px) {	
	.redUnitWrap {
		background-size: 90% auto;
	}
}

	.redUnitColumn {
		background: rgba(200, 120, 122, .15);
		padding: var(--site-marpad-XS);
	}
	.redUnitColumn h4.ptHeading {
		font-size: 1.2em;
		font-family: var(--site-font_family-serif);
		margin-bottom: var(--site-marpad-XXS);
		padding-left: 0.5em;
		border-left: 5px solid rgba(var(--partsColor), 1);
	}
	.redUnitColumn p {
		color: rgba(255, 255, 255, .8);
	}