@charset "UTF-8";
/*reset*/
body {
background:#fff;
color:#333;
}
#wrapper {
min-width: 950px;
}
strong {
font-weight: bold !important;
}
a {
color: #333;
text-decoration: none;
}
article a{
color:#333;
}
a:hover,
a:focus {
color: #3366cc;
text-decoration: none;
outline:none;
}
a:visited {
/*color: purple;*/
}
dl{
margin-bottom:0;
}
.cf:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden
}
.cf{
zoom:1
}
.errorText{
text-align: center;
}

/*header*/
header .inner a {
color: #1d3994;
}
header .inner a:hover{
color: #3366cc;
}
header .inner a:visited {
/*color: purple;*/
}

/*sp header*/
#yjsmhWrapper a{
color: #1d3994;
}

/*main visual*/
.main_visual{
margin: 0 auto;
background:#eee;
padding: 15px 0 20px;
}
.main_visual h2{
display: none;
}
.autoplay{
max-width: 950px;
margin:0 auto;
}
.autoplay a{
position: relative;
display: block;
border: solid 5px #fff;
}
.autoplay img {
width: 100%;
height: auto;
}
.autoplay h3 {
margin-top:0;
margin-bottom: 0;
}


/*carousel prev next btn*/
.slick-dotted.slick-slider{
margin-bottom: 0;
}
.slick-prev,
.slick-next {
top: 43%;
height: 40px;
width: 40px;
background: rgba(245,245,245, 0.8)!important;
border:solid 1px #ddd;
z-index: 2 !important;
}
.slick-prev {
left: 0 !important;
}
.slick-next {
right: 0 !important;
}
.slick-prev:before,
.slick-next:before{
position: absolute;
top: 12px;
right:14px;
width: 16px;
height: 16px;
border-bottom: 3px solid #333;
border-left: 3px solid #333;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
text-indent: -9999px;
}
.slick-next:before{
border-bottom: none;
border-left: none;
border-top: 3px solid #333;
border-right: 3px solid #333;
}
.slick-prev:hover:before{
border-bottom: 3px solid #3366cc;
border-left: 3px solid #3366cc;
}
.slick-next:hover:before{
border-top: 3px solid #3366cc;
border-right: 3px solid #3366cc;
}
.slick-next.slick-arrow:before{
right:15px;
}
.slick-prev.slick-arrow:before{
left:15px;
}

