@charset "shift_jis";


/* ------------------------
     Font-size Adjustment
---------------------------
10px = 77%
11px = 85%
12px = 93%
13px = 100%
14px = 108%
15px = 116%
16px = 123.1%
17px = 131%
18px = 138.5%
19px = 146.5%
20px = 153.9%
21px = 161.6%
22px = 167%
23px = 174%
24px = 182%
25px = 189%
26px = 197%
---------------------------*/


/* SERVICE BLOCK 1カラム */

.serviceBlock{
	 background:url(../img2/pc/titleBar.jpg) left top repeat-x;
	 margin:0px 0px 25px 0px;
 }

	@media screen and (max-width: 767px) {
		.serviceBlock{
			 background:url(../img2/sp/titleBar.jpg) left top repeat-x;
			 border-bottom:none;
			 margin:0px 0px 20px 0px;
				 -moz-background-size:14px 2px;
				 -webkit-background-size:14px 2px;
			 background-size:14px 2px;
			 }
	}

/* サービス名 */  

.serviceBlock h3{
  font-size:138.5%;
  border-bottom:1px dotted #BBBBBB;
  margin:0px 0px 5px 0px;
 }

	@media screen and (max-width: 767px) {
		.serviceBlock h3{
			font-size:16px;
			border-bottom:1px dotted #CCCCCC;
			margin:0px 0px 5px 0px;
			padding:10px 0px 6px 40px;
			line-height:1.2;
		 }
	}


.serviceBlock h3 span{
  display:block;
  font-size:67%;
 }

	@media screen and (max-width: 767px) {
		.serviceBlock h3 span{
			display:block;
			font-size:11px;
		 }
	}

