@charset "utf-8";

#headline .text {
	margin: 0 0 55px;
	color: #a78237;
	font-size: 24px;
	letter-spacing: .5em;
	text-align: center;
}
#pageTitle img {
	display: block;
	margin: 0 auto 15px;
}

#headline .title {
	height: auto;
	background: none;
	box-shadow: none;
	3padding: 0;
}

#pageTitle {
	/*margin: 0 0 55px;*/
}
#headline.noimage .title {
	height: auto;
	background: none;
	box-shadow: none;
	margin: 0 auto 100px;
	padding: 0;
}

section .wrap {
	padding-top: 100px;
	padding-bottom: 90px;
}
section + section .wrap {
	border-top: 1px solid #d2d2d2;
}

.rMore {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 40px;
	color: #222;
	font-size: 15px;
	text-align: center;
}
.rMore i {
	margin: 0 8px 0 0;
	transition: transform 1s;
}
 a:hover .rMore i {
	transform: translateX(5px);
}
.rMore span {
	position: relative;
	transition: color 1s;
}
a:hover .rMore span {
	color: #a78237;
}
a .rMore span::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  background-color: #a78237;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
a:hover .rMore span::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

@media only screen and (max-width:640px) {
	#headline .wrap {
		padding: 9.375% 4.688% 12.5%;
	}
	#headline .text {
		margin: 0 0 10.345%;
		font-size: 16px;
	}

	#headline .title {
		margin: 0;
		padding: 0;
		background-image: none;
	}
	#pageTitle {
/*
		background-image: url(../imgs/quality/bg-headline.jpg);
		background-position: right;
		box-shadow: inset 0 5px 5px rgba(0,0,0,.2);
*/
		padding-top: 48.188%;
	}
	#pageTitle {
		margin: 0;
	}


	section {
		padding: 0 4.688%;
	}
	section .wrap {
		padding: 13.793% 0;
	}

	.rMore {
		margin: 5.172% 0 0;
		position: static;
		font-size: 15px;
	}
	 a:hover .rMore i {
		transform: translateX(0);
	}
}

/* lineup */
	#lineup ul {
		border-top: 1px solid #ececec;
	}
	#lineup li {
		height: 257px;
		border-bottom: 1px solid #ececec;
		position: relative;
		overflow: hidden;
	}
	#lineup .text {
		width: 620px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		vertical-align: top;
		background: white;
		text-align: center;
	}
	#lineup .text .ov {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	#lineup .text .df {
		position: relative;
		transition: 1s;
	}
	/*#lineup a:hover .text .df {
		opacity: 0;
	}*/
	#lineup .image {
		margin: 0 0 0 620px;
		overflow: hidden;
	}
	#lineup .image img {
		width: 100%;
		height: auto;
		min-width: 782px;
		min-height: 206px;
		vertical-align: top;
	}
	.bMore {
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
		font-size: 15px;
		margin-top: 100px;
		text-align: center;
	}
	.bMore i.fa-angle-right {
		margin: 0 8px 0 0;
		transition: transform 1s;
	}
	.bMore a:hover i.fa-angle-right {
		transform: translateX(5px);
	}
	.bMore i.fa-clone {
		margin-left: 8px;
	}
	.bMore a {
		position: relative;
		display: block;
		width: 100%;
		padding: 15px 0;
		background: #a78237;
		text-decoration: none;
		color: #fff;
		border: 1px solid #a78237;
		transition: all 1s;
	}
	.bMore a:hover {
		background: #fff;
		color: #a78237;
	}
	/*.bMore a span {
		position: relative;
	}
	.bMore a span:after {
		content: '';
		width: 100%;
		height: 2px;
		background: #a78237;
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: -8px;
		transition: transform 0.5s ease-in, background 0.5s ease-in;
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
	}
	.bMore a:hover span:after {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		background: #fff;
	}*/

@media screen and (max-width:768px) {
	img.sp {
		display: inline-block;
		width: 100%;
		vertical-align: bottom;
	}
	#lineup .text,
	#lineup .image {
		display: none;
	}
	#lineup li {
		height: auto;
	}
	#headline.noimage .title {
		margin-bottom: 80px;
	}
	#headline .title p {
		padding-bottom: 0;
	}
}
@media only screen and (max-width:640px) {
	#lineup {
		padding: 0;
	}
	#lineup ul {
		border-top: none;
	}
	#lineup li {
		height: auto;
		border-bottom: none;
	}
	#lineup li img {
		vertical-align: top;
	}
}