@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : intro.css
Description :
===================================================================== */

/* =====================================================================
*    intro
* =================================================================== */
.intro {}

.intro::before {
	content: '';
	position: absolute;
	background: url(../images/intro/bg_intro.jpg) no-repeat center top/contain;
	width: calc(1800 / 750 * 100vw);
	height: calc(250 / 750 * 100vw);
	top: 0;
	left: -70%;
	margin: calc(50 / 750 * 100%) auto 0;
}

.intro .sec_ttl {
	margin: 0 0 calc(130 / 750 * 100%);
}

.intro .sec_contents {
	width: 100%;
}

.intro_box {
	padding: calc(132 / 750 * 100%) 0 calc(155 / 750 * 100%);
}

.intro .sec_contents::before {
	content: '';
	position: absolute;
	background: url(../images/intro/bg_content1.jpg) no-repeat left top/contain;
	width: calc(1600 / 750 * 100vw);
	height: calc(348 / 750 * 100vw);
	top: 0;
	left: 0;
}

.intro .sec_contents::after {
	content: '';
	position: absolute;
	background: url(../images/intro/bg_content2.jpg) no-repeat right bottom/contain;
	width: calc(1600 / 750 * 100vw);
	height: calc(350 / 750 * 100vw);
	bottom: 0;
	right: 0;
}

.intro_box img {
	width: calc(724 / 750 * 100%);
	margin: auto;
	z-index: 2;
}



@media screen and (min-width: 768px) {
	.intro::before {
		background-size: cover;
		width: 100%;
		height: calc(189 / 1200 * 100vw);
		left: 0;
		right: 0;
		margin: calc(50 / 1200 * 100%) auto 0;
	}

	.intro_box {
		padding: 80px 0 150px;
	}

	.intro .sec_ttl {
		width: 100%;
		max-width: 1000px;
		margin: 0 auto 120px;
	}

	.intro .sec_ttl img {
		width: calc(655 / 1000 * 100%);
	}

	.intro .sec_contents::before {
		width: 100%;
		height: calc(348 / 1200 * 100vw);
	}

	.intro .sec_contents::after {
		width: 100%;
		height: calc(350 / 750 * 100vw);
		left: 0;
		margin: auto;
	}

	.intro_box {
		width: 100%;
		max-width: 1000px;
		margin: auto;
	}

	.intro_box img {
		width: calc(788 / 1000 * 100%);
	}
}

@media screen and (min-width: 1200px) {
	.intro {
		padding: 130px 0;
	}

	.intro::before {
		max-width: 1600px;
		max-height: 190px;
		margin: 50px auto 0;
	}

	.intro .sec_contents::before {
		max-height: 348px;
	}

	.intro .sec_contents::after {
		max-height: 350px;
	}

}