.serviceBlock h3 span.s01{
  display:inline-block;
  margin:0px 0px 0px 10px;
 }

	@media screen and (max-width: 767px) {
		.serviceBlock h3 span.s01{
			display:block;
			margin:0;
		 }
	}

    .serviceBlock#service00 h3{
      background:url(../img2/pc/ico_service01.jpg) 10px 15px no-repeat;
      padding:18px 0px 12px 55px;
    }

			@media screen and (max-width: 767px) {
				.serviceBlock#service00 h3{
					background:url(../img2/sp/ico_service01.jpg) 5px 15px no-repeat;			
					 -ms-background-size:26px 24px;
					 -moz-background-size:26px 24px;
					 -webkit-background-size:26px 24px;
					background-size:26px 24px;
					padding:10px 0px 6px 40px;
				}		
			}

		.serviceBlock#service00 h3 br {
			display:none;
		}

			@media screen and (max-width: 767px) {
				.serviceBlock#service00 h3 br {
					display:inline;
				}
			}

    .serviceBlock#service02 h3{
      background:url(../img2/pc/ico_service02.jpg) 10px 15px no-repeat;
      padding:18px 0px 12px 47px;
    }

				@media screen and (max-width: 767px) {
					.serviceBlock#service02 h3,
					#index .serviceBlock#service02 h3{
						background:url(../img2/sp/ico_service02.jpg) 5px 10px no-repeat;
						 -moz-background-size:26px 24px;
						 -webkit-background-size:26px 24px;
						background-size:26px 24px;
						padding:10px 0px 6px 40px;
					}
					
					.serviceBlock#service02 h3{
						padding:12px 0px 10px 40px;
					}
				}
    
    .serviceBlock#service03 h3{
      background:url(../img2/pc/ico_service03.jpg) 5px 15px no-repeat;
				padding:12px 0px 10px 47px;
    }
   
				@media screen and (max-width: 767px) {
					.serviceBlock#service03 h3{
						background:url(../img2/sp/ico_service03.jpg) 5px 10px no-repeat;
						 -ms-background-size:26px;
						 -moz-background-size:26px;
						 -webkit-background-size:26px;
						background-size:26px;
						padding:10px 0px 6px 40px;
					}
			}

    .serviceBlock#service04 h3{
      background:url(../img2/pc/ico_service04.jpg) 5px 10px no-repeat;
      padding:18px 0px 10px 47px;
    } 

			#index .serviceBlock#service04 h3{
				background:url(../img2/pc/ico_service04.jpg) 5px 15px no-repeat;
				padding:12px 0px 10px 47px;
			} 
			
				@media screen and (max-width: 767px) {
					.serviceBlock#service04 h3,
					#index .serviceBlock#service04 h3{
							background:url(../img2/sp/ico_service04.jpg) 5px 8px no-repeat;
							 -ms-background-size:26px;
							 -moz-background-size:26px;
							 -webkit-background-size:26px;
							background-size:26px;
							padding:10px 0px 6px 40px;
						}
					
					.serviceBlock#service04 h3{
						 padding:12px 0px 10px 40px;
					}
				}
    
    .serviceBlock#service05 h3{
      background:url(../img2/pc/ico_service05.jpg) 5px 15px no-repeat;
      padding:18px 0px 10px 47px;
    }

				#index .serviceBlock#service05 h3{
					background:url(../img2/pc/ico_service05.jpg) 5px 15px no-repeat;
					padding:12px 0px 10px 47px;
				}

				@media screen and (max-width: 767px) {
					.serviceBlock#service05 h3,
					#index .serviceBlock#service05 h3{
							background:url(../img2/sp/ico_service05.jpg) 5px 12px no-repeat;
							 -ms-background-size:26px 22px;
							 -moz-background-size:26px 22px;
							 -webkit-background-size:26px 22px;
							background-size:26px 22px;
						  padding:10px 0px 6px 40px;
						}
				}
    
    .serviceBlock#service06 h3{
      background:url(../img2/pc/ico_service06.jpg) 5px 15px no-repeat;
      padding:18px 0px 10px 50px;
    }
				#index .serviceBlock#service06 h3{
						background:url(../img2/pc/ico_service06.jpg) 5px 15px no-repeat;
						padding:12px 0px 10px 50px;
					}

				@media screen and (max-width: 767px) {
					.serviceBlock#service06 h3,
					#index .serviceBlock#service06 h3{
							background:url(../img2/sp/ico_service06.jpg) 5px 12px no-repeat;
							 -ms-background-size:26px 20px;
							 -moz-background-size:26px 20px;
							 -webkit-background-size:26px 20px;
							background-size:26px 20px;
							padding:10px 0px 6px 40px;
						}
					
					.serviceBlock#service06 h3{
						padding:12px 0px 10px 40px;
					}
				}
    
    .serviceBlock#service07 h3{
      background:url(../img2/pc/ico_service07.jpg) 5px 10px no-repeat;
      padding:18px 0px 10px 50px;
    }

				@media screen and (max-width: 767px) {
					.serviceBlock#service07 h3,
					#index .serviceBlock#service07 h3{
							background:url(../img2/sp/ico_service07.jpg) 5px 8px no-repeat;
							 -ms-background-size:26px;
							 -moz-background-size:26px;
							 -webkit-background-size:26px;
							background-size:26px;
							padding:10px 0px 6px 40px;
						}
					
					.serviceBlock#service07 h3{
						 padding:12px 0px 10px 40px;
					}	
				}

    .serviceBlock#service08 h3{
      background:url(../img2/pc/ico_service08.jpg) 5px 12px no-repeat;
      padding:18px 0px 10px 50px;
    }

				@media screen and (max-width: 767px) {
					.serviceBlock#service08 h3{
						background:url(../img2/sp/ico_service08.jpg) 5px 12px no-repeat;
						 -ms-background-size:26px;
						 -moz-background-size:26px;
						 -webkit-background-size:26px;
						background-size:26px;
						padding:10px 0px 6px 40px;
					}
				}


		.serviceBlock#service09 h3{
      background:url(../img2/pc/ico_service09.jpg) 5px 12px no-repeat;
      padding:18px 0px 10px 50px;
    }

				@media screen and (max-width: 767px) {
					.serviceBlock#service09 h3{
						background:url(../img2/sp/ico_service09.jpg) 5px 10px no-repeat;
						 -ms-background-size:26px;
						 -moz-background-size:26px;
						 -webkit-background-size:26px;
						background-size:26px;
						padding:15px 0px 10px 40px;
					}
				}

		.serviceBlock#service10 h3{
      background:url(../img2/pc/ico_service10.jpg) 5px 12px no-repeat;
      padding:18px 0px 10px 50px;
    }

				@media screen and (max-width: 767px) {
					.serviceBlock#service10 h3{
						background:url(../img2/sp/ico_service10.jpg) 5px 10px no-repeat;
						 -ms-background-size:26px;
						 -moz-background-size:26px;
						 -webkit-background-size:26px;
						background-size:26px;
						padding:15px 0px 10px 40px;
					}
				}


