@charset "utf-8";


/* ==============================
 PAGE
 ======================================== */

 /* Catch
 ------------------------------*/
.catch {
	 margin: 70px 0 100px;
}
.catch img {
	width: 100%;
}

/* Visual List
------------------------------*/
.visual-list {
	width: 100%;
	max-width: 1260px;
	margin: 0 auto;
}
.visual-list li {
	position: relative;
	display: block;
	width: 100%;
	height: 420px;
	margin-bottom: 110px;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
.visual-list li:last-child {
	margin-bottom: 100px;
}

/* Background Image */
.visual-list li.challenge {
	background-image: url(../img/mission/photo_01.png);
	background-position: left top;
}
.visual-list li.value {
	height: 280px;
	background-image: url(../img/mission/photo_02.png);
	background-position: center top;
}
.visual-list li.passion {
	background-image: url(../img/mission/photo_03.png);
	background-position: right top;
}

/* Text */
.text {
	position: relative;
	width: 980px;
	height: 100%;
	max-width: 100%;
	margin: 0 auto;
}
/* Text Title */
.title {
	position: absolute;
	font-weight: bold;
	font-family: Raleway, Helvetica, Arial;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}
.challenge .title {
	top: 180px;
	right: 0;
	font-size: 90px;
	width: 553px;
	height: 66px;
	background-image: url(../img/mission/title_challenge.png);
}
.value .title {
	top: -30px;
	right: 65%;
	font-size: 80px;
	width: 270px;
	height: 58px;
	background-image: url(../img/mission/title_value.png);
}
.passion .title {
	top: 30px;
	left: 0;
	font-size: 100px;
	width: 443px;
	height: 73px;
	background-image: url(../img/mission/title_passion.png);
}

/* Text Info */
.info {
	position: absolute;
	line-height: 1.8;
	font-size: 20px;
}
.challenge .info {
	top: 280px;
	right: 0;
}
.value .info {
	top: 290px;
	right: 0;
}
.passion .info {
	top: 140px;
	left: 0;
}


/* ==============================
 For Smart Phone
 ======================================== */
@media only screen and (max-width: 900px) {

}
@media only screen and (max-width: 768px) {
	/* Catch
	------------------------------*/
	.catch {
		margin: 25px 0 40px;
	}
	/* Visual List
	------------------------------*/
	.visual-list {
		box-sizing: border-box;
		max-width: 100%;
		padding: 0 15px;
		box-sizing: border-box;
	}
	.visual-list li {
		box-sizing: border-box;
		width: 100%;
		height: auto;
		margin-bottom: 35px;
		background-size: 100% auto;
		padding: calc(61.03% + 20px) 0 0;
	}
	.visual-list li:last-child {
		margin-bottom: 50px;
	}

	/* Background Image */
	.visual-list li.challenge,
	.visual-list li.value,
	.visual-list li.passion {
		height: auto;
		background-position: center top;
	}

	/* Text */
	.text {
		position: relative;
		width: 100%;
		height: 100%;
	}
	/* Text Title */
	.title {
		position: relative;
		width: 100%;
		margin: 0 auto 10px;
		text-align: center;
	}
	.challenge .title,
	.value .title,
	.passion .title {
		top: 0;
		left: 0;
		font-size: 30px;
	}
	.challenge .title {
		width: calc(369px / 2);
		height: calc(44px / 2);
		background-image: url(../img/mission/title_challenge_sp.png);
	}
	.value .title {
		width: calc(202px / 2);
		height: calc(44px / 2);
		background-image: url(../img/mission/title_value_sp.png);
	}
	.passion .title {
		width: calc(276px / 2);
		height: calc(44px / 2);
		background-image: url(../img/mission/title_passion_sp.png);
	}

	/* Text Info */
	.info {
		position: relative;
		width: 100%;
		text-align: center;
		font-size: 14px;
	}
	.info br {
		display: none;
	}
	.challenge .info {
		top: 0;
		right: 0;
	}
	.value .info {
		top: 0;
		right: 0;
	}
	.passion .info {
		top: 0;
		left: 0;
	}
}