/*===============================

	[ VOM Top ]
	
	Update 2013/04/15
	@ Sony Marketing(Japan) Inc
	
===============================*/

/******************* .mod-heading *******************/
.mod-subTitle {
	font-size: 1.53846em;
	line-height: 1.2;
	clear: both;
	padding: 9px 9px 9px 15px;
	margin: 30px 0 10px;
	background: #ddd url(../../../share2/images/mod-subTitle/bg_01.png) repeat-x 0 100%;
*zoom:1
}
.mod-subTitle:after {
	content: '';
	display: block;
	clear: both;
	height: 0
}
.mod-subTitle h2 {
	font-size: 100%;
	font-weight: normal;
	float: left;
	margin: 0
}
h2.soH2Title {
	margin:0;
	padding: 5px 18px 5px;
	background: #eaeaea;
	font-size: 120%;
}
@media (max-width: 640px) {
	.mod-subTitle h2 {
		font-weight: normal
	}
	.ttlvom{
		width:auto;
		height:auto;
		margin:0 auto;
	}
	.ttlvom img{
		display:block;
		max-width: 100%;
		width:auto;
		height:auto;
		margin:0 auto;
	}

}

/******************* .mod-brandTopImage *******************/
.mod-brandTopImage {
	clear: both;
	overflow: hidden;
*zoom:1;
	width: 950px;
	margin: 10px auto;
	margin-top: 0
}
.mod-brandTopImage img {
	display: block;
	-webkit-transition: opacity 0.2s ease-in;
	-moz-transition: opacity 0.2s ease-in;
	-ms-transition: opacity 0.2s ease-in;
	-o-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in
}
.mod-brandTopImage a:hover img {
	opacity: .5
}
.mod-brandTopImage .mod-brandTopImage-main {
	float: left
}

.mainImageWrap{
	overflow:hidden;
}

@media (max-width: 640px) {
	.mod-brandTopImage {
		width: auto;
		margin: 10px 10px 30px
	}
	.mod-brandTopImage a {
		text-decoration: none
	}
	.mod-brandTopImage a:hover img {
		opacity: 1
	}
	.mod-brandTopImage .mod-brandTopImage-main {
		float: none;
		position: relative
	}
	.mod-brandTopImage .mod-brandTopImage-main img {
		width: 100%;
		height: auto
	}
	
	.mainImageWrap{
		width:auto;
		overflow:hidden;
	}
	.mainImageWrap img{
		display:block;
		max-width: 100%;
		height:auto;
	}
	
}
/******************* コンテンツ部分.mod-mainContentContainer *******************/

.mod-mainContentContainer {
	clear: both;
	position: relative;
	max-width: 950px;
	margin: 0 auto;
	padding-bottom: 20px;
*zoom:1
}
.mod-mainContentContainer:after {
	content: '';
	display: block;
	clear: both;
	height: 0
}
.mod-mainContentContainer.ex-mainContentContainer-hasCategoryNav {
	padding-top: 60px
}
.mod-mainContentContainer .mod-categoryNav {
	position: absolute;
	top: 0;
	left: 0;
	_left: 50%;
	_margin-left: -475px
}
@media (max-width: 640px) {
	.mod-mainContentContainer {
		position: static;
		max-width: 640px;
		min-width: 300px;
		width: auto;
		_width: 300px;
		padding: 0 10px
	}
	.mod-mainContentContainer.ex-mainContentContainer-hasCategoryNav {
		padding-top: 0
	}
	.mod-mainContentContainer .mod-categoryNav {
		position: static;
		margin: 0
	}
}

.mod-column2 {
	clear: both;
	width: 950px;
	margin: 0 auto
}
.mod-column2 .mod-column2-main {
	width: 950px;
	font-SIZE:120%;
}
@media (max-width: 640px) {
	.mod-column2 {
		width: auto;
		margin: 10px auto 0;
	*zoom:1
	}
	.mod-column2:after {
		content: '';
		display: block;
		clear: both;
		height: 0
	}
	.mod-column2 .mod-column2-main {
		clear: both;
		float: none;
		width: auto;
		padding: 0;
		margin: 0 auto 20px
	}
	.mod-column2 .mod-column2-extra {
		clear: both;
		float: none;
		width: auto;
		margin: 0 auto 20px
	}
}

/*******************  Vom box VAIOオーナーメードモデルだけの手厚い保証 *******************/

section div.vomBoxWrap{
	margin:0 auto 40px;
	overflow:hidden;
}

