@charset "UTF-8";

/* ttl_page
----------------------------------------*/
.ttl_page {
	padding-top: 252px;
	margin-bottom: 76px;
}
.ttl_page::before {
	content: '';
	display: block;
	position: absolute;
	top: -206px;
	left: 0;
	right: -263px;
	height: 1597px;
	background: url(../img/common/bg_ttl.svg) no-repeat no-repeat center top;
}
.ttl_page h1 {
	text-align: center;
	font-size: 2rem;
	color: #6CC6CE;
	letter-spacing: .1em;
}
.ttl_page h1 span {
	font-size: 4.6rem;
	color: #444;
	display: block;
	margin-bottom: 7px;
	letter-spacing: .1em;
	padding-left: .1em;
}

@media only screen and (max-width: 768px) {
	.ttl_page {
		padding-top: 80px;
		margin-bottom: 20px;
	}
	.ttl_page::before {
		top: -70px;
		height: 500px;
		background-size: auto 100%;
	}
	.ttl_page h1 {
		font-size: 1.2rem;
	}
	.ttl_page h1 span {
		font-size: 3.1rem;
		margin-bottom: 0;
	}
}

/* main
----------------------------------------*/

@media only screen and (max-width: 768px) {
}


/* footer
----------------------------------------*/
.footer::before {
	content: '';
	display: block;
	height: 659px;
	background: url(../img/common/bg_footer.svg) no-repeat center bottom;
	position: absolute;
	bottom: -207px;
	left: -324px;
	right: 0;
}

@media only screen and (max-width: 768px) {
	.footer::before {
		height: 250px;
		left: 0;
		background-size: auto 100%;
		background-position: center bottom;
		bottom: -103px;
	}
}

@keyframes fadeUp {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}