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

*{
	margin: 0;
	padding: 0;
}

#bg{
	background: url(../img/bg.svg) no-repeat center / cover;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
}

section{
	position: relative;
	z-index: 9999;
}

a:hover{
	opacity: 0.5;
	transition: 0.5s;
}

img{
	display: block;
	width: 100%;
}

#contents1{
	position: relative;
}

#contents1 a{
	display: block;
	position: absolute;
	left: 0.7rem;
	top:1rem;
	width: 35%;
}

#contents1,
#contents2{
	width: 700px;
	margin: 0 auto;
}

#contents2{
	background: #c4142a;
	padding: 60px 0 95px 0;
}

.btn{
	display: block;
	width: 90%;
	margin: 0 auto
	
}

#btn01{
	margin-bottom:  80px;
}

#img_01{
	margin-bottom: 135px;
}

#img_02{
	margin-bottom: 30px;
}

#flow01{
	margin-bottom: -5px;
	position: relative;
}

#flow01 a#btn_flow{
	position: absolute;
	display: block;
	left: 50%;
	transform: translateX(-50%);
	bottom: 130px;
	width: 80%
}

#flow02{
	margin-bottom: -55px;
}

#flow03{
	margin-bottom: 50px;
}

#end{
	margin-bottom: 30px;
}

@media (max-width: 699px) {
	#contents1,
	#contents2{
		width: 100%;
	}
	
	#contents2{
		padding: 20px 0 60px 0;
	}
	
	#btn01{
		margin-bottom:  10%;
	}
	
	#img_01{
		margin-bottom: 20%;
	}
	
	#img_02{
		margin-bottom: 5%;
	}
	
	#flow01{
		margin-bottom: 0;
		position: relative;
	}
	
	#flow01 a#btn_flow{
		bottom: 23%;
	}
	
	#flow02{
		margin-bottom: -7%;
	}

}