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

.join-wrap {
  width: 70%;
  min-width: 600px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
.join-wrap {
  width: 100%;
  min-width: 200px;
  padding: 0 30px;
}
}
@media screen and (max-width: 480px) {
.join-wrap {
  width: 100%;
  min-width: 200px;
  padding: 0 10px;
}
}

/* タブ */

  .tabs {
    display: block;
    padding-bottom: 40px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 70%;
    min-width: 600px;
    margin: 0 auto 50px;
    }

/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #000;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #666666;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
}
 .tab_item.active {
  background-color: #ee0000;
   color: #FFF;
}
    
.tab_item:hover {
  color: #FFF;
  background-color: #ee0000;
}

@media screen and (max-width: 768px) {
  .tabs {
    display: flex;
    justify-content: center;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0);
    width: 100%;
    min-width: 200px;
    }
.tab_item {
  width: 100%;
}
}


/* 接続方法 */

.exwrap{
	width:100%;
	margin-bottom:50px;
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
}
.exwrap_item{
	width:154px;
  margin: 5px;
	border-radius:5px;
  -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
  -moz-border-radius:5px;   /* Firefox用 */
}

.public{background:#008C69; margin-left:0;}
.isdn{background:#0085B2;}
.hikari{background:#D96D00;}
.adsl{background:#4B1478;}
.catv{background:#666666;}

.exwrap_item a{
	width:154px;
	height:50px;
	line-height:50px;
	font-size:14px;
	font-weight:bold;
	color:#FFF;
	display:block;
	text-align:center;
}

.exwrap_item:hover,
.public a:hover,
.isdn a:hover,
.hikari a:hover,
.adsl a:hover,
.catv a:hover {
	text-decoration:none;
	color:#FFF;
	border-radius:5px;
  -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
  -moz-border-radius:5px;   /* Firefox用 */
}

.public a:hover{background:#00AA80;}
.isdn a:hover{background:#00A3D9;}
.hikari a:hover{background:#F77B00;}
.adsl a:hover{background:#8123CD;}
.catv a:hover{background:#8B8B8B;}