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

#top-naviwrap{
	background: #edf2fb;
}
#top-navi{
	max-width: 960px;
	width: 100%;
	margin: auto;
	overflow: hidden;
}
.topsearch {
background: #f8f8f8 none repeat scroll 0 0;
border: 4px solid #ccc;
font-size: 1.3em;
min-height: 40px;
overflow: auto;
padding: 1px 0 0 7px;
width: calc(100% - 98px);
height: 15px;
margin: 0 5px;
	vertical-align: top;
}
#SS_searchForm{
	width: 100%;
}
.pict_list li a{
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 50%, rgba(244,246,249,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 50%,rgba(244,246,249,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 50%,rgba(244,246,249,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f6f9',GradientType=0 ); /* IE6-9 */
	filter: alpha(opacity=85);
-ms-filter: "alpha(opacity=85)";
-moz-opacity: 0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
zoom: 1;
	color: #343a40;
	position: relative;
	
}
.pict_list li a:hover {
background: #fff;
opacity: 1;
	color: #f17b22;
}
.pict_list a:before {
display: block;
width: 66px;
height: 65px;
margin: 0 auto 5px;
}

.pict_list .pict_01 a:before {
content:"";
	background: url(/support/images/top_pict_01.png) no-repeat top center;
}
.pict_list .pict_02 a:before {
content:"";
	background: url(/support/images/top_pict_02.png) no-repeat top center;
}
.pict_list .pict_03 a:before {
content: "";
	background:url(/support/images/top_pict_03.png) no-repeat top center;
}
.pict_list .pict_04 a:before {
content:"";
	background: url(/support/images/top_pict_04.png) no-repeat top center;
}
.pict_list .pict_13 a:before {
	content:"";
	background: url(/support/images/top_pict_13.png) no-repeat top center;
}
.pict_list .pict_14 a:before {
	content:"";
	background: url(/support/images/top_pict_14.png) no-repeat top center;
}

/* こんなときどうする？ */
#dosuru{
	max-width: 960px;
	width: 100%;
	margin: 20px auto;
}
.pict_list_02 li {
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 50%, rgba(244,246,249,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 50%,rgba(244,246,249,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 50%,rgba(244,246,249,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f6f9',GradientType=0 ); /* IE6-9 */
}
.pict_list_02 li a {
	color: #343a40;
	display: block;
	padding: 12px 10px 6px 0;
}

.pict_list_02 li a:hover {
background-color: #fff;
opacity: 1;
	color: #002267;
}
.pict_05 a{
	background: url(/support/images/top_pict_05.png) no-repeat 15px 50%;
}
.pict_06 a {
	background: url(/support/images/top_pict_06.png) no-repeat 15px 50%;
}
.pict_07 a {
	background: url(/support/images/top_pict_07.png) no-repeat 15px 50%;
}
.pict_08 a {
	background: url(/support/images/top_pict_08.png) no-repeat 15px 50%;
}
.pict_09 a {
	background: url(/support/images/top_pict_09.png) no-repeat 15px 50%;
}
.pict_10 a {
	background: url(/support/images/top_pict_10.png) no-repeat 15px 50%;
}
.pict_11 a {
	background: url(/support/images/top_pict_11.png) no-repeat 15px 50%;
}
.pict_12 a {
	background: url(/support/images/top_pict_12.png) no-repeat 15px 50%;
}
.pict_13 a {
	background: url(/support/images/top_pict_13.png) no-repeat 15px 50%;
}
.pict_14 a {
	background: url(/support/images/top_pict_14.png) no-repeat 15px 50%;
}


/* トラブル情報 (右コンテンツ) */
#trbinfo{
	width: 270px;
}
#trbinfo h2 {
	background: rgb(1,76,169); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(1,76,169,1) 0%, rgba(1,76,169,1) 24%, rgba(1,53,154,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(1,76,169,1) 0%,rgba(1,76,169,1) 24%,rgba(1,53,154,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(1,76,169,1) 0%,rgba(1,76,169,1) 24%,rgba(1,53,154,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#014ca9', endColorstr='#01359a',GradientType=0 ); /* IE6-9 */
	padding: 4px 2px 2px;
}
#trbinfo h2:before{
	content: "";
	display: inline-block;
	border-left: 3px solid #fff;
	height: 22px;
	margin: 0 5px 0 8px;
	vertical-align: middle;
}
#trbinfo h2 span{
	color: #fff;
	font-weight: bold;
	margin-bottom: 0;
	line-height: 2;
	vertical-align: middle;
}

/* お役立ち */
.useful-info-list li{
	border: 1px solid #ccc;
	display: flex;
	margin-bottom: 10px;
	align-items: center;
}
.useful-info-list .image{
	margin: 5px;
}
.useful-info-list dl{
	margin: 0 10px;
}
.useful-info-list dl,
.useful-info-list dd,
.useful-info-list p{
	margin-bottom: 0!important;
}

@media (max-width: 768px) {
	.pict_list a:before {
		display: inline-block;
		vertical-align: middle;
		width: 50px;
		height: 50px;
		margin: 0 0 0 0.5em;
	}
	.pict_list li span:after {
		font-family: "Font Awesome 5 Free"; 
		font-weight: 900;
		content: "\f054";
		vertical-align: middle;
		right:0.5em;
		position: absolute;
	}
	
	.pict_list .pict_01 a:before {
		background: url(/support/images/top_pict_01.png) no-repeat top center;
		background-size: 100% 100%;
	}
	.pict_list .pict_02 a:before {
		background: url(/support/images/top_pict_02.png) no-repeat top center;
		background-size: 100% 100%;
	}
	.pict_list .pict_03 a:before {
		background:url(/support/images/top_pict_03.png) no-repeat top center;
		background-size: 100% 100%;
	}
	.pict_list .pict_04 a:before {
		background: url(/support/images/top_pict_04.png) no-repeat top center;
		background-size: 100% 100%;
	}
	.pict_list .pict_13 a:before {
		background: url(/support/images/top_pict_13.png) no-repeat top center;
		background-size: 100% 100%;
	}
	.pict_list .pict_14 a:before {
		background: url(/support/images/top_pict_14.png) no-repeat top center;
		background-size: 100% 100%;
	}
	.pict_list .fa-angle-right {
	right: 40px;
		bottom: 30px;
	}
}

@media (max-width: 576px) {
	#SS_searchForm {
	width: auto;
	}
	.pict_list div{
		margin:0 30px!important;
	}
}

/*---------------------------------------
	TOPページ お知らせ
-------------------------------------------*/
h2.heading-02{
	font-size: 120%;
	font-weight: bold;
	padding:0.5em!important;
	position: relative;
	border:1px solid #e9ebf2;
	border-bottom:1px solid #b3bfd9;
	border-top:none;
	padding-left: 1.2rem!important;
	background: #ffffff!important; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 50%, #e1e9f6 50%, #e7eff7 92%, #ffffff 98.5%)!important; /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ffffff 50%,#e1e9f6 50%,#e7eff7 92%,#ffffff 98.5%)!important; /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffffff 50%,#e1e9f6 50%,#e7eff7 92%,#ffffff 98.5%)!important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	-moz-box-shadow: #b3bfd9 0 2px;
	-webkit-box-shadow: #b3bfd9 0 2px;
	box-shadow: #e7eff7 -1px 2px;
	line-height: 1.2!important;
	color: inherit!important;
	display: flex;
	align-items: end;
}
h2.heading-02:before{
	content:"";
	display:block;
	border:1px solid #012873;
	width: 4px;
	height: 100%;
	background: #003db2;
	position: absolute;
	left: -2px;	
	top: 0;
}

h2.heading-02 span:first-child{
margin-right: auto;
}
h2.heading-02 .list a{
	font-size: 0.8rem;
	margin-right: 10px;
	background: none!important;
}
h2.heading-02 .list a:before{
	content: "\f03a";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
display: inline-block;
	margin-right: 5px;
}
dl#information{
	padding: 0 9px 20px 9px;
	margin-bottom: 0;
}
#information dt {
	padding: 10px 0 0 35px;
	margin-top: 0px;
	font-weight: normal;
}
#information dt:first-child{
	border-top: none;
	margin-top: 0
}
#information dd {
	margin: -21px 0 0 165px;
}
#information dt img {
position: absolute;
margin: 4px 0 0 -35px;
}

@media only screen and (max-width:576px){
	h2.heading-02:before{
		width:4px!important;
	}
	#information dt{
		padding-left: 0;
	}
	#information dd {
	margin: 0;
	}
	#information dt img {
		display: none;
	}
} /*@media only screen and (max-width:576px) END*/

/*IPv6 badge*/
#v6plus-recmn a{	
	transition-duration: 1s;
}
#v6plus-recmn a :hover{	
	opacity: 0.8;
	transform: translateY(3px);
}
#v6service a{	
	transition-duration: 1s;
}
#v6service a :hover{	
	opacity: 0.8;
	transform: translateY(3px);
}

#pppoe a{	
	transition-duration: 1s;
}
#pppoe a :hover{	
	opacity: 0.8;
	transform: translateY(3px);
}