@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ インターネット接続 ◇◆◇
  
  
========================================================================================================================*/

.mess {
  text-align:center;
  max-width:100%;
}

.mess h3 { 
  padding-bottom:0.5em;
  font-weight:normal;
  line-height:1.5;
}

@media (max-width:640px) {
  .mess {
    text-align:left;
  }
}

.ani {
  width:860px;
  height:241px;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  margin-top:60px;
}

.ani .ani_koma {
  content:"";
  width:860px;
  height:241px;
  display:block;
  background-image:url(../image/provider/ani.png);
  background-repeat:no-repeat;
  background-position:left top;
  background-size:cover;
  position:absolute;
  left:0;
  top:0;
  z-index:1;
}

@media only screen {
  .cssanimations .ani .ani_koma {
    -webkit-animation:ani-koma 2s steps(18) infinite;
    animation:ani-koma 2s steps(18) infinite;
  }
}
  
.no-cssanimations .ani .ani_koma {
  background-image:url(../image/provider/ani_18.png);
}

@-webkit-keyframes ani-koma {
  100% {
    background-position:left -4338px;
  }
}

@keyframes ani-koma {
  100% {
    background-position:left -4338px;
  }
}

.ani_net {
  position:absolute;
  left:333px;
  top:16px;
  z-index:0;
}

.cssanimations .ani .ani_net {
  -webkit-animation:ani-net 2s infinite;
  animation:ani-net 2s infinite;
}

@-webkit-keyframes ani-net {
  0% {
    transform:rotateY(0deg);
  }
  
  50% {
    transform:rotateY(180deg);
  }
  
  100% {
    transform:rotateY(0deg);
  }
}

@keyframes ani-net {
  0% {
    transform:rotateY(0deg);
  }
  
  50% {
    transform:rotateY(180deg);
  }
  
  100% {
    transform:rotateY(0deg);
  }
}

@media (max-width:767px) {
  .ani {
    margin-top:3em;
  }

  .ani,
  .ani .ani_koma {
    width:100%;
    height:0;
    padding-top:27.90091%;
  }
  
  .cssanimations .ani .ani_koma {
    -webkit-animation:none !important;
    animation:none !important;
    background-image:url(../image/provider/ani_18.png);
  }

  .ani_net {
    max-width:13.0378%;
    position:absolute;
    left:38.72229%;
    top:6.54205%;
    z-index:0;
  }
}

@media (max-width:640px) {
  .ani {
    margin-top:2em;
  }
}


/*----------------------------------------------------------------------------------------------------

  料金・接続コース一覧
  
----------------------------------------------------------------------------------------------------*/

.plans-warp {
  background-color:#f2f2f2;
  text-align:center;
  max-width:100%;
}

.plans-warp + footer {
  border-top:0;
}

.plan h4 {
  font-weight:normal;
}

.plan--block {
  max-width:1105px;
  margin-left:auto;
  margin-right:auto;
  margin-top:10px;
}

.plan--block > dl {
  float:left;
  border:2.5px solid #f2f2f2;
  box-sizing:border-box;
}

.plan--block2 {
  margin-top:12.5px;
}

.plan--block dt,
.plan--block dd {
  text-align:center;
  box-sizing:border-box;
  padding:0.8em 1em;
  line-height:1.6;
}

.plan--block dt {
  width:100%;
  display:table;
  color:#fff;
}

.plan--block dt span {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

.plan--block dt small {
  display:inline-block;
}

.plan--block dd {
  background-color:#fff;
  border-top:1px solid #e8e8e8;
}

.plan--block dd.mail-none {
  text-decoration:line-through;
  color:#969696;
  font-size:87.5%;
}

.plan--block dd.mail {
  font-size:87.5%;
}

.plan--block dt:first-child+dd {
  border-top:0;
}

.plan--block .price {
  font-size:162.5%;
}

.plan--block .sprice {
  font-size:137.5%;
}

.plan--block .price,
.plan--block .sprice {
  padding-top:0.5em;
  padding-bottom:0.5em;
}

.plan--block .price small,
.plan--block .sprice small {
  font-size:60%;
  display:inline-block;
  margin-right:0.25em;
}

@media (max-width:767px) {
  .plan--block {
    margin-left:-2.5px;
    margin-right:-2.5px;
  }
  
  .plan--block dl {
    width:50% !important;
    border-width:5px;
  }

  .plan--block2 {
    margin-top:0;
  }
}

@media (max-width:640px) {
  .plan--block dd.mail {
    font-size:100%;
  }
  
  .plan--block .price {
    font-size:182.5%;
  }
  
  .plan--block .sprice {
    font-size:157.5%;
  }
}

@media (max-width:500px) {
  .plan--block {
    margin-left:0;
    margin-right:0;
  }
  
  .plan--block dl {
    width:100% !important;
    float:none;
    border:0;
    margin-top:1em;
  }
  
  .plan--block dt br {
    display:none;
  }
  
  .plan--block dt small {
    margin-left:1em;
  }
}


/*-----------------------------------------------------------------------------------
  サービス内容
-----------------------------------------------------------------------------------*/

.plan-sv h4,
.plan-sv .price {
  color:#0f9bd7;
}

.plan-sv dl {
  width:20%;
}

.plan-sv dl.box-w2 {
  width:40%;
}

.plan-sv dt {
  background-color:#3fafdf;
}

@media (max-width:500px) {
  .box-w2 dt small {
    margin-left:inherit;
  }
}


/*-----------------------------------------------------------------------------------
  固定IPサービス
-----------------------------------------------------------------------------------*/

.plan-ip {
  padding-top:50px;
}

.plan-ip h4,
.plan-ip .price {
  color:#00a08c;
}

.plan-ip dl {
  width:20%;
}

.plan-ip dt {
  background-color:#33b3a3;
}

@media (max-width:767px) {
  .plan-ip {
    padding-top:3em;
  }
}

@media (max-width:640px) {
  .plan-ip {
    padding-top:2em;
  }
}

@media (max-width:500px) {
  .plan-ip dd.price,
  .plan-ip dd.sprice {
    width:50%;
    float:left;
    display:table;
  }
  
  .plan-ip dd.price {
    padding-right:0.25em;
  }
  
  .plan-ip dd.sprice {
    padding-left:0.25em;
  }

  .plan-ip dd.price span,
  .plan-ip dd.sprice span {
    display:table-cell;
    vertical-align:middle;
  }
  
  .plan-ip dd.sprice+dd {
    clear:left;
  }
  
  .plan-ip dt small {
    font-size:inherit;
  }
}

@media (max-width:400px) {
  .plan-ip dd.price small,
  .plan-ip dd.sprice small {
    display:block;
    margin-right:0;
  }
}


/*---------------------------------------------------------------------------------*/

.plans-info {
  max-width:1100px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  margin-top:2em;
}