/* サービス一覧レイアウト SERVICE BOX */  

.serviceBox{
	 background:#EEEEEE;
	 margin:0px 0px 15px 0px;
	 padding:20px 15px 15px 15px;
 }

	@media screen and (max-width: 767px) {
		.serviceBox{
			 background:#EEEEEE;
			 margin:0px 0px 10px 0px;
			 padding:15px 10px;
		}
	}


/* SERVICE BLOCK 2カラム・SERVICE BOX 2カラム */ 

.sTypeInner{
 overflow:hidden;
 margin:0px 0px 0px -20px;
 }

	@media screen and (max-width: 767px) {
		.sTypeInner{
		 overflow:visible;
		 margin:0;
		 }
	}
 
.serviceBlock.sType{
	 width:300px;
	 float:left;
	 display:inline;
	 margin:0px 0px 25px 20px;
 }

	@media screen and (max-width: 767px) {
		.serviceBlock.sType{
			 width:auto;
			 float:none;
			 display: block;
			 margin:0;
		 }
	}
 
.serviceBox.sType{
	 width:360px;
	 float:left;
	 display:inline;
	 margin:0px 0px 25px 20px;
 }

	@media screen and (max-width: 767px) {
		.serviceBox.sType{
			 width:auto;
			 float:none;
			 display: block;
			 margin:0 0 10px 0;
		 }
	}
 
/* サービス名 */ 

.serviceBox h4{
	 font-size:138.5%;
	 background:url(../img2/pc/arrow_service.jpg) left 2px no-repeat;
	 margin:0px 0px 10px 0px;
	 padding:0px 0px 0px 20px;
 }

	@media screen and (max-width: 767px) {
		.serviceBox h4{
			 font-size:17px;
			 background:url(../img2/sp/arrow_service.jpg) left 5px no-repeat;
				 -moz-background-size:10px;
				 -webkit-background-size:10px;
			 background-size:10px;
			 margin:0px 0px 5px 0px;
			 padding:0px 0px 0px 15px;
		 }
	}


/* SUB TEXT */

	.serviceBox h4 span.subTxt,
	.serviceBox h4 span.subTxtS{
		background:none;
		color:#0085B2;
		font-size: 70%;
		margin-left: 8px;
	 }

		@media screen and (max-width: 767px) {
			.serviceBox h4 span.subTxt {
				display: block;
				margin-left: 0px;
				margin-top: 5px;
			 }
			
			.serviceBox h4 span.subTxtS {
				display:inline;
				margin-left: 8px;
			 }
		}

/* サブタイトル */

.subCatch{
	 border-bottom:1px dotted #BBBBBB;
	 margin:0px 0px 10px 0px;
	 padding:0px 0px 7px 23px;
}

.subCatch span {
	color: #FFF;
	background-color: #C00;
}


	@media screen and (max-width: 767px) {
		.subCatch { 
			display:none;
		}
	}

/* ZOOT NEXT*/

.serviceBox h4.zoot{
	background:url(../img2/pc/arrow_service.jpg) left 10px no-repeat;
 }

	@media screen and (max-width: 767px) {
		.serviceBox h4.zoot{
			 width:auto;
			 height:auto;
			 background:url(../img2/sp/arrow_service.jpg) left 3px no-repeat;
				 -moz-background-size:10px;
				 -webkit-background-size:10px;
			 background-size:10px;
			 margin:0px 0px 5px 0px;
			 padding:0px 0px 0px 15px;
			 text-indent:0;
			 white-space:normal;
			 overflow:visible;
		 }
	}

.serviceBox h4.zoot span{
	font-size:138.5%;
 }

	@media screen and (max-width: 767px) {
		.serviceBox h4.zoot span{
			font-size:17px;
			 }
	}



