@charset "UTF-8";

/* ------------------------------------------------------------------- 
 * header
 * ------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
	header .logo {
		top: 33px;
	}
}

/* ------------------------------------------------------------------- 
 * common styles
 * ------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
	.section-intro {
		max-width: 650px;
	}

	.section-intro h2 {
		font-size: 4rem;
	}
}
@media only screen and (max-width:600px) {
	.section-intro h2 {
		font-size: 3.3rem;
	}
}
@media only screen and (max-width:400px) {
	.section-intro h2 {
		font-size: 3rem;
	}
}

/* ------------------------------------------------------------------- 
 * intro
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1024px) {
	#intro {
		padding-top: 15rem;
	}

	#intro h1 {
		font-size: 5rem;
		padding: 0 6%;
	}
}
@media only screen and (max-width:768px) {
	#intro {
		padding-top: 13.8rem;
	}

	#intro h3 {
		font-size: 1.8rem;
		letter-spacing: .4rem;
	}

	#intro h1 {
		font-size: 4.5rem;
		padding: 0;
	}
}
@media only screen and (max-width:600px) {
	#intro {
		padding-top: 13.2rem;
	}

	#intro h3 {
		font-size: 1.7rem;
		letter-spacing: .35rem;
	}

	#intro h1 {
		font-size: 4rem;
		padding: 0;
	}
}
@media only screen and (max-width:500px) {
	#intro {
		padding-top: 12rem;
	}

	#intro h3 {
		font-size: 1.6rem;
		letter-spacing: .3rem;
	}

	#intro h1 {
		font-size: 3.8rem;
		padding: 0;
	}

	#intro .buttons {
		max-width: 320px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	#intro .buttons .button {
		display: block;
		width: 100%;
		margin: 0 0 1.5rem 0;
	}
}
@media only screen and (max-width:400px) {
	#intro h3 {
		font-size: 1.5rem;
		letter-spacing: .3rem;
	}

	#intro h1 {
		font-size: 3.5rem;
		padding: 0;
	}

	#intro .buttons {
		width: 100%;
	}
}

/* ------------------------------------------------------------------- 
 * footer
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1024px) {
	.footer-social-list li a {
		font-size: 3.6rem;
		line-height: 3.6rem;
		padding: 3.9rem 3rem 4.2rem;
	}

}
.menu-toggle {display: block;}

@media only screen and (max-width:768px) {
	.footer-social-list li a {
		font-size: 3.3rem;
		line-height: 3.3rem;
		padding: 3.6rem 2rem 3.9rem;
		border: none !important;
	}

}

@media only screen and (max-width:600px) {
	.footer-social-list li a {
		font-size: 3rem;
		line-height: 3rem;
		padding: 3.3rem 1.5rem 3.6rem;
		border: none;
	}

	.copyright span {
		display: block;
	}

	.copyright span::after {
		display: none;
	}

}

@media only screen and (max-width:500px) {
	.footer-social-list li a {
		font-size: 2.8rem;
		line-height: 2.8rem;
		padding: 3rem 1rem 3.3rem;
		border: none;
	}

}

@media only screen and (max-width:400px) {
	.footer-social-list li a {
		font-size: 2.5rem;
		line-height: 2.5rem;
		padding: 2.7rem .8rem 3rem;
		border: none;
	}

}