@charset "utf-8";

/* TOPページ＜http://www.itscom.net/＞のみ適用 */


/* ----- TOPページのみ local-navi非表示 -----  */
#navigation_local_pseudo {
  display: none;
}

/* -------------------------------
    スライダー #slider
 -------------------------------*/
#slider{
  margin-bottom: 20px;
}
#slider .contents {
  position: relative;
  height: 318px;
  margin-bottom: 10px;
}
#slider .contents li{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
#slider .contents li > div{
  position: relative;
}
#slider .contents li .layer{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(/images/background_slider.png) no-repeat right bottom;
  text-decoration: none;
  color: #fff;
}
#slider .contents li .layer:hover{
  background: url(/images/background_slider_on.png) no-repeat right bottom;
}
#slider .contents li .caption{
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 604px;
  height: 46px;
  padding: 10px 86px 10px 20px;
  cursor: pointer;
}
#slider .contents li .caption strong{
  display: block;
  font-size: 16px;
  margin-bottom: 2px;
}
#slider .contents li .caption span.note{
  margin-left: 10px;
}

#slider .nav{
  text-align: center;
}
#slider .nav li{
  display: inline-block;
  zoom: 1;
  width: 35px;
  height: 8px;
  background: #999;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
}
#slider .nav li:first-child{
  margin-left: 10px;
}
#slider .nav li.active,
#slider .nav li:hover{
  background: #4b68c6;
}
#slider .nav .balloon_container{
  z-index: 20;
  display: none;
  position: absolute;
  bottom: 12px; /*bottom: 8px;*/
  left: -48px;
}
#slider .nav .balloon{
  background: url(/images/background_balloon.png) no-repeat center bottom;
  padding-bottom: 10px;
}
#slider .nav .balloon strong{
  display: block;
  width: 110px;
  padding: 10px;
  background: #111987;
  color: #fff;
}


/* -------------------------------
    災害時などのお見舞い文 .infoTxtBox
 -------------------------------*/

.infoTxtBox {
  width: 100%;
  height: auto;
  padding: 16px;
  margin: 20px 0;
  font-size: 13px;
  font-weight: 600;
  font-family: "Yu Mincho", "YuMincho", Hiragino Mincho Pro, \48 \47 \53 \660e \671d \45, \ff2d \ff33 \20 \ff30 \660e \671d, serif;
  line-height: 1.5;
  border: 1px solid #ddd;
  box-sizing: border-box;
}
.infoTxtBox p + p {
  margin-top: 10px;
}

.infotext-spBlock{
  display: block;
  border: 3px solid red;
  text-align: center;
  margin-bottom: 10px;
  padding: 20px;
  font-size: 18px;
  color: #333;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
}
.infotext-spBlock:hover{
  border: 5px solid red;
  color: #333;
  text-decoration: none;
}
.infotext-spBlock:hover div{
  margin: -2px;
}

/* ----- #service_list01 ----- */
#service_list01 {
	margin:0 0 10px;
	width:720px;
}
#service_list01 div  {
	float:left;
	width:108px;
	position:relative;
	border:#ccc 1px solid;
}
#service_list01 div.tv.select,
#service_list01 div.tv:hover  {
	border:#F6B300 1px solid;
}
#service_list01 div.internet.select,
#service_list01 div.internet:hover  {
	border:#4bab27 1px solid;
}
#service_list01 div.telephone.select,
#service_list01 div.telephone:hover  {
	border:#ee680f 1px solid;
}
#service_list01 div.energy.select,
#service_list01 div.energy:hover  {
	border:#c4d700 1px solid;
}
#service_list01 div.smart.select,
#service_list01 div.smart:hover  {
	border:#00aeeb 1px solid;
}
#service_list01 div.mobile.select,
#service_list01 div.mobile:hover  {
	border:#7dacc3 1px solid;
}
#service_list01 div.select:after {
	border-bottom: 0;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	width: 0;
	height: 0;
	content: '';
	position: absolute;
	bottom:-10px;
	left:45%;
}
#service_list01 img {
  vertical-align: bottom;
}
#service_list01 div.tv.select:after {
	border-top:#F6B300 10px solid;
}
#service_list01 div.internet.select:after {
	border-top:#4bab27 10px solid;
}
#service_list01 div.telephone.select:after {
	border-top:#ee680f 10px solid;
}
#service_list01 div.energy.select:after {
	border-top:#c4d700 10px solid;
}
#service_list01 div.smart.select:after {
	border-top:#00aeeb 10px solid;
}
#service_list01 div.mobile.select:after {
	border-top:#7dacc3 10px solid;
}
/*#service_list01_content*/
#service_list01_content {
	position:relative;
}
#service_list01_content .none {
	display: none;
}
#service_list01_content .box {
	padding:6px 10px 10px;
	-moz-border-radius: 0px 0px 8px 8px;
	-webkit-border-radius: 0px 0px 8px 8px;
	border-radius: 0px 0px 8px 8px;
}
#service_list01_content .tv.box {
	border:#F6B300 2px solid;
}
#service_list01_content .internet.box {
	border:#4bab27 2px solid;
}
#service_list01_content .telephone.box {
	border:#ee680f 2px solid;
}
#service_list01_content .energy.box {
	border:#c4d700 2px solid;
}
#service_list01_content .smart.box {
	border:#00aeeb 2px solid;
}
#service_list01_content .mobile.box {
	border:#7dacc3 2px solid;
}
#service_list01_content .box h4 {
	color:#fff;
	font-weight:bold;
	text-align:center;
	padding:5px 0;
	line-height:1;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
}
#service_list01_content .box:nth-of-type(n+2) h4 {
	padding:5px 0 6px;
}

