@charset "utf-8";
/* CSS Document */

p {
	color: #222;
}
aside {
	padding-top: 60px;
}
.under_wrap {
	background: #282828;
}

/* --------------------------------------
	main
-------------------------------------- */
article {
	width: 72vw;
	max-width: 800px;
	margin: min(calc((180 / 1240) * 100vw), 180px) auto 0;
	padding-bottom: min(calc((200 / 1240) * 100vw), 200px);
	position: relative;
	text-align: center;
	box-sizing: border-box;
}
article h2 {
	font-size: min(calc((48 / 1240) * 100vw), 40px);
	font-weight: bold;
	line-height: 1.4;
	color: #8d1a3e;
}
article h2 span {
	display: inline-block;
	padding-bottom: .25em;
	border-bottom: 1px solid #8d1a3e;	
}
article p {
	font-size: min(calc((20 / 1040) * 100vw), 20px);
	line-height: 1.8;
	*+& {
		margin-top: 1.6em;	
	}
	&:first-of-type {
		margin-top: 2.4em;
	}
}

article p.mt70 {
	margin-top: 70px;
}
.bg_imgs {
	width: calc(100% - 80px);
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% 0;
}
.bg_imgs > img {
	position: absolute;
	opacity: 0;
}
.bg_imgs > img.show {
	opacity: 1;
	transition: 1s ease-in-out;
}
.img_no1 {
	left: -160px;
	top: 36px;
}
.img_no2 {
	right: -160px;
	top: 248px;
}
.bg_imgs > .img_no1.show {
	-webkit-animation-duration: 0.75s;
	animation-duration: 0.75s;
	-webkit-animation-name: pulse;
	animation-name: pulse;
}
.bg_imgs > .img_no2.show {
	-webkit-animation-duration: 0.75s;
	animation-duration: 0.75s;
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
}
.bx-viewport {
	height: 833px!important;
}
.slide_img {
	margin-bottom: 85px;
}
.slide_img li {
	width: 608px!important;
	margin-right: 24px;
}


@media(max-width: 768px) {
	aside {
		padding-top: 30px;
	}
	article {
		padding: 0 0 16vw;
	}
	article p {
		font-size: 15px;
	}
	article p.mt70 {
		margin-top: 50px;
	}
	article p:first-of-type {
		margin-top: 30px;
	}
	article h2 {
		font-size: 6vw;
	}
	.bg_imgs {
		width: calc(100% - 8vw);
		left: 50%;
		translate: -50% 0;
		opacity: .8;
		z-index: -1;
	}
	.bx-viewport {
		height: 417px!important;
	}
	.slide_img li {
		width: 304px!important;
		margin-right: 8px!important;
	}
	.slide_img li img {
		width: 100%;
	}
}
@media(max-width: 1040px) {
	.img_no1 {
		left: -20vw;
        top: 4vw;
        width: 20vw;
	}
	.img_no2 {
		rright: -22vw;
        top: auto;
        width: 20vw;
        bottom: 4vw;
	}
}
@media(max-width: 600px) {
	article {
		p {
			text-align: left;
			br {
				display: none;
			}
		}
	}
	.img_no1 {
		left: -25vw;
        top: 12vw;
        width: 26vw;
	}
	.img_no2 {
		right: -24vw;
        top: auto;
        width: 26vw;
        bottom: 4vw;
	}	
}