@charset "utf-8";


/**************************************************50
 * intro
 **************************************************/
#intro{
	border-color: #9465C8;
	border-style: solid;
	position: relative;
}
#intro img{
	width: 100%;
}
#intro > picture{
}
#intro > picture img{
}
#intro h1{
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#intro h1 > picture{
}
#intro h1 > picture img{
}
@media screen and (max-width:767px){
	#intro{
		border-width: 4px 0;
	}
	#intro h1{
		width: 100%;
	}
}
@media screen and (min-width:768px){
	#intro{
		border-width: 0.625em 0;
	}
	#intro h1{
		width: 87.5%;
	}
}


/**************************************************50
 * campaign
 **************************************************/
#campaign{
	position: relative;
}
#campaign img{
	width: 100%;
}
#campaign .campaigns{
	position: relative;
}
#campaign .campaigns:before{
	content: "";
	display: block;
	pointer-events: none;
}
#campaign .campaigns img{
	height: 100%;
	object-fit: cover;
	object-position: center top;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
#campaign_detail{
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 2;
}
#campaign_detail > picture{
}
#campaign_detail > picture img{
}
@media screen and (max-width:767px){
	#campaign{
	}
	#campaign .campaigns:before{
		padding-top: 55%;
	}
	#campaign_detail{
		width: 87.5%
	}
}
@media screen and (min-width:768px){
	#campaign{
	}
	#campaign .campaigns:before{
		padding-top: 40%;
	}
	#campaign_detail{
		width: 54%
	}
}