@charset "shift_jis";

img {
	vertical-align:bottom;
}


#contentsArea {
	width:880px;
	margin:30px auto 50px auto;
	padding:0px;
	font-size:14px;
	overflow:hidden;
}

.bg-Gray {
	background:#f0f0f0;
	padding:5px 10px;
	margin-bottom:10px;
	font-size:16px;
}

.txtLine {
	margin:0 5px 3px 5px;
	vertical-align:middle;
}


/* mainArea */
#mainArea {
	text-align:center;
}

/* cableArea */
ul.cableArea {
	margin:0px;
	padding:0px;
	list-style:none;
}
ul.cableArea li.txt {
	width:400px;
	float:left;
}
ul.cableArea li.img {
	width:425px;
	float: right;
}


/* grayArea */
.grayArea {
	background:#f0f0f0;
	margin:15px 0 0 0;
	padding:15px;
	clear:both;
}
.grayArea ul.hdmiArea {
	margin:10px 0 0 0;
	padding:0px;
	list-style:none;
}
.grayArea ul.hdmiArea li.left {
	width:385px;
	float:left;
}
.grayArea ul.hdmiArea li.right {
	width:400px;
	float: right;
}
.grayArea ul.hdmiArea .hdmi-img {
	float:left;
	margin:0 10px 0 20px;
}

/* tv-img */
.tv-img {
	margin-top:15px;
	text-align:center;
}

/* selectArea */
ul.selectArea {
	margin:0;
	padding:0px;
	list-style:none;
}
ul.selectArea li.txt {
	width:500px;
	float:left;
}
ul.selectArea li.img {
	width:321px;
	float: right;
}

/* howtoArea */
ul.howtoArea {
	width:600px;
	margin:10px auto 0 auto;
	padding:0px;
	list-style:none;
}
ul.howtoArea li.left {
	width:280px;
	float:left;
}
ul.howtoArea li.right {
	width:280px;
	float: right;
	text-align:right;
}

/*===========================================
	lineArea
=============================================*/
.lineArea {
	border:#CCCCCC 1px solid;
	padding: 15px;
	clear:both;
}


/*===========================================
	pointArea
=============================================*/
div.pointArea {
	background:url(../images/ico_point.png) no-repeat 15px 15px;
	background-color:#F4F3ED;
	margin: 30px 0 0 0;
	padding: 15px 15px 15px 65px;
	clear:both;
}

/*===========================================
	num
=============================================*/
.num_01 {
	background:url(../images/num_01.png) no-repeat;
	margin:15px 0 0 0;
	padding:0 0 3px 35px;
}
.num_02 {
	background:url(../images/num_02.png) no-repeat;
	margin:30px 0 0 0;
	padding:3px 0 3px 35px;
	clear:both;
}

/*===========================================
	braviaArea
=============================================*/
ul.braviaArea {
	width:890px;
	overflow:hidden;
	background:#EDEDED;
	margin: 0;
	padding: 0 10px 10px 10px;
	list-style:none;
}
ul.braviaArea li {
	width:280px;
	margin: 10px 10px 0 0;
	padding: 0;
	float:left;
	text-align:center;
	background-color:#FFFFFF;
}
ul.braviaArea li dt {
	float:left;
	margin:0 5px 10px 13px;
}
span.mod-storeLink a {
    padding: 8px 15px 4px 24px !important;
}
.mod-button {
    background-color: #f2f2f2 !important;
    background-image: url("/share3/images/mod-button/ico_01.png"), linear-gradient(to bottom, whitesmoke 0%, #efefef 100%);
	background-position: 10px 48%;
	padding: 0.3em 10px 0.3em 20px;
    background-repeat: no-repeat, repeat-x;
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    font-size: 13px;
    text-decoration: none;
}
.mod-button:hover {
    background-image: url("/share3/images/mod-button/ico_01_on.png"), linear-gradient(to bottom, #f8f8f8 0%, whitesmoke 100%);
    background-size: auto auto, 100% auto;
	background-position: 10px 48%;
    color: #999999;
    text-decoration: none;
}

.pc-none {
	display:none;
}
.mq-none {
	display:block;
}



@media (max-width: 640px){

	#contentsArea {
		width: auto;
	}
	
	
	/* mainArea */
	#mainArea img {
		max-width:420px;
		width:100%;
		height:auto;
	}
	
	
	/* hdmi-img */
	.hdmi {
		text-align:center;
	}
	.hdmi img {
		max-width:425px;
		width:100%;
		height:auto;
	}
	
	/* grayArea */
	.grayArea ul.hdmiArea li.left {
		width: auto;
		float: none;
		text-align:center;
	}
	.grayArea ul.hdmiArea li.right {
		width: auto;
		float: none;
		text-align:center;
		margin-top:15px;
	}
	.grayArea ul.hdmiArea .hdmi-img {
		float: none;
		margin:0;
		text-align:center;
	}
	
	
	/* tv-img */
	.tv-img img {
		max-width:595px;
		width:100%;
		height:auto;
	}
	
	
	/* selectArea */
	ul.selectArea li.txt {
		width: auto;
		float: none;
	}
	ul.selectArea li.img {
		width: auto;
		float: none;
		margin-top:10px;
		text-align:center;
	}
	ul.selectArea li.img img {
		max-width:321px;
		width:100%;
		height:auto;
	}
	

	/* howtoArea */
	ul.howtoArea {
		width: auto;
	}
	ul.howtoArea li.left {
		width: auto;
		float: none;
		text-align: center;
	}
	ul.howtoArea li.right {
		width: auto;
		float: none;
		text-align: center;
		margin-top:15px;
	}
	

	/*===========================================
		braviaArea
	=============================================*/
	ul.braviaArea {
		width: auto;
	}
	ul.braviaArea li {
		width: auto;
		margin: 10px 0px 0 0;
		padding:10px 0;
		float: none;
	}
	ul.braviaArea li div img {
		max-width:280px;
		width:100%;
		height:auto;
	}
	ul.braviaArea li dl {
		width:100%;
		display:table;
		margin-top:5px;
	}
	ul.braviaArea li dt {
		display:table-cell;
		vertical-align:top;
		float:none !important;
		width:40%;
		margin:0 0 10px 0;
		padding:0 3px;
	}
	ul.braviaArea li dd {
		display:table-cell;
		vertical-align:top;
		float:none !important;
		width:48%;
		margin:0 0 10px 0;
		padding:0 3px;
	}
	
	.pc-none {
		display:block;
	}
	.mq-none {
		display:none;
	}

}

