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



/* ////////////////////////////////////////////////////////////////////////////////

	about

//////////////////////////////////////////////////////////////////////////////// */

#about {
    height: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
    justify-content: center;
	color: #fff;
	background: url("../images/bg_about.jpg") no-repeat center center fixed;
	background-size: cover;
    max-width: inherit;
    padding: 200px 60px 120px;
}
#about .catchImg {
	max-width: 400px;
	line-height: 0;
	margin-bottom: 10px;

	opacity: 0;
	animation: op1 1.5s ease-out 0.4s forwards;
}
@keyframes op1 {
	0% { opacity: 0; filter: blur(40px);}
	100% { opacity: 1; filter: blur(0);}
}
#about .catchTxt {
	font-size: 36px;
	font-weight: normal;
	letter-spacing: 0.15em;
	padding-top: 20px;
	position: relative;
    line-height: 1.2;
    margin-bottom: 120px;
}
#about .catchTxt::before {
	content: "";
	display: block;
	width: 0%;
	height: 2px;
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	animation: op2 0.4s ease-out 3s forwards;
}
@keyframes op2 {
	0% { width: 0%;}
	100% { width: 100%;}
}

#about .catchTxt span {
	font-family: 'Didact Gothic', sans-serif;
	display: inline-block;
	opacity: 0;
	animation: op3 1s ease-out 3.5s forwards;
}
@keyframes op3 {
	0% { opacity: 0;}
	100% { opacity: 1;}
}

#about h3 {
    position: relative;
    text-align: center;
    font-size: 22px;
    line-height: 2.4;
    letter-spacing: 0.3em;
    opacity: 0;
    animation: op4 0.6s ease-out 4s forwards;
    margin-bottom: 60px;
    padding-bottom: 80px;
    text-indent: 0.4em;
}

#about .lead {
	text-align: center;
	font-size: 16px;
	line-height: 2.8;
	letter-spacing: 0.2em;
	opacity: 0;
	animation: op4 0.6s ease-out 4s forwards;
	margin-bottom: 50px;
}
@keyframes op4 {
	0% { opacity: 0; transform: translateY(30px);}
	100% { opacity: 1; transform: translateY(0);}
}

#about .aboutBtn {
	opacity: 0;
	animation: op4 0.6s ease-out 4.3s forwards;
}
#about .aboutBtn a {
	display: block;
	text-decoration: none;
	font-size: 16px;
	text-align: center;
	width: 240px;
	border: #fff solid 1px;
	padding: 15px;
	margin: 0 auto;
	color: #fff;
}

#about .scroll {
    opacity: 0;
    animation: op3 0.6s ease-out 4.3s forwards;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
#about .scroll a {
	display: block;
	width: 40px;
	height: 40px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}
#about .scroll a > span {
	position: absolute;
	top: 0;
	left: 19px;
	width: 1px;
	height: 100%;
	background-color: #fff;
	animation: scrl 1s ease-out infinite;
}
/*#about .scroll a > span::after {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-bottom: #fff solid 1px;
	border-right: #fff solid 1px;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateX(-50%) rotate(45deg);
}*/

@keyframes scrl {
	0% { transform: translateY(-100%);}
	100% { transform: translateY(100%);}
}


#about .aboutLogo {
	width: 280px;
	opacity: 0;
	animation: op4 0.6s ease-out 4s forwards;
}


@media screen and (max-width: 812px) {

	#about {
		padding: 26vw 8vw 14vw;
		background: none;
	}
	#about::before {
		content: "";
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: url("../images/bg_about_sp.jpg") no-repeat center center;
		background-size: cover;
		z-index: -1;
	}

	#about .catchImg {
		max-width: 44vw;
		margin-bottom: 3vw;
	}
	#about .catchTxt {
		font-size: 6vw;
		padding-top: 3vw;
		margin-bottom: 12vw;
	}

	#about h3 {
		font-size: 3.8vw;
		margin-bottom: 10vw;
		padding-bottom: 16vw;
		letter-spacing: 0.2em;
		line-height: 2.2;
	}
	#about .scroll a {
		width: 10vw;
		height: 10vw;
	}
	#about .scroll a > span {
		left: calc(5vw - 1px);
	}

	#about .lead {
		font-size: 3.2vw;
		line-height: 2.2;
		letter-spacing: 0.06em;
    	margin-bottom: 10vw;
	}
	#about .aboutBtn a {
		font-size: 3.2vw;
		width: 45vw;
		padding: 3vw;
	}


	#about .aboutLogo {
		width: 36vw;
	}

	#company,
	footer {
    	background-color: #efefef;
	}
}