@charset 'UTF-8';

#sidebar dl dd li.history > a {color:#004097; font-weight:bold;}

#main > h1 {margin-bottom:0; border-bottom:none;}

#index {margin:-20px 0 0 -20px; letter-spacing:-0.4em;}
#index > div {display:inline-block; width:310px; margin:20px 0 0 20px; padding:19px; border:1px solid #e9e9e9; text-align:center; letter-spacing:normal; vertical-align:top;}
#index > div > a {display:block; margin:-19px; padding:19px; text-decoration:none;}
#index > div .image {position:relative; margin:-19px -19px 0; overflow:hidden;}
#index > div .image:after {
	display:block; content:""; width:38px; height:20px; position:absolute; left:50%; bottom:0; margin:0 0 0 -19px; background:url(../../images/index_image_ornament.png) no-repeat;}
#index > div .image > img {display:block; width:350px; max-width:none; height:160px;}
#index > div .image > img.pc {}
#index > div .image > img.sp {display:none;}
#index > div b {display:block; margin:18px 0 0; color:#014099; font-size:100%; font-weight:bold;}
#index > div#brand_concept {width:680px;}
#index > div#brand_concept .image > img {width:720px; height:220px;}
#index > div > a:hover > .image > img {opacity:0.8;}
#index > div > a:hover > b {color:#3466ad;}


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

#main > h1 {padding-top:0; border-top:0; font-size:17px; text-align:center;}

#index {margin:-10px 0 0;}
#index > div {display:block; width:auto; margin:10px 0 0; padding:9px;}
#index > div > a {margin:-9px; padding:9px;}
#index > div .image {margin:-9px -9px 0;}
#index > div .image:after {width:19px; height:10px; margin-left:-10px; background-size:contain;}
#index > div .image > img {width:100%; height:auto;}
#index > div .image > img.pc {display:none;}
#index > div .image > img.sp {display:block;}
#index > div b {font-size:14px;}
#index > div#brand_concept {width:auto;}
#index > div#brand_concept .image > img {width:100%; height:auto;}
#index > div > a:hover > .image > img {}
#index > div > a:hover > b {}

}

/*トレビーノの歴史 history.css*/
#main {
	overflow: hidden;
}
#historyBox h2 {
	width: 50%;
	margin-bottom: 5px;
	padding-bottom: 2px;
	font-weight: bold;
	font-size: 28px;
	color: #0092D8;
	border-bottom: 2px dashed #0092D8;
}
#historyBox #ttlCaption {
	margin-bottom: 20px;
	color: #004097;
}
#historyBox table {
	margin-top: 10px;
	margin-bottom: 20px;
	width:100%;
	border-collapse:collapse;
	border: 1px solid #54c3f1;
	border-spacing:0;
	empty-cells:show;
}
#historyBox table td{
	padding:8px 0;
	font-size:14px;
	text-align:center;
	vertical-align: middle;
	border-left:1px solid #54c3f1;
	border-bottom:1px solid #54c3f1;
}
#historyBox table td span {
	font-size: 16px;
	font-weight: bold;
	color: #004097;
}
#historyBox table td.year{
	width:15%;
	background-color: #e6e6e6;
	font-weight: bold;
}
#historyBox table td.p-img{
	width: 25%;
}
#historyBox table td.p-img p{
	float: left;
	margin:0 auto;
	line-height: 50px;
	width: 50%;
}
#historyBox table td.p-img p:last-child {
	font-weight: bold;
}
#historyBox table td.desc{
	background-color: #d3edfB
}
.exBox {
	float: left;
	width: 48%;
	margin: 0 4% 20px 0;
}
.exBox:last-child {
	float: right;
	margin-right: 0;
}
.exBox h3 {
	width: 100%;
	margin-bottom: 10px;
	padding: 5px 0;
	text-align: center;
	font-weight: bold;
	color: #0092D8;
	border-radius: 5px;
	border: 1px solid #0092D8;
	box-sizing: border-box;
}
.exBox #attentionList {
	list-style: disc;
	margin: 0 0 10px 15px;
}
.exBox #attentionList li span {
	font-weight: bold;
	color: #004097;
}
.exBox div {
	overflow: hidden;
	margin-bottom: 10px;
}
.exBox div img {
	float: left;
}
.exBox div dl {
	width: 70%;
	float: right;
}
.exBox div dl dt {
	font-weight: bold;
	color: #004097;
}

@media screen and (max-width: 599px) {
	#historyBox h2 {
		width: 100%;
		font-size: 24px;
	}
	#historyBox table td{
		font-size: 12px;
	}
	#historyBox table td.year{
		width:15%;
	}
	#historyBox table td.p-img{
		width: 38%;
	}
	.exBox {
		float: none;
		width: 100%;
		margin-right: 0;
	}
	.exBox:last-child {
		float: none;
	}
}