@charset "utf-8";
/* CSS Document */

#contents-area {
	width: 100%;
}

#main-contents {
	width: 100%;
	margin: 5px 0 0 0;
	padding: 0;
}

div.p-section-unit .c-image img{
	margin:0 auto;
	width: 100%;
	max-width: 280px;
	height: auto;
}

.swipe {
	display:none;
}

/*******************************************
テーブル
********************************************/

#table-section {
	clear: both;
	width: 100%;
	padding: 1.5% 0 2.5% 0;
	margin: 0 0 3.5% 0;
}
#table-section table {
	width: 100%;
	margin: 15px 0 12px 0;
	border-collapse: collapse;
	clear: both;
	color: #333;
	border: 1px solid #b7b7b7;
	table-layout: fixed;
}
#table-section table tr.list {
	border-bottom: 1px solid #b7b7b7;
}

/***********************************
■TH 縦
*************************************/

#table-section table th {
	margin: 0;
	color: #333;
	border: 1px solid #b7b7b7;
	background-color: #f5f5f5;
	vertical-align: middle;
	text-align: center;
	padding: 0.6em 0 0.35em;
	font-size: 123.1% !important;
	font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo;
}

#table-section table th span {
}

#table-section table th.main-cat {
	font-size: 108%;
	line-height: 0.9;
	text-align: center;
}
#table-section table th.main-cat img {
	display: block;
	margin:  0 auto;
}

#table-section table th span.cat {
	font-size: 100%;
	padding: 2.5% 0 0.75%;
	display: inline-block;
	font-weight: bold;
	margin: 0;
	line-height: 1.2;
	font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo;
}

#table-section table th span.mbps {
	font-size: 85%;
	display: inline-block;
	margin: 0 0 1.5% 0;
	font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo;
}

#table-section table th.type {
	width:100px;
	min-width:100px;
	line-height: 1.3;
	font-weight: bold;
}

#table-section table th.shiyo {
	width:100px;
	min-width:100px;
	line-height: 1.3;
	font-weight: bold;
}

#table-section table th.metal {
	color: #2176af;
	font-weight: bold;
	min-width:160px;
}

#table-section table th.pla {
	color: #2c803d;
	font-weight: bold;
	min-width:160px;
}
#table-section table th.metal span, #table-section table th.pla span {
	font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo;
}


#table-section table td {
	font-size: 100%;
	padding: 0.2em 0 0.2em;
	margin: 0;
	color: #333;
	vertical-align: top;
	background-color: #fff;
	table-layout: fixed;
	word-break: break-all;
	word-wrap: break-word;
	text-align: center;
	line-height: 1.3;
	border: #b7b7b7 solid 1px;
}

#table-section table td.port {
	vertical-align: middle;
	background-color: #FAFAFA;
	font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo;
}

#table-section table td.port em {
	font-weight: bold;
	font-size: 159.1%;
	line-height: 1;
}

#table-section table td.port span {
	font-size: 85%;
	line-height: 1;
}

#table-section table td.adapter {
	background-color: #FEFFD9;
	color: #343900;
	vertical-align: middle;
	font-size: 93%;
	font-weight: bold;
	font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo;
}

#table-section table td.naizo {
	background-color: #FFF5EE;
	color: #D64721;
	vertical-align: middle;
	font-weight: bold;
	font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo;
}

#table-section table td p {
	font-size: 93%;
	font-weight: bold;
	text-align: center;
	margin: 0.25em 0 0;
}

#table-section table td a p {
	display: inline-block;
}

#table-section table td div.list {
	padding: 0.75em 0;
	text-align: center;
}

#table-section table td div.list a img {
	border: 1px solid #CACACA;
	display: inline-block;
	margin: 0 0.05em;
}

#table-section table td div.list img {
	margin: 0;
	padding: 0;
	vertical-align: top;
}

#table-section table td div.list ul.icn-list {
	letter-spacing: -0.4em;
	margin: 0.1em auto 0;
	clear: both;
	text-align: left;
	width: 130px;
}

#table-section table td div.list ul.icn-list li {
	display: inline-block;
	letter-spacing: normal;
	width: 60px;
	padding: 0;
	margin: 0;
}

#table-section table td div.list ul.icn-list li img {
	margin: 0 0 0.15em 0;
}

#table-section table td a:link {
	color: #30659e;
	text-decoration: none;
}

#table-section table td a:hover {
	color: #30659e;
	text-decoration: underline;
	opacity: 0.6;
	filter: alpha(opacity=60);
}

#table-section table td a:visited {
	color: #30659e;
	text-decoration: none;
}

#table-list td a:link .img-box {
	opacity: 1;
	filter: alpha(opacity=100);
}

#table-list td a:visited .img-box {
	opacity: 1;
	filter: alpha(opacity=100);
}



/*****************************************************
H4 グループID ギガビット
******************************************************/

#product-list div {
}

/* #メタル*/
#product-list #giga-metal-ac,　#product-list #giga-metal-naizo {
	clear: both;
}
#product-list #giga-metal-ac h4,　#product-list #giga-metal-naizo h4 {
	color: #2176AF;
	clear: both;
}
#product-list #giga-metal-ac h4 span,　#product-list #giga-metal-naizo h4 span {
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: #2176AF;
}

/*プラスチック*/
#product-list #giga-pla-ac,　#product-list #giga-pla-naizo {
	clear: both;
}
#product-list #giga-pla-ac,　#product-list #giga-pla-naizo {
	color: #2C803D;
	clear: both;
}
#product-list #giga-pla-ac h4 span,　#product-list #giga-pla-naizo h4 span {
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: #2C803D;
}


/*****************************************************
H4 グループID 10/100
******************************************************/
#product-list div {
}