.aboutVom{
	width:880px;
	margin:20px auto 40px;
}

.aboutVomPhoto{
	width:716px;
	margin:0 auto 60px;
}

@media (max-width: 640px) {
	section div.vomBoxWrap{
		margin:0 auto 40px;
		overflow:hidden;
	}
	
	.aboutVom{
		width:auto;
		margin:20px auto;
	}
	
	.aboutVomPhoto{
		width:auto;
		margin:20px auto;
	}
	.aboutVomPhoto img{
		display:block;
		max-width:100%;
		max-height:100%;
		width:auto;
		height:auto;
		margin:20px auto;
	}

}

.boxLeft{
	float:left;
	width:430px;
	margin:0 0 0 30px;
	padding:0;
}

.boxRight{
	float:right;
	width:430px;
	margin:0 30px 0 0;
	padding:0;
}
@media (max-width: 640px) {
	.boxLeft{
		float:none;
		width:auto;
		margin:20px auto;
	}
	
	.boxRight{
		float:none;
		width:auto;
		margin:20px auto;
	}
}
h3.iconTitle01{
	margin:10px 0 0;
	padding:12px 0 12px 42px;
	border-bottom:dotted 1px #000;
	background:url(../images/vom_index04.jpg) no-repeat left 50%;
	font-size:95%;
}

h3.iconTitle02{
	margin:10px 0 0;
	padding:12px 0 12px 42px;
	border-bottom:dotted 1px #000;
	background:url(../images/vom_index05.jpg) no-repeat left 50%;
	font-size:95%;
}


h3.iconTitle03{
	margin:10px 0 0;
	padding:12px 0 12px 42px;
	border-bottom:dotted 1px #000;
	background:url(../images/vom_index06.jpg) no-repeat left 50%;
	font-size:95%;
}


h3.iconTitle04{
	margin:10px 0 0;
	padding:12px 0 12px 42px;
	border-bottom:dotted 1px #000;
	background:url(../images/vom_index07.jpg) no-repeat left 50%;
	font-size:95%;
}

.come{
	font-size:70%;
	color:#999;
}

.arrowLink a {
	background: transparent url(/vaio/share/images/products/tmp/arrow_black_bggray.gif) no-repeat scroll 0 0.4em;
	padding: 0 0 0 10px;
}

.textLeft{
	float:left;
	width:184px;
}

.sheet{
	float:right;
	width:220px;
	margin:10px 0 0;
}
@media (max-width: 640px) {
	.textLeft{
		float:none;
		width:auto;
	}
	
	.sheet{
		float:none;
		width:auto;
		margin:10px 0 0;
	}
	.sheet img{
		display:block;
		max-width:100%;
		max-height:100%;
		width:auto;
		height:auto;
		margin:20px auto;
	}

}

.boxRightWrap{
	overflow:hidden;
}

.lineupWrap{
	width:890px;
	margin:10px auto;
	overflow:hidden;
}

.lineupbox{
	float:left;
	width:213px; 
	height:290px; 
	margin:0 10px 0 0;
	border:solid 1px #ccc; 
}

.lineupboxLast{
	float:left;
	width:213px; 
	height:290px; 
	margin:0;
	border:solid 1px #ccc; 
}

.lineupPhoto{
	width:213px;
	height:161px;
	margin:0;
}
@media (max-width: 640px) {
	.lineupWrap{
		width:auto;
		margin:10px auto;
		overflow:hidden;
	}
	
	.lineupbox{
		float:none;
		width:auto;
		height:auto; 
		margin:0 auto 10px;
		border:solid 1px #ccc; 
	}
	
	.lineupboxLast{
		float:none;
		width:auto;
		height:auto; 
		margin:0 auto 10px;
		border:solid 1px #ccc; 
	}
	
	.lineupPhoto{
		width:auto;
		margin:30px 0;
	}
	.lineupPhoto img{
		display:block;
		width:auto;
		height:auto;
		margin:0 auto;
	}

}

.lineupName{
	height:25px;
	margin:0;
	padding:0;
	font-size:120%;
	text-align:center;
}

.size{
	height:15px;
	margin:0 0 9px;
	font-size:70%;
	text-align:center;
}

.coloBox{
	height:21px;
	width:200px;
	margin:0 auto;
	padding:0;
	overflow:hidden;
}

.coloBox .colorLeft{
	float:left;
	width:38px;
	margin:0;
	padding:3px 0 0;
	font-size:75%;
}

