@charset "shift-jis";
/*=========================================================

	Site Name   SONY hdd
	File Name   /rec-media/hdd/share/css/common-share4.css

	Create Date 2014/8/20
==========================================================*/

/*=========================================================
  01 > common
  02 > module box
  03 > module heading
  04 > module button
  05 > module nav
  06 > module list
  101 > mediaQuery > min-width:641px
  201 > mediaQuery > max-width:640px > common
  202 > mediaQuery > max-width:640px > module box
  203 > mediaQuery > max-width:640px > module heading
  204 > mediaQuery > max-width:640px > module button
  205 > mediaQuery > max-width:640px > module list
==========================================================*/


/*----------------------------------------------------------
	01 > common
-----------------------------------------------------------*/
p {
    margin: 0 0 0.8em;
}
li {
    margin: 0 0 0.3em;
}

li a:hover {color: #c41230 !important;}
li a:hover .item_name h3,
li a:hover .item_name .detail {text-decoration: underline;}

.pc{
	display:block !important;
}
.sp{
	display:none !important;
}

.line_dot {border-bottom: 1px dotted #ccc !important;}

.reco {margin:51px 0 0 !important}

.news {margin:39px 0 21px !important}

.whatsnew {margin:38px 0 21px !important}

.nob {border: none !important;}

.top_news_link a,
li a,
li a .mod-button,
.mod-categoryHeader-content h1 a,
td .img_sam a:hover .mod-button {
 	-webkit-transition: color 0.3s ease-in !important;
	-moz-transition: color 0.3s ease-in !important;
	-ms-transition: color 0.3s ease-in !important;
	-o-transition: color 0.3s ease-in !important;
	transition: color 0.3s ease-in !important;
}

.mod-sideLinks1-item a img,
.img_sam a img,
a .img_sam img,
.banner_area a img,
.mod-list-w200 a img,
a .fadeImg {
	-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,
.mod-sideLinks1-item a:hover img,
.img_sam a:hover img,
a:hover .img_sam img,
.banner_area a:hover img,
.mod-list-w200 a:hover img,
a:hover .fadeImg {
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
}

.mod-contentContainer span.mod-iconNewWin {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: top;
  width: 11px;
  height: 0;
  padding: 9px 0 0;
  margin:6px 0 0 5px;
  overflow: hidden;
  background: url(/share4/images/mod-iconNewWin/ico_01.png);
}

.mod-contentContainer a.mod-link,
.mod-contentContainer span.mod-link{
  color:#333;
  display:inline-block;
  padding-left:8px;
  background:url(/rec-media/hdd/share/images/ico_01.png) no-repeat 0 0.45em;
  -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-contentContainer a.mod-link:hover,
.mod-contentContainer a:hover span.mod-link{
  color:#333;
  text-decoration:none;
  opacity:.6;
}

.mod-linkFeed:hover {
	color: #E90 !important;
	text-decoration: none !important;
	opacity: 1 !important;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	zoom: 1;
}



/*----------------------------------------------------------
	02 > module box
-----------------------------------------------------------*/
.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-relatedLinks {
  padding-bottom: 50px;
}

.mod-brandTopImage {
  margin:10px auto !important;
}
.mod-brandTopImage img {
    display: block;
    transition: opacity 0.2s ease-in 0s;
}

.top_news_link {
	text-align: right;
	margin-top: 10px;
}

.mod-newsTable{
	font-size: 1.16667em;
	line-height: 1.5;
}
.mod-newsTable table{
  width:100%;
}
.mod-newsTable th,
.mod-newsTable td{
  vertical-align:top;
  text-align:left;
  padding:.4em 0;
}
.mod-newsTable th{
  font-weight:normal;
  white-space:nowrap;
  width:1%;
  min-width:120px;
  padding-right:1em;
}
.mod-newsTable td{
  word-wrap:break-word;
  word-break:break-all;
}
.mod-newsTable td a{
  display:inline-block;
  padding-left:10px;
  background:url(/rec-media/hdd/share/images/ico_01.png) no-repeat 0 0.35em;
}

.mod-column2{
  clear:both;
  width:950px;
  margin:0 auto;
}
.mod-column2-main {
	width:950px !important;
	overflow:hidden;
}
.mod-column2 .mod-column2-main{
  float:left;
  width:755px;
}

*html .mod-returnTop a { position: static;}
*html .mod-touchPoint-textItem { margin-left: 12px;}


.mod-sitemap {margin: 20px 0 10px -10px;}
.mod-sitemap:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
}
.mod-sitemap .mod-sitemap-column {
	float: left;
	margin: 0 0 20px 10px;
	padding-left: 6px;
	width: 304px;
	_width: 294px;
}


*+html .mod-sitemap-column h3 a,
*+html .mod-sitemap-column h3 {font-size: 14px;}
.mod-sitemap-column h3 a,
.mod-sitemap-column h3 {_font-size: 14px;}


.mod-heading2 {
	padding: 0 5px;
	border-bottom: 1px solid #ccc;
	margin: 24px 0 20px;
}
.mod-heading2 a {
	color: #000;
	-webkit-transition: color .2s ease;
	-moz-transition: color .2s ease;
	-ms-transition: color .2s ease;
	transition: color .2s ease;
	text-decoration: none;
}
.mod-heading2 a:hover {
	color: #c41230;
	text-decoration: underline;
	outline: 0;
}

.mod-sitemap h3 {margin: .5em 0 .5em;}
.mod-sitemap h4 {
	font-size: 100%;
	font-weight: normal;
	margin: .5em 0 .5em;
}
.mod-sitemap ul {
	margin: 0;
	padding: 0 0 .5em 10px;
	list-style: none;
}
.mod-sitemap ul li {
	padding-left: 8px;
	margin: 1em 0;
	background: url(/share4/images/mod-link/ico_01.png) no-repeat 0 0.45em;
}



/*----------------------------------------------------------
	03 > module heading
-----------------------------------------------------------*/
.mod-categoryHeader .mod-categoryHeader-logo h1 {
	display: inline-block;
	vertical-align: middle;
	margin: 0 5px 0 0;
	margin-right: 5px;
	font-weight: normal;
}
.mod-categoryHeader .mod-categoryHeader-logo h1 a {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5;
	color: #000;
	-webkit-transition: color 0.3s ease-in !important;
	-moz-transition: color 0.3s ease-in !important;
	-ms-transition: color 0.3s ease-in !important;
	-o-transition: color 0.3s ease-in !important;
	transition: color 0.3s ease-in !important;
}
.mod-categoryHeader .mod-categoryHeader-logo h1 a:hover {
	color: #c41230 !important;
	text-decoration: none !important;
}

.mod-heading {
  padding:0 5px;
  border-bottom:1px solid #ccc;
  margin:60px 0 30px;
  *zoom:1;
}
.mod-heading:after{
  content:'';
  display:block;
  clear:both;
  height:0;
}
.mod-heading:first-child{
  margin-top:0;
}
.mod-heading h2{
  font-size:1.38462em;
  font-weight:bold;
  float:left;
  margin:0;
}
.mod-heading ul.mod-heading-misc{
  font-size:0.92308em;
  margin:0;
  padding:.5em 0 0;
  list-style:none;
  float:right;
}
.mod-heading ul.mod-heading-misc li{
  display:inline-block;
  *display:inline;
  *zoom:1;
  margin-left:8px;
}
.mod-heading_start {
	margin: 0 !important;
}



/*----------------------------------------------------------
	04 > module button
-----------------------------------------------------------*/
.mod-button,
.mod-button:visited {
	display: inline-block !important;
	*display: block;
	*zoom: 1;
	*border: 1px solid #E4E4E4;
	*background:url("/rec-media/hdd/share/images/ico_01.png") no-repeat 20px 50% #F2F2F2!important;
	background-color:#F2F2F2\9;
}

.mod-button {
	display: inline-block !important;
	*display: inline !important;
	*zoom: 1;
	background-image: url("/share4/images/mod-button/ico_01.png");
	background-repeat: no-repeat !important;
	background-position/***/: 16px 48%\9 !important;
	background-color: #F5F5F5\9 !important;
}

.mod-button {
  background: url('/rec-media/hdd/share/images/ico_01_on.png')\9;
}


*+html .mod-button {display: inline !important;}
*html a:hover .mod-button { background-position:16px 48%; }


a:hover .mod-button {
  background-position-x/***/: -384px\9;
}


*+html .mod-seriesList a,
*+html .mod-seriesList a:hover {
	background-position: 20% 50%;
}


* html .mod-button,
* html .mod-seriesList a,
* html .mod-seriesList a:hover {
	background-position: 20% 50%;
}


li a:hover .mod-button {
  color: #999 !important;
  text-decoration: none !important;
}


td .img_sam a:hover .mod-button,
.item_list .other_item a:hover .mod-button {
	color: #999 !important;
}


div .mod-button:hover {
  color: #999 !important;
  text-decoration: none !important;
}



/*----------------------------------------------------------
	05 > module nav
-----------------------------------------------------------*/
.mod-categoryNav-main a:hover,
.mod-categoryNav-main a:active {
	color: #999 !important;
	text-decoration: none !important;
}

*html .mod-categoryNav-main { width: 100%;}



/*----------------------------------------------------------
	06 > module list
-----------------------------------------------------------*/
.mod-seriesList {
  clear: both;
  margin-top: 20px !important;
	margin-left:0 !important;
	margin-bottom:40px !important;
}

.mod-seriesList:after {
    clear: both;
    content: "";
    height: auto;
}

.mod-seriesList a,
.mod-seriesList a:hover,
.mod-seriesList a:visited{
  color:#333;
  text-decoration:none;
  cursor:pointer;
  display:block;
  *zoom:1;
}

.mod-list-w200 {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 980px;
	margin-right: -30px;
	overflow: hidden;
}
.mod-list-w200 li {
	float: left;
	width: 215px;
	margin-right: 30px;
	text-align: left;
	min-height: 250px;
	height: auto !important;
	height: 250px;
}
.mod-list-w200 li h3 {
	padding: 0;
	margin: 0 0 5px 0;
}

.item_list {
	margin: 0 0 20px 0;
	padding: 0;
}
.item_list li {
	list-style: none;
	margin: 0 0 40px 0;
	text-align: center;
	float: left;
	border-left: 1px dotted #929393; height: auto;
	}


.item_list li.item_01 {width: 470px}
.item_list li.item_02 {width: 470px; margin-left:5px; border-right: 1px dotted rgb(146, 147, 147);height: auto;}



.img_sam{
	float:left;
}
.item_name{
	text-align:left;
}
.mod-button{
	float:left;
	margin-left: 5px;
}

@media (max-width:640px){
.img_sam{
	float:none;
}
.item_name{
	text-align:center;
}
.mod-button{
	float:none;
}
}



.item_name {
    min-height: 110px;
	_height: 110px;
    padding: 5px 10px;
}
.item_name p {
  font-size: 11px;
  margin: 0;
}
.item_name h3 {
    font-size: 18px;
    margin: 0px 0 15px 0;
    font-weight: bold;
    line-height: 1.2em;
}

.item_name h3 img {margin-left: 5px;}
.item_name .detail {font-size: 16px;text-align: left;}

.other_item {width: 215px; display: block; margin: 0 auto; max-width: 215px; margin-right: 30px!important; border:none!important;}
.other_item p {font-size: 12px; text-align: left; margin-bottom: 20px;}
.other_item h3 {font-size: 20px; text-align: left; margin-bottom: 0px;}

.other_item .img_sam {
	width: 215px;
	height: 130px !important;
}
.other_item .img_sam div img {
  width: 215px;
}

.item_04.other_item {margin-right: 0px !important;}

.tag_list {
	width:215px;
	margin:0 0 0 15px;
	padding: 0;
	min-height: 40px;
	_height: 40px;
	margin-bottom: 19px;
}
.tag_list li {
	list-style: none;
	margin: 0 10px 5px 0;
	padding: 0;
	text-align: center;
	height: 19px;
	float: left;
    border: none;
}
.tag_list li.mr0 {margin-right:0px; !important;}






.mod-lineupItem h3{
	font-size:2em;
	color:#444;
	padding:0;
	margin:0;
}



@media (min-width:641px){
/*----------------------------------------------------------
	101 > mediaQuery > min-width:641px
-----------------------------------------------------------*/
	.mod-newsTable td{width:622px;}
}



@media (max-width:640px){
/*----------------------------------------------------------
	201 > mediaQuery > max-width:640px > common
-----------------------------------------------------------*/
	.pc{
		display:none!important;
	}

	.sp{
		display:block !important;
		width:auto !important;
		height:auto !important;
		margin-top: 20px;
	}

	.sp img{
		max-width:100% !important;
		width:auto !important;
		height:auto !important;
	}
	.sp img {
		max-width: 100% !important;
		width: auto !important;
		height: auto !important;
	}



  .mod-contentContainer a.mod-link,
  .mod-contentContainer span.mod-link{font-size:16px;padding-left:12px;background:url(/rec-media/hdd/share/images/ico_02.png) no-repeat 0 0.42em}

  .mod-contentContainer span.mod-iconNewWin {
    width: 22px;
    height: 0;
    padding: 19px 0 0;
    margin:0px 0 0 5px;
    overflow: hidden;
    background-position: -11px 0;
  }



/*----------------------------------------------------------
	202 > mediaQuery > max-width:640px > module box
-----------------------------------------------------------*/
  .mod-mainContentContainer{
    position:static;
    max-width:640px;
    min-width:300px;
    width:auto;
    _width:300px;
    /*padding:0 10px;*/
	}

  .mod-column2-main {
  	width:100% !important;
	}

	.mod-brandTopImage {
		padding: 0 10px;
		margin:10px auto 40px auto !important;
	}
	.mod-brandTopImage img,
	.banner_area a img {
		width: 100%;
		height: auto;
	}

  .mod-newsTable table{width:100%;display:block;}
  .mod-newsTable tr,.mod-newsTable th,.mod-newsTable td{float:left;clear:both;display:block;width:100%;padding:.2em 0}
  .mod-newsTable th{white-space:normal;margin-bottom:0}
  .mod-newsTable td{margin-bottom:.6em}
  .mod-newsTable td a{display:inline-block;padding-left:10px;background:url(/rec-media/hdd/share/images/ico_01.png) no-repeat 0 0.35em}

  .mod-column2-main {width:100% !important;} /* share3_fix/page.css */
  .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-sitemap {margin: 20px 0 10px 0px;}
  .mod-sitemap .mod-sitemap-column {
	float: none;
	width: auto;
	margin: 20px 0 0;
	padding-left: 0px;
  }
  .mod-heading2 {
  	margin: 20px 0 10px;
  	padding: 0 5px;
  }

  .mod-sitemap h4 {
	font-size: 1.14286em;
	margin: .5em 0 .5em;
  }
  .mod-sitemap ul {
	margin: 0;
	padding: 0 0 1px 5px;
  }
  .mod-sitemap ul li {
	font-size: 1.14286em;
	line-height: 1.2;
	padding-left: 20px;
	margin: 1em 0 .5em;
	background: url(/rec-media/hdd/share/images/ico_02.png) no-repeat 0 0.4em;
  }

	.mod-seriesList{
    margin-bottom: 0 !important;
	}
	

/*----------------------------------------------------------
	203 > mediaQuery > max-width:640px > module heading
-----------------------------------------------------------*/
  .mod-categoryHeader {
		padding: 16px 0;
		width: auto;
		text-align: center;
  }
  .mod-categoryHeader-title {font-size: 1.55555em;}

  .mod-heading {
    margin:30px 0 10px;
  }
  .mod-heading h2{
    font-size:1.38462em;
    float:none;
    margin-bottom:.3em;
  }
  .mod-heading ul.mod-heading-misc {
    padding:0;
    float:none;
  }
  .mod-heading ul.mod-heading-misc li {
    margin:0 10px 3px 0;
  }
  .mod-itemLogo h2.mod-il_heading {
  	float: none;
  	margin-bottom: .6em;
  	padding: 0 5px;
	border-bottom: 1px solid #ccc;
  }



/*----------------------------------------------------------
	204 > mediaQuery > max-width:640px > module button
-----------------------------------------------------------*/
	.mod-button {
	  font-size: 14px !important;
	 }



/*----------------------------------------------------------
	205 > mediaQuery > max-width:640px > module list
-----------------------------------------------------------*/
	.item_name .detail {text-align: center;}
	
	.item_list li{
		border-left: none;
		text-align:center;
	}

	.item_list li.item_01,
	.item_list li.item_02 {
		float: none;
		width: 100%;
	}
	.item_list li.item_01,
	.item_list li.item_02{
		border-bottom: 1px dotted #ccc;
		padding-bottom: 20px;
		margin: 0;
	}

	.item_list li .img_sam {
		border: none !important;
		max-width: 70% !important;
		margin: 0 auto 0 auto !important; /*btm 5% */
		height: auto !important;
	}
	.item_list li .img_sam img {
		width: 100% !important;
	}

	.item_list li .item_name {
		min-height: 100% !important;
		margin-bottom:2% !important;
	}
	

	
	.mod-list-w200 {
		list-style: none;
		padding: 0;
		margin: 0;
		width: 100%;
	}
	.mod-list-w200 li {
		float: none;
		width: 100%;
		margin-right: 0px;
		margin-bottom: 20px;
		min-height:inherit;		
	}
	.mod-list-w200 li a:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.mod-list-w200 li a {
		zoom: 1;
	}
	.mod-list-w200 li a {text-align: center;}
	.mod-list-w200 li a img {width: 40%; float: left; margin-right: 2%;}
	.mod-list-w200 li a div{width: 58%; float: right;}
	.mod-list-w200 li h3,
	.mod-list-w200 li p {text-align: left;}
	.mod-list-w200 li h3, {
		padding: 0;
		margin: 0 0 5px 0;
	}
	.mod-list-w200 li p {color: #666;}
	.mod-list-w200 li a:hover {text-decoration: underline !important;}
	
	.tag_list {
		width: 217px;
		text-align: center;
		margin: 0 auto;
		padding: 0;
		min-height: 100%;
		height: auto;
		margin-bottom: 19px;
	}
	.tag_list li {
		width: 33%;
		margin-right: 1px;
		height: auto;
		margin-bottom: 0px;
		vertical-align: bottom;
		height: 20px;
	}
	
	.tag_list li.mr0 {margin-right: 0 !important;}

	.other_item {
		width: 100%;
		max-width: 100%;
		display: block;
		border-bottom: none !important;
		padding-bottom: 0 !important;
		zoom: 1;
	}
	.other_item:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.other_item .img_sam {
		width: 40%;
		float: left;
		margin-right: 2%;
		height: auto !important;
	}
	.other_item .img_sam img {
	  width: 100%;
	}
	.other_item .img_sam div img {
		width: 100%;
	}

	.other_item .item_name_other {
	  width: 58%;
	 float: right;
	 min-height: 100% !important;
	 margin-bottom: 10% !important;
	 }
	.other_item .item_name_other h3 {
	  margin-bottom: 2.5%;
	  margin-top: 0;
	 }
	.other_item .item_name_other p {
	  margin-bottom: 5%;
	 }

	.item_01.other_item,
	.item_02.other_item,
	.item_03.other_item,
	.item_04.other_item {
	  text-align: left;
	}

}