/* ------------------------------
common
------------------------------ */
#ui3287 {
  width: 1160px;
  margin: 0 auto;
}

#ui3287 .clearfix::after {
   content: "";
   display: block;
   clear: both;
}

#ui3287 h1 {
  margin: 0 0 15px 0;
  font-size: 120% !important;
  font-weight: 700;
}

.bold {
	font-weight: bold;
}

/* ------------------------------
main_area
------------------------------ */
#ui3287 .main_area {
	background-color: #e0f0ff;
	margin-bottom: 30px;
	padding-bottom: 20px;
}

#ui3287 .main_area .main_tit img {
	vertical-align: top;
}

#ui3287 .main_area .main_txt {
	margin-bottom: 20px;
	padding: 20px 20px 0 20px;
	text-align: center;
}

#ui3287 .main_area .main_txt p {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
}

#ui3287 .main_area .main_txt strong.color_red {
	color: #d00000;
}

#ui3287 .main_area .main_info {
	background-color: #ffffff;
	margin: 0 auto;
	padding: 10px 20px 10px 20px;
	width: 900px;
}

#ui3287 .main_area .main_info p {
	margin: 0 0 10px 0;
}


/* ------------------------------
tab_area
------------------------------ */
#ui3287 .tab_area {
	margin-bottom: 30px;
}

#ui3287 .tab_area .noscript_box {
	border: solid 2px #cccccc;
	margin: 10px 0px 10px 0px;
	padding:10px;
	text-align: center;
}

#ui3287 .tab_area ul.tab {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 4px solid #bf0000;
}

#ui3287 .tab_area ul.tab li {
	margin: 0;
	padding: 0;
}

#ui3287 .tab_area ul.tab img {
	vertical-align: top;
}

#ui3287 .tab_area ul.tab ul.list {
	margin: 0;
	padding: 0;
	list-style: none;
}

#ui3287 .tab_area ul.tab ul.list li {
	float: left;
	display: block;
/*	width: 140px; */
}

/* tabTitle */
#ui3287 .tab_area .tabTitle {
	margin: 5px 0 10px 0;
	padding: 0;
	border: 4px solid #006cd9;
}

#ui3287 .tab_area .tabTitle h2 {
	background: #006cd9;
	color: #ffffff;
	margin: 0;
	padding: 5px 10px 5px 10px;
	font-size: 150%;
	font-weight: bold;
}

#ui3287 .tab_area .tabTitle .tab_read {
	padding: 10px 10px 0 10px;
}

#ui3287 .tab_area .tabTitle .tab_read p {
	padding: 0 0 10px 0;
	margin: 0;
}

#ui3287 .tab_area .tabTitle .tab_info {
	padding: 10px;
	background: #f0f0f0;
}

#ui3287 .tab_area .tabTitle .tab_info p {
	text-indent: -1em;
	padding-left: 1em;
	font-size: 85%;
}

/* ------------------------------
sfcc追加
peri_area
------------------------------ */
#ui3287 .peri_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#ui3287 .peri_area .periTitle{
width: 49%;
padding: 0;
border: 2px solid #ccc;
border-radius: 0 3px 3px 3px;
min-height: 330px;
position: relative;
margin-top: 48px;
}
#ui3287 .peri_area .periTitle:nth-of-type(n+3){
	margin-top: 65px;
}
#ui3287 .peri_area .periTitle.periHdd{
	background: url(ui3287_bg_hdd_03.png) no-repeat bottom -20px right -10px;
}
#ui3287 .peri_area .periTitle.periUsb{
	background: url(ui3287_bg_usb_03.png) no-repeat bottom -30px right -10px;
}
#ui3287 .peri_area .periTitle.periDisk{
	background: url(ui3287_bg_disk_03.png) no-repeat bottom -15px right -10px;
}
#ui3287 .peri_area .periTitle.periCable{
	background: url(ui3287_bg_cable_03.png) no-repeat bottom -15px right -10px;
}
#ui3287 .peri_area .periTitle.periNas{
	background: url(ui3287_bg_nas_03.png) no-repeat bottom -10px right -10px;
}
#ui3287 .peri_area .periCategory{
	position: absolute;
	padding: 10px 20px;
	background: #5a9aef;
	min-width: 250px;
	font-size: 1.8rem;
	text-align: center;
	color: #fff;
	border-radius: 3px 3px 0 0;
	top: -49px;
	left: -2px;
	font-weight: bold;
}
#ui3287 .peri_area .periTitle .periH2 {
    background: #e0f0ff;
    padding: 15px;
}
#ui3287 .peri_area .periTitle .periH2 h2{
	font-weight: bold;
	font-size: 1.8rem;
}
#ui3287 .peri_area .periTitle .peri_read{
	padding: 15px;
}
#ui3287 .peri_area .periTitle .peri_read p + p{
	margin-top: 10px;
}
#ui3287 .peri_area .periTitle .peri_info{
	padding: 20px 0 0;
	font-size: 1.2rem;
}


/* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆以下SP表示◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ */

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

#ui3287 {
  width: 100%;
  margin: 0 auto 15px;
}

#ui3287 img {
  height: auto;
}

#ui3287 h1 {
  margin: 15px 10px 3px 10px;
}

#ui3287 .sp_br {
	display: none;
}

#ui3287 .main_area {
	margin-bottom: 20px;
}

#ui3287 .main_area .main_info {
	width: auto;
	padding: 10px 10px 10px 10px;
	font-size: 105%;
	margin: 10px;
}

#ui3287 .main_area .main_info p {
	margin: 0;
}

#ui3287 .tab_area ul.tab {
	margin: 0 10px 0 10px;
}

#ui3287 .tab_area ul.tab {
	overflow-x: scroll;
}

#ui3287 .tab_area ul.tab ul.list {
	display: flex;
	width: 767px;
}

#ui3287 .tab_area .tabTitle h2 {
	font-size: 125%;
	padding: 5px 0;
	line-height: 1.2em;
}

#ui3287 .tab_area .tabTitle {
    margin: 5px 10px 10px 10px;
}

#ui3287 .tab_area .tabTitle .tab_read {
	font-size: 105%;
}

#ui3287 .main_area .main_txt {
	text-align: left;
	padding: 20px 10px 0 10px;
	font-size: 105%;
}

/* ------------------------------
sfcc追加
peri_area
------------------------------ */
#ui3287 .peri_area {
  display: block;
  padding: 0 10px;
}
#ui3287 .peri_area .periTitle {
  width: 100%;
  margin: 70px 0 0;
  min-height: auto;
}
#ui3287 .peri_area .periTitle:nth-of-type(n+2) {
  margin-top: 65px;
}
#ui3287 .peri_area .periTitle.periHdd,
#ui3287 .peri_area .periTitle.periUsb,
#ui3287 .peri_area .periTitle.periDisk,
#ui3287 .peri_area .periTitle.periCable,
#ui3287 .peri_area .periTitle.periNas {
  background-position: bottom -10px center;
}
#ui3287 .peri_area .periCategory {
  font-size: 1.6rem;
  top: -46px;
}
#ui3287 .peri_area .periTitle .periH2 h2 {
  font-size: 1.6rem;
}
#ui3287 .peri_area .periTitle .peri_read {
  padding: 10px 10px 210px;
  font-size: 1.4rem;
}
}