#service_list01_content .tv.box h4  {
	background:#F6B300;
}
#service_list01_content .internet.box h4 {
	background:#4bab27;
}
#service_list01_content .telephone.box h4 {
	background:#ee680f;
}
#service_list01_content .energy.box h4 {
	background:#c4d700;
}
#service_list01_content .smart.box h4 {
	background:#00aeeb;
}
#service_list01_content .mobile.box h4 {
	background:#7dacc3;
}
#service_list01_content .box ul {
	width:662px;
	margin:auto;
}
#service_list01_content .box ul li {
	float:left;
	width:316px;
	padding:0 0 0 10px;
}
#service_list01_content .box ul li:nth-child(odd) {
	margin:5px 10px 0 0;
}
#service_list01_content .box ul li:nth-child(n+3) {
	border-top:#b2b2b2 1px dotted;
	padding:5px 0 0 10px;
}

/* -------------------------------
    ピックアップ #sec-pickup
-------------------------------*/
.sec-pickup_wrap-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;

}
.sec-pickup_child-flex {
  flex: 0 0 49.5%;
  display: flex;
  border: 1px solid #ccc;
  border-left: none;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.sec-pickup_child-flex img {
  vertical-align: bottom;
}
.sec-pickup_child-flex img:hover {
  opacity: .8;
}
.sec-pickup_child-flex .text {
  padding: 10px 5px 10px 10px;
}


/* --------------------------------------------
    料金・割引 #sec-price
 -------------------------------------------- */
.sec-price_wrap-flex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.sec-price_wrap-flex a {
  display:inline-block;
  flex: 0 0 230px;
}

/* --------------------------------------------
    ご加入を検討されているお客さまへ #sec-apply
 -------------------------------------------- */
.sec-apply_wrap {
  background: #f1f0e2;
  padding: 10px;
  margin-bottom: 30px;
}
.sec-apply_wrap .note {
  margin-bottom: 8px;
}
.sec-apply_wrap-flex {
  display: flex;
  justify-content: space-between;
}
.sec-apply_child-flex {
  flex: 0 0 32.5%;
  display:flex;
}
.sec-apply_child-flex .text {
  padding-left: 10px;
}


/* --------------------------------------------
キャンペーンプレゼント #sec-cp
 -------------------------------------------- */
 #sec-cp {
   margin-bottom: 30px;
 }
.sec-cp_wrap-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sec-cp_child-flex {
  flex: 0 0 48.5%;
  display: flex;
  margin-bottom: 10px;
}
.sec-cp_child-flex .figure {
  flex: 0 0 80px;
}
.sec-cp_child-flex img {
  max-width: 100%;
}
.sec-cp_child-flex .text {
  font-size: 14px;
  padding: 5px 0 0 9px;
}

/* --------------------------------------------
slideUP お問い合わせボタン footer_cv_area
2017/11/20 追記
 -------------------------------------------- */
.disp_sp {
  display: none !important;
}
.footer-cv {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;
}
.footer-cv__box-basic {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 70px;
  background: #fff;
  border-top: 3px solid #DFB81F;
}
.footer-cv__box-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top:0;
  bottom:0;
  margin: auto;
  width: 100%;
  max-width: 960px;
}
.footer-cv__box-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.footer-cv__box-flex img {
  display: inline-block;
  width: 100%;
  height: auto;
}
.footer-cv_item-btn {
  margin: 0 5px;
}
.footer-cv_item-btn a {
  display: block;
}
.footer-cv__box-flex p:first-of-type { flex: 0 1 288px; }
.footer-cv__box-flex p:nth-of-type(2) { flex: 0 1 192px; }
.footer-cv__box-flex p:nth-of-type(3) { flex: 0 1 234px; }
.footer-cv_item-tel {
  max-width: 208px;
  margin: auto;
}
.footer-cv__item-closeBtn {
  position: absolute;
  top: -30px;
  right: 12%;
  cursor: pointer;
}
.footer-cv__item-closeBtn img {width: 100%;}
.footer-cv__item-closeBtn:before {
  content:"";
  display: inline-block;
  width: 67.3%;
  height: 253%;
  background-image: url(/images/footer_cvarea/img_footer_comzo2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  left: -60%;
  bottom: -35%;
}
.footer-cv__box-small {
  width: 100%;
  max-width: 960px;
  position: absolute;
  bottom:-66px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
  cursor: pointer;
}
.footer-cv__box-small p {
  position: absolute;
  bottom:0;
  right: 4%;
  width: 37.5%;
  max-width: 194px;
}
.footer-cv__box-small p img { width: 100%;}
.footer-cv__box-small p:before {
  content:"";
  display: inline-block;
  width: 48.4%;
  max-width: 94px;
  height: 100%;
  padding-top: 11%;
  background-image: url(/images/footer_cvarea/img_footer_comzo.png);
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  left: -46%;
  bottom: 0;
}

@media (max-width:730px) {
  .footer-cv__item-closeBtn {
    right: 5px;
  }
}
@media (max-width:600px) {
  .disp_sp {
    display: block !important;
  }
  .disp_pc {
    display: none !important;
  }
  .footer-cv__item-closeBtn {
    width:18.7%;
    top: -38%;
  }
  .footer-cv_item-tel  {
    display: none;
  }
  .footer-cv__box-basic {
    height: 0;
    padding-bottom: 15%;
  }
  .footer-cv__box-flex p:first-of-type {
    flex: 4 0 147px;
    max-width:296px;
  }
  .footer-cv__box-flex p:nth-of-type(2) {
    flex: 3 0 98px;
    max-width: 196px;
  }
  .footer-cv__box-flex p:nth-of-type(3) {
    flex: 1 0 34px;
    max-width: 68px;
  }
}