/*===========================================
	ul.grayArea_inner
=============================================*/

.grayArea ul.grayArea_inner {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	box-sizing: border-box;
	list-style: none;
	margin: 0 -15px;
	zoom: 1;
}

ul.grayArea_inner li {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
	padding: 0 15px;
}
ul.grayArea_inner li.one-half {
	width: 50%;
}
ul.grayArea_inner li.one-third {
	width: 33.33333333%;
}
ul.grayArea_inner li.two-thirds {
	width: 66.66666667%;
}

li.one-half .img_area {
	text-align: center;
}
.img_area.w-120 {
	width: 120px;
}
.txtlink.product_ttl {
	min-height: 65px;
}

/* In the case of two rows */
li.one-half .img_area,
li.one-half .txt_area {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
}
li.one-half .txt_area {
	padding-left: 20px;
}
@media screen and (max-width: 640px) {
	ul.grayArea_inner li.one-half {
		float: none;
		padding-bottom: 15px;
		padding-top: 15px;
		width: auto;
	}
	
	li.one-half .img_area {
		margin-bottom: 10px;
	}
	.img_area.w-120 {
		margin: 0 auto;
	}
}
@media screen and (max-width: 320px) {
	li.one-half .txt_area {
		padding: 0;
	}
}
/* In the case of two rows */

/* clear */
.grayArea ul.grayArea_inner:before,
ul.grayArea_inner li:before,
.grayArea ul.grayArea_inner:after,
ul.grayArea_inner li:after {
	display: table;
	line-height: 0;
	content: "";
}
.grayArea ul.grayArea_inner:after,
ul.grayArea_inner li:after {
	clear: both;
}
/* clear */


/* 20200114 */

#contents div.btnArea{
	margin: 4em 0;
}

/* 内部リンクボタン */
#contents div.btnArea ul{
	list-style:none;
	margin-left: 0;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
}

#contents div.btnArea ul.two_btn > li{
	width: 49%;
	margin: 4px 2px 4px 0;
}

#contents div.btnArea ul li a{
	display: block;
	vertical-align:middle;
	background: url(/support/share/images/bg_mod-linkButton.jpg) repeat-x scroll left center;
	border: solid 1px #CCCCCC;
	border-radius: 5px;
	color: #000;
	padding: 1em;
}

#contents div.btnArea ul li a span{
	background: url(/support/share/images/arrow_underline.gif) no-repeat 0 0.5em;
	font-weight:700;
	padding: 0 0 0 15px;
}

#contents div.btnArea ul li a.otherLink span{
	background: url(/support/share/images/arrow_black.gif) no-repeat 0 0.5em;
}

#contents div.btnArea ul li a:hover,
#contents div.btnArea ul li a:active,
#contents div.btnArea ul li a:focus{
	text-decoration:none;
	color:#000;
	opacity:0.7;
}
#contents div.btnArea ul li a:focus{
	outline: thin dotted;
}

@media screen and (max-width: 640px){
	#contents div.btnArea ul.two_btn > li{
		width: 48%;
		margin: 4px 2px 4px 0;
	}
}



@media screen and (max-width: 480px){
	#contents div.btnArea ul.two_btn{
		margin-left: 0;
		flex-direction: column;
		flex-wrap: nowrap;
	}
	
	#contents div.btnArea ul.two_btn > li{
		width: 100%;
	}
}