.coloBox .colorRight{
	float:right;
	width:153px;
}
@media (max-width: 640px) {
	.size{
		margin:0 0 10px;
		font-size:70%;
		text-align:center;
	}
	.coloBox{
		width:170px;
		margin:0 auto 20px;
		padding:0;
		overflow:hidden;
	}
	
	.coloBox .colorLeft{
		float:left;
		width:30%;
		margin:0;
		padding:3px 0 0;
		font-size:75%;
	}
	
	.coloBox .colorRight{
		float:right;
		width:60%;
	}
}

.btnbox{
	height:40px;
	margin:1px 2px 2px;
	padding:6px 0 10px;
	background:#f1f1f1;
	text-align:center;
}

.specBtn{
	width:450px;
	margin:25px auto 15px;
}

@media (max-width: 640px) {
	.specBtn{
		width:auto;
		margin:0 auto 30px;
	}
	.specBtn img{
		display:block;
		max-width:100%;
		max-height:100%;
		width:auto;
		height:auto;
		margin:0 auto;
	}
}

.vomShopWrap{
	width:890px;
	margin:0 auto 40px;
	overflow:hidden;
}

h3.shop1{
	margin:10px 0 0;
	padding:12px 0 12px 0;
	border-bottom:dotted 1px #000;
	font-size:95%;
}
h3.shop2{
	margin:10px 0 0;
	padding:0 0 3px;
	border-bottom:dotted 1px #000;
	font-size:95%;
}
h3.shop2 span{
	font-size:80%;
}

.shopBox{
	float:left;
	width:275px;
	margin:0 30px 0 0;
	padding:0;
}

.last{
	margin:0!important;
}

@media (max-width: 640px) {
	.vomShopWrap{
		width:auto;
		margin:0 auto;
		overflow:hidden;
	}
	
	h3.shop1{
		margin:10px 0 0;
		padding:12px 0 12px 0;
		border-bottom:dotted 1px #000;
		font-size:95%;
	}
	h3.shop2{
		margin:10px 0 0;
		padding:0 0 3px;
		border-bottom:dotted 1px #000;
		font-size:95%;
	}
	h3.shop2 span{
		font-size:80%;
	}
	
	.shopBox{
		float:none;
		width:auto;
		margin:0 auto;
		padding:0;
	}
	
	.last{
		margin:0!important;
	}
}

span.mod-iconNewWin {
	display: inline-block;
	vertical-align: baseline;
	width: 11px;
	height: 0;
	padding: 9px 0 0;
	overflow: hidden;
	background: url(../../../share2/images/mod-iconNewWin/ico_01.png);
}

.shopsearch{
	position:relative;
	width:890px;
	height:100px;
	margin:0 auto 40px;
	background: url(../images/vom_index24.jpg) no-repeat left top;
}

.searchBnr{
	position:absolute;
	width:348px;
	height:53px;
	left:460px;
	top:24px;
}

.shopsearchSmp{
	display:none;
}

.searchBnrSmp{
	display:none;
}

.shopsearch{
	display:block;
}
.searchBnr{
	display:block;
}

@media (max-width: 640px) {
	span.mod-iconNewWin {
		display: inline-block;
		vertical-align: baseline;
		width: 11px;
		height: 0;
		padding: 9px 0 0;
		overflow: hidden;
		background: url(../../../share2/images/mod-iconNewWin/ico_01.png);
	}
	
	.shopsearch{
		display:none;
	}
	
	.searchBnr{
		display:none;
	}
	.shopsearchSmp{
		display:block;
		width:auto;
		height:auto;
		marign:0 auto 30px;
	}
	
	.searchBnrSmp{
		display:block;
		width:auto;
		height:auto;
		marign:0 auto;
	}
	.searchBnrSmp img{
		display:block;
		max-width:100%;
		max-height:100%;
		width:auto;
		height:auto;
		marign:0 auto;
	}

}


.storebnr{
	width:680px;
	height:90px;
	margin:0 auto 70px;
}
.redbnr{
	width:680px;
	height:90px;
	margin:0 auto 70px;
}
@media (max-width: 640px) {
	.storebnr{
		display:block;
		width:auto;
		height:auto;
		marign:0 auto;
	}
	.storebnr img{
		display:block;
		max-width:100%;
		max-height:100%;
		width:auto;
		height:auto;
		marign:0 auto;
	}
	.redbnr{
		display:block;
		width:auto;
		height:auto;
		marign:0 auto;
	}
	.redbnr img{
		display:block;
		max-width:100%;
		max-height:100%;
		width:auto;
		height:auto;
		marign:0 auto;
	}
}