/* #メタル*/
#product-list #metal-ac,　#product-list #metal-naizo {
	clear: both;
}
#product-list #metal-ac h4,　#product-list #metal-naizo h4 {
	color: #2176AF;
	clear: both;
}
#product-list #metal-ac h4 span,　#product-list #metal-naizo h4 span {
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: #2176AF;
}

/*プラスチック*/
#product-list #pla-ac,　#product-list #pla-naizo {
	clear: both;
}
#product-list #pla-ac,　#product-list #pla-naizo {
	color: #2C803D;
	clear: both;
}
#product-list #pla-ac h4 span,　#product-list #pla-naizo h4 span {
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: #2C803D;
}



/* ## Tablet Style  ###################################################################################################### */
@media screen and (min-width: 500px) and (max-width: 799px) {

	/*******************************************************************
	テーブル
	********************************************************************/

	#table-section {
		clear: both;
		width: 100%;
		border-bottom-width: 1px;
		border-bottom-style: dotted;
		border-bottom-color: #838383;
		padding: 1.5% 0 2.5% 0;
		margin: 0 0 3.5% 0;

		/*
			display: block;
		*/
			overflow-x: scroll;
		/*
			white-space: nowrap;
			-webkit-overflow-scrolling: touch;
		*/
	}

	.swipe {
		display:block;
		margin: 20px auto 0;
		text-align: center;
	}

	/***********************************
	■#table-section table
	*************************************/

	#table-section table {
		width: auto;
		margin: 0 0 12px 0;
		border-collapse: collapse;
		clear: both;
		color: #333;
		border: 1px solid #b7b7b7;
	}
	#table-section table th.metal {
		width:200px;
	}
	#table-section table th.pla {
		width:200px;
	}

	#table-section table.floatyHead {
		width: 96%;
		border-collapse: collapse;
	}

	#table-section table tr.list {
		border-bottom: 1px solid #b7b7b7;
	}

	/***********************************
	■TH 縦
	*************************************/

	#table-section table th {
		margin: 0;
		color: #333;
		border: 1px solid #b7b7b7;
		background-color: #f5f5f5;
		vertical-align: middle;
		text-align: center;
		padding: 0.6em 0 0.35em;
	}
	#table-section table th span {
		}
	#table-section table th.main-cat {
		font-size: 108%;
		line-height: 0.9;
		text-align: center;
	}
	#table-section table th span.cat {
		font-size: 116%;
		padding: 2.5% 0 0.75%;
		display: inline-block;
		font-weight: bold;
		width: 100%;
		margin: 0;
	}
	#table-section table th span.mbps {
		font-size: 85%;
		display: inline-block;
	}
	#table-section table td {
		font-size: 100%;
		padding: 0.5em 0 0.5em;
		margin: 0;
		color: #333;
		vertical-align: top;
		background-color: #fff;
		table-layout: fixed;
		word-break: break-all;
		word-wrap: break-word;
		text-align: center;
		line-height: 1.3;
		border: #b7b7b7 solid 1px;
	}
	#table-section table td.port {
		line-height: 1.2;
		vertical-align: middle;
		background-color: #FAFAFA;
	}
	#table-section table td.port em {
		font-weight: bold;
		font-size: 159.1%;
	}
	#table-section tabletd.port span {
		font-size: 85%;
	}
	#table-section table td.adapter {
		background-color: #FEFFD9;
		color: #343900;
		vertical-align: middle;
		font-size: 93%;
	}
	#table-section table td.naizo {
		background-color: #FFF5EE;
		color: #D64721;
		vertical-align: middle;
	}
	#table-section table td p {
		font-size: 93%;
		font-weight: bold;
		text-align: center;
		margin: 0.25em 0 0;
	}
	#table-section table td a p {
		display: inline-block;
	}
	#table-section table td div.list {
		padding: 0.5em 0;
		text-align: center;
		width: 100%;
	}
	#table-section table td div.list a img {
		border: 1px solid #CACACA;
		display: inline-block;
	}
	#table-section table td div.list img {
		margin: 0;
		padding: 0;
		vertical-align: top;
	}
	#table-section table td div.list ul.icn-list {
		letter-spacing: -0.4em;
		margin: 0 auto;
		clear: both;
		text-align: left;
	}
	#table-section table td div.list ul.icn-list li {
		display: inline-block;
		letter-spacing: normal;
		width: 46%;
		padding: 0;
		margin: 0 1%;
	}
	#table-section table td div.list ul.icn-list li img {
	}
	#table-section table td a:link {
		color: #30659e;
		text-decoration: none;
	}
	#table-section table td a:hover {
		color: #30659e;
		text-decoration: underline;
	}
	#table-section table td a:visited {
		color: #30659e;
		text-decoration: none;
	}
	#table-section table td.current {
	}
	#table-list td a:link .img-box {
		opacity: 1;
		filter: alpha(opacity=100);
	}
	#table-list td a:visited .img-box {
		opacity: 1;
		filter: alpha(opacity=100);
	}
	#table-list td a:hover {
		opacity: 0.6;
		filter: alpha(opacity=60);
	}


	#table-section table th.metal {
		width:160px;
	}
	#table-section table th.pla {
		width:160px;
	}

}



/* SmartPhone Style ###################################################################################################### */
@media screen and (max-width:499px) {

	#table-section {
		width: 100%;
		/*
			display: block;
		*/
			overflow-x: scroll;
		/*
			white-space: nowrap;
			-webkit-overflow-scrolling: touch;
		*/
	}
	#table-section table {
		width: auto;
	}
	.swipe {
		display:block;
		margin: 20px auto 0;
		text-align: center;
	}
	#table-section table th.metal {
		width:160px;
	}
	#table-section table th.pla {
		width:160px;
	}

	/*******************************************************************
	テーブル
	********************************************************************/

}