/* 固定IPアドレス タイトル */  

.serviceBox h5{
  background:#0085B2;
  color:#FFFFFF;
  margin:0px 0px 15px 0px;
  padding:5px 8px;
 }

	@media screen and (max-width: 767px) {
		.serviceBox h5{
			background:#0085B2;
			color:#FFFFFF;
			margin:0px 0px 5px 0px;
			padding:5px 8px;
			font-size:12px;
		 }
	}
 
/* 固定IPアドレス */ 

.ipAddressBox{
  background:url(../img2/pc/ipAdressImg.jpg) left 5px no-repeat;
	margin-bottom: 20px;
  padding:0px 0px 0px 160px;
 }

	@media screen and (max-width: 767px) {
		.ipAddressBox{
			background:none;
			padding:0;
		 }
	}

/* ファミリータイプの場合 タイトル */

.family{
 	margin:0px 0px 3px 0px;
 }

.family:before{
	 content:"■";
	 color:#0085B2;
 }

.family span{
	 float:right;
 }


/* ファミリータイプの場合 表 */

table.familyTypeList{
  width:100%;
  border-collapse:collapse;
  margin:0px 0px 5px 0px;
  padding:0;
  border-top:1px dotted #BBBBBB;
 }

table.familyTypeList td{
  border-collapse:collapse;
  margin:0px 0px 0px 0px;
  padding: 8px 5px;
  text-align:center;
  border-bottom:1px dotted #BBBBBB;
  background: #FFFFFF;
 }

	@media screen and (max-width: 767px) {
		table.familyTypeList td{
			border-collapse:collapse;
			margin:0px;
			padding: 8px 9px;
			text-align:left;
			border-bottom:1px dotted #CCCCCC;
			background: #FFFFFF;
			font-size:11px;
		 }
	}

table.familyTypeList td.ev{
 background: #EDF5FA;
 }

.ipAddressBox .notice{
 font-size: 85%;
}

	@media screen and (max-width: 767px) {
		.ipAddressBox .notice{
			font-size:11px;
		}
	}

/* フレッツボタン PC */

ul.fletsPc{
 margin:0px 0px 15px -10px;
 overflow:hidden;
 }

ul.fletsPc li.wide{
 float:none;
 margin:0px 0px 5px 10px;
 }
 
ul.fletsPc li{
 float:left;
 margin:0px 0px 0px 10px;
 }


/* フレッツボタン SP */

ul.fletsSp{
  margin:0px 0px 20px -10px;
  overflow:hidden;
 }

ul.fletsSp li.wide{
 width:100%;
 float:none;
 margin:0px 0px 5px 0px;
 
 }
 
 ul.fletsSp li{
 width:50%;
 float:left;
 padding-left:10px;
	 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
 box-sizing: border-box;
 }


/* 現在ご利用中のお客様へ */ 

.forCustomerBlock{
	background: #FFFFFF;
	margin-bottom: 20px;
	padding: 20px;
}

	@media screen and (max-width: 767px) {
		.forCustomerBlock{
			padding: 13px;
		}
	}

.forCustomerBlock h5{
	border-left:5px solid #0085B2;
	background: none;
	color:#0085B2;
	font-size: 138.5%;
	margin:0px 0px 15px 0px;
	padding: 2px 0px 2px 10px;
}

	@media screen and (max-width: 767px) {
		.forCustomerBlock h5{
			border-left:3px solid #0085B2;
			font-size: 116%;
			margin:0px 0px 15px 0px;
			padding: 3px 0px 1px 5px;
		}
	}

ul.customerBox{
	margin-left: -3px;
	overflow:hidden;
}

	@media screen and (max-width: 767px) {
		ul.customerBox{
			margin-left: 0px;
		}
	}

ul.customerBox li{
	width:156px;
	border:2px solid #ACD8E6;
	margin-left: 3px;
	margin-bottom: 10px;
	padding:8px;
	float:left;
}

	@media screen and (max-width: 767px) {
		ul.customerBox li{
			width:auto;
			border:none;
			margin-left: 3px;
			margin-bottom: 15px;
			padding:0px;
			float:none;
		}
		
		ul.customerBox li span{
			margin-left: 8px;
		}
	}