/*carousel dots btn*/
.slick-dots{
position: static;
bottom:0;
height: 20px;
margin: 20px 0 0;
}
.slick-dots li button{
font-size:30px;
}
.slick-dots li button:before{
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
background:#999;
content: '';
text-align: center;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.slick-dots li.slick-active button:before{/*current color*/
background: #3366cc;
}

/*main product */
/*title*/
.ttl.internet{
position: relative;
width: 950px;
margin: 40px auto 20px;
font-size:30px;
text-align: center;
}
.ttl.internet:before {
position: absolute;
top: 65%;
z-index: 1;
content: '';
display: block;
width: 100%;
height: 1px;
background: #ddd;
}
.ttl.internet .sub{
display: block;
font-size:18px;
}
.ttl.internet .inner{
position: relative;
z-index: 2;
display: inline-block;
width: auto;
margin: 0;
padding: 0 15px;
background: #fff;
}

/*carousel secondplay*/
.secondplay {
width: 950px;
margin:0 auto;
}
.secondplay h3 {
display: none;
}
.secondplay li {   
margin: 0 6px;
}
.secondplay .slick-slide img{
width: 100%;
height: 100%;
-webkit-border-radius: 6px;
border-radius: 6px;
}

/*product hover*/
.trigger .hikari,
.trigger .air,
.trigger .adsl,
.trigger .adsl.endimg {
display: block;
background: url("https://s.yimg.jp/images/bb/promo/v1/pc/top/img/banner/hikari_hover.png") no-repeat;
background-size:contain;
border-bottom:solid 3px #eee;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.trigger .air {
background: url("https://s.yimg.jp/images/bb/promo/v1/pc/top/img/banner/air_hover_v2.png") no-repeat;
background-size:contain;
}
.trigger .adsl.nowimg {
background: url("https://s.yimg.jp/images/bb/promo/v1/pc/top/img/banner/adsl_hover.png") no-repeat;
background-size:contain;
}
.trigger a.hikari.on img,
.trigger a.air.on img,
.trigger a.adsl.endimg.on img,
.trigger a.adsl.nowimg.on img{
visibility: hidden;
}
.trigger .adsl.endimg {
background: url("https://s.yimg.jp/images/bb/promo/v1/pc/top/img/banner/adsl_end_hover_v2.png") no-repeat;
background-size:contain;
}


/*sahen guide*/
.sahen {
width: 950px;
height: auto;
margin:25px auto 0;
}
.sahen dt{
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 260px;
height: 36px;
background:#fafafa;
border:solid 1px #eee;
padding: 3px;
font-size:12px;
font-weight: normal;
text-align: center;
}
.sahen dt span{
display: block;
font-size: 10px;
line-height: 1;
} 
.sahen dd{
position: relative;
top: 2px;
display: inline-block;
}
.sahen dd a{
display: block;
font-size:12px;
text-indent: 12px;
}
.sahen dd a:nth-child(1):before,
.sahen dd a:nth-child(2):before {
position: absolute;
top: 6px;
left: 0;
width: 6px;
height: 6px;
border-top: 2px solid #333;
border-right: 2px solid #333;
content: "";
z-index: 1;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sahen dd a:hover:nth-child(1):before,
.sahen dd a:hover:nth-child(2):before {
border-top: 2px solid #3366cc;
border-right: 2px solid #3366cc;
}
.sahen dd a:nth-child(2):before {
top: 24px;
}

/*android2x substitute*/
.sahen dd a:nth-child(1):before,
.sahen dd a:nth-child(2):before {
position: absolute;
top: 2px;
left: 0;
width: 11px;
height: 11px;
background: url("https://s.yimg.jp/images/bb/promo/v1/pc/top/img/common/mini_arrow.png") no-repeat;
background-size:25px 11px;
background-position: left center;
content: "";
z-index: 1;
border:none;
-ms-transform: none;
-webkit-transform: none;
transform: none;
}
.sahen dd a:hover:nth-child(1):before,
.sahen dd a:hover:nth-child(2):before {
background-position: -16px center;
border:none;
}
.sahen dd a:nth-child(2):before {
top: 21px;
}

/*open cp*/
.open_wrap{
position: relative;
top: 3px;
float: right;
}
.opencp{
position: relative;
display: inline-block;
width: 212px;
height: 16px;
background:#ffe400;
border-bottom:solid 2px #ccc;
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 10px 9px 8px 9px;
font-size:12px;
font-weight: bold;
text-align: center;
vertical-align: top;
}
.opencp:hover{
color:#3366cc;
text-decoration: none;
}
.opencp:before {
position: absolute;
top: 14px;
right: 9px;
width: 8px;
height: 8px;
border-top: 2px solid #000;
border-right: 2px solid #000;
content: "";
z-index: 1;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.opencp:hover:before {
border-top: 2px solid #3366cc;
border-right: 2px solid #3366cc;
}

/*android2x substitute*/
.opencp:before {
position: absolute;
top: 13px;
right: 9px;
width: 11px;
height: 11px;
background: url("https://s.yimg.jp/images/bb/promo/v1/pc/top/img/common/mini_arrow.png") no-repeat;
background-size: 25px 11px;
background-position: left center;
content: "";
z-index: 1;
border:none;
-ms-transform: none;
-webkit-transform: none;
transform: none;
}
.opencp:hover:before {
background-position: -16px center;
border:none;
}

/*member fun option*/
.member,
.fun{
display: block;
margin:0 auto;
text-align: center;
}
.member ul,
.fun ul{
display: table;
margin: 0 auto;
text-align: center;
}
.member li,
.fun li {
width: auto;
vertical-align: middle;
}
.member li a,
.fun li a {
float: left;
display: block;
margin:0 4px;
background:#fff;
border:solid 1px #ddd;
}
.member li.inner{
float: left;
padding:0;
}
.fun li.inner a{
position:relative;
margin-bottom: 8px;
}
.member a:nth-child(2) img{
background:#f5f5f5;
}
.member a:nth-child(3) img{
background:#00afec;
}
.member li img,
.fun li img{
max-width: 100%;
pointer-events: none;
}
.member li a:hover span, 
.fun li a:hover span{
color: #3366cc;
}
.member li a:hover, 
.fun li a:hover{
border: solid 1px #3366cc;
}

/*calculator*/
.fun li.inner a span:nth-child(2){
position: absolute;
top: 66px;
left: 12px;
font-size:14px;
line-height: 1.2;
text-align: left;
}
.fun li.inner .cal{
position: absolute;
top: 20px;
right: 20px;
}
.ttl.member,
.ttl.fun,
.ttl.option{
position: relative;
border: none;
margin: 60px 6px 20px;
font-size:30px;
text-align: center;
}
.ttl.fun{
margin-bottom:20px;
}
.ttl.member:before,
.ttl.fun:before,
.ttl.option:before {
position: absolute;
top: 65%;
z-index: 1;
content: '';
display: block;
width: 100%;
height: 1px;
background: #ddd;
}
.ttl.member .inner,
.ttl.fun .inner,
.ttl.option .inner {
position: relative;
display: inline-block;
width:auto;
margin: 0;
padding: 0 15px;
background: #fff;
z-index: 2;
}
.ttl.member .sub,
.ttl.fun .sub,
.ttl.option .sub{
display: block;
font-size:18px;
}
.member dt h3,
.fun dt h3{
margin: 0;
padding: 12px 10px 8px;
font-size: 16px;
font-weight: normal;
line-height: 1.25;
text-align: left;
}
.member dt span,
.fun dt span{
display: block;
font-size: 12px;
color: #666;
}
.member dd.about,
.fun dd.about{
position: relative;
padding: 7px 22px 3px 10px;
font-size: 12px;
text-align: right;
}
.member dd.about:before,
.fun dd.about:before{
position: absolute;
top: 13px;
right: 10px;
width: 6px;
height: 6px;
border-top: 2px solid #333;
border-right: 2px solid #333;
content: "";
z-index: 1;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.member li a:hover dd.about:before, 
.fun li a:hover dd.about:before{
border-top: 2px solid #3366cc;
border-right: 2px solid #3366cc;
}

/*chat*/
.bc_banner-size{
z-index: 3;
}

/*android2x substitute*/
.member dd.about:before,
.fun dd.about:before{
position: absolute;
top: 10px;
right: 5px;
width: 11px;
height: 11px;
background: url("https://s.yimg.jp/images/bb/promo/v1/pc/top/img/common/mini_arrow.png") no-repeat;
background-size:25px 11px;
background-position: left center;
content: "";
z-index: 1;
border:none;
-ms-transform: none;
-webkit-transform: none;
transform: none;
}
.member li a:hover dd.about:before, 
.fun li a:hover dd.about:before{
background-position: -16px center;
border:none;
}


/*tablet*/
@media (min-width: 600px) and (max-width: 1024px) {
	/*product hover*/
	.trigger a.hikari.on img,
	.trigger a.air.on img,
	.trigger a.adsl.endimg.on img,
	.trigger a.adsl.nowimg.on img{
	visibility: visible;
	}
}