﻿/* ****************************** eyecatch ****************************** */

div#eyecatch{
	width: 450px;
	margin: 60px auto;
}

div#eyecatch h1{
	width: 192px;
	height: 46px;
	margin: 0 auto 20px;
	background: url('../images/bridal/eyecatch_title.png') no-repeat;
	text-indent: -9999em;
}

@media screen and (max-width:640px){
	div#eyecatch{
		width: auto;
		margin: 30px 10px 20px;
	}
	
	div#eyecatch h1{
		width: 30%;
		height: 0;
		padding: 0 0 7.6% 0;
		background-size: 100%;
	}
}

/* ****************************** brandList ****************************** */

div#brandList{
	width: 940px;
	margin: 0 auto 80px;
}

div#brandList ul{
	width: 960px;
	margin: 0 0 -40px -20px;
}

div#brandList ul li{
	width: 300px;
	float: left;
	margin: 0 0 40px 20px;
	position: relative;
}

div#brandList ul li.break{
	clear: left;
}

div#brandList ul li p.image{
	position: absolute;
	top: 0;
}

div#brandList ul li p.image img.border{
	border: 1px solid #ccc;
	box-sizing: border-box;
}

div#brandList ul li h2{
	padding: 220px 0 0;
	margin: 0 0 10px;
	font-size: 2em;
	font-weight: 400;
	line-height: 1.5em;
}

div#brandList ul li h2 a{
	text-decoration: none;
	color: #000;
}

div#brandList ul li h2 a:hover{
	text-decoration: underline;
	color: #f6ab00;
}

div#brandList ul li p.text{
	margin: 0 0 20px;
}

div#brandList ul li p.link a{
	text-decoration: none;
	color: #f6ab00;
}

div#brandList ul li p.link a:before{
	font-family: 'fontAwesome';
	content: '\f08e';
}

div#brandList ul li p.link a:hover{
	text-decoration: underline;
}

@media screen and (max-width:640px){
	div#brandList{
		width: auto;
		margin: 0 10px 20px;
	}
	
	div#brandList ul{
		width: 100%;
		margin: 0;
	}
	
	div#brandList ul li{
		float: none;
		width: 100%;
		margin: 0 0 20px;
	}
	
	div#brandList ul li h2{
		font-size: 1.5em;
		line-height: 1.25em;
		padding: 70% 0 0;
		margin: 0 0 10px;
		word-break: break-all;
	}
	
	div#brandList ul li p.image{
		width: 100%;
	}
	
	div#brandList ul li p.image img{
		width: 100%;
		height: auto;
	}
	
	div#brandList ul li p.text{
		margin: 0 0 10px;
	}
	
	div#brandList ul li p.link{
		text-align: right;
	}
}