ul.customerBox li p{
 margin-bottom: 5px;	
}

ul.customerBox li p a{
	display: block;
	padding: 8px 5px 8px 10px;
	text-decoration: none;
	background:url(../service/img/pc/arrow_wht.png) 95% center no-repeat,#ACD8E6;
}

	@media screen and (max-width: 767px) {
		ul.customerBox li p a{
			display: block;
			padding: 12px 5px 12px 10px;
			border-radius:5px;
			text-decoration: none;
			background:url(../service/img/pc/arrow_wht.png) 98% center no-repeat,#ACD8E6;
		}
	}

ul.customerBox li p a:hover{
	background:url(../service/img/pc/arrow_wht.png) 95% center no-repeat,#94CCDE;
}

	@media screen and (max-width: 767px) {
		ul.customerBox li p a:hover{
			background:url(../service/img/pc/arrow_wht.png) 98% center no-repeat,#94CCDE;
		}
	}

/* オプション */ 

.optionBlock ul,
.serviceBox ul.closed{
	margin-bottom: 10px;
	margin-left: 25px;
	overflow: hidden;
}

	@media screen and (max-width: 767px) {
		.optionBlock ul{
			margin-top: 20px;
			margin-left: 0px;
		}
		
		.serviceBox ul.closed{
			margin-top: 10px;
			margin-bottom: 0px;
			margin-left: 0px;
		}
	}

.optionBlock li,
.serviceBox ul.closed li{
	width:240px;
	float: left;
	margin-bottom: 10px;
}

	@media screen and (max-width: 767px) {
		.optionBlock li,
		.serviceBox ul.closed li{
			width:90%;
			float:none;
			margin:0 auto 10px;
			text-align: center;
		}
		
		.serviceBox ul.closed li.nolink{
			padding:10px 0px;
			border-radius: 10px;
			background:#ACD8E6;
		}
		
		.optionBlock li a,
		.serviceBox ul.closed li a{
			display: block;
			padding:10px 0px;
			border-radius: 10px;
			background:#ACD8E6;
			text-decoration: none;
		}
		
		.optionBlock li a:hover,
		.serviceBox ul.closed li a:hover{
			background:#94CCDE;
		}
	}

.optionBlock li:before,
.serviceBox ul.closed li:before{
	content:"■";
	color:#0085B2;
}

	@media screen and (max-width: 767px) {
		.optionBlock li:before,
		.serviceBox ul.closed li:before{
			content:"";
		}
	}

/* ZOOT NATIVE */

.serviceBox h4.zootnative{
	background:url(../img2/pc/arrow_service.jpg) left 10px no-repeat;
 }

	@media screen and (max-width: 767px) {
		.serviceBox h4.zootnative{
			 width:auto;
			 height:auto;
			 background:url(../img2/sp/arrow_service.jpg) left 3px no-repeat;
				 -moz-background-size:10px;
				 -webkit-background-size:10px;
			 background-size:10px;
			 margin:0px 0px 8px 0px;
			 padding:0px 0px 0px 15px;
			 text-indent:0;
			 white-space:normal;
			 overflow:visible;
		 }
	}

.serviceBox h4.zootnative span{
	font-size:138.5%;
 }

	@media screen and (max-width: 767px) {
		.serviceBox h4.zootnative span{
			 font-size:17px;
		 }
		
		.serviceBox h4.zootnative span.newIcon{
			font-size:11px;
		 }
	}

.nativeImg{
	margin-bottom:10px;
}
  
.nativeNews{
    font-size: 130%;
    margin: 5px 0px 8px -10px;
}

/* ZOOT NATIVE BTN */  

.bnrNative{
	margin-bottom: 20px;
}

/* 無料バナー */  

.bnrFree2M{
 text-align: center;
 margin:8px 0 25px;
}

#index .bnrFree2M{
 text-align: center;
 margin:8px 0 15px;
}

.bnr2Free2M{
 text-align: center;
 margin:8px 0 0px;
}

.bnrFree2M a:hover,
.bnr2Free2M a:hover{
 opacity: 0.7;
}