@charset "utf-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 homeMain 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.homeMain {
	background-image: url(../images/home_main1.jpg);
	background-color: #000000;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: auto 100%;
	padding-top: 740px;
	margin-bottom: 30px;
	position: relative;
}
.homeMain::before,
.homeMain::after {
	content: "";
	width: 40px;
	height: 40px;
	display: block;
	border-radius: 50%;
	position: absolute;
	right: 0;
	bottom: 15px;
	left: 0;
	margin-right: auto;
	margin-left: auto;
	animation: homeScroll 1s ease infinite;
}
.homeMain::before { background-color: #5c5a59; opacity: 0.4; }
.homeMain::after { background-image: url(../images/home_main_scroll.png); background-size: cover; }

.homeMain .homeInner {
	width: 100%;
	max-width: 1400px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	margin: auto;
}
.homeMain .mainPlate { width: 310px; display: block; margin: calc(50/1400 * 100%) 0 0 calc(90/1400 * 100%); }
.homeMain .mainPlate p:nth-child(2) { display: none; }

@keyframes homeScroll {
	0% { transform: translateY(0); }
	50% { transform: translateY(6px); }
	100% { transform: translateY(0); }
}

@media screen and (max-width: 1400px) {
	.homeMain { background-size: auto 100%; padding-top: calc(740/1400 * 100%); }
	.homeMain .mainPlate { width: calc(310/1400 * 100%); }
}

@media screen and (min-width: 821px) {
	.homeMain .mainPlate { transition: 0.2s ease; }
	.homeMain .mainPlate:hover { opacity: 0.7; }
}

@media screen and (max-width: 767px) {
	.homeMain {
		background-image: url(../images/home_main2.jpg);
		background-size: auto 100%;
		background-position: bottom center;
		padding-top: 520px;
		margin-bottom: 0;
	}
	.homeMain::before,
	.homeMain::after { right: 10px; bottom: 10px; left: auto; }
	
	/* .homeMain .homeInner { width: calc(987/1400 * 100%); } */
	.homeMain .homeInner { width: 100%; }
	.homeMain .mainPlate {
		width: 255px;
		margin: calc(50/987 * 100%) 0 0 calc(50/987 * 100%);
	}
	.homeMain .mainPlate p:nth-child(1) { display: none; }
	.homeMain .mainPlate p:nth-child(2) { display: block; }
}

@media screen and (max-width: 500px) {
	.homeMain { background-size: 100% auto; }
	.homeMain .mainPlate { margin: calc(50/987 * 100%) 0 0 calc(50/987 * 100%); }
}







/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 homeIntro 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.homeIntro { overflow: hidden; }
.homeIntro .introInner { float: right; width: 680px; background-color: #7f8178; border: solid 2px #000000; color: #ffffff; padding: 20px 40px; }
.homeIntro .introTitle { font-size: 2rem; line-height: 3rem; margin-bottom: 5px; }
.homeIntro .introTxt { font-size: 1.8rem; line-height: 3rem; }

@media screen and (max-width: 767px) {
	.homeIntro { overflow: visible; }
	.homeIntro .introInner { float: none; width: calc( 30 / 290 * 100% + 100% ); border: none; padding: 25px calc( 15 / 290 * 100% ); margin-right: calc( -15 / 290 * 100% ); margin-left: calc( -15 / 290 * 100% ); }
	.homeIntro .introTitle { font-size: 1.8rem; line-height: 2.4rem; text-align: center; }
	.homeIntro .introTxt { max-width: 500px; font-size: 1.6rem; line-height: 2.4rem; margin-right: auto; margin-left: auto; }
}