/* COLUMN WIDTH ON DISPLAYS +480 -768px */
@media screen and (min-width: 480px) and (max-width: 768px) {
  .tb-grid2 > .unit,.tb-grid3 > .unit,.tb-grid4 > .unit,.tb-grid5 > .unit,.tb-grid6 > .unit,.tb-grid7 > .unit,.tb-grid8 > .unit {
    display: inline-block;
    /display: inline;
    /zoom: 1;
    vertical-align: top;
  }

  .tb-grid2  >  .unit  { width: 50%; }
  .tb-grid3  >  .unit  { width: 33.33333%; }
  .tb-grid4  >  .unit  { width: 25%; }
  .tb-grid5  >  .unit  { width: 20%; }
  .tb-grid6  >  .unit  { width: 16.66666%; }
  .tb-grid7  >  .unit  { width: 14.28571%; }
  .tb-grid8  >  .unit  { width: 12.5%; }

  /* Spatial units in thirds */
  .tb-grid3  >  .tb-unit2  { width: 66.66666%; }

  /* Spatial units in fourths */
  .tb-grid4  >  .tb-unit2  { width: 50%; }
  .tb-grid4  >  .tb-unit3  { width: 75%; }

  /* Spatial units in fifths */
  .tb-grid5  >  .tb-unit2  { width: 40%; }
  .tb-grid5  >  .tb-unit3  { width: 60%; }
  .tb-grid5  >  .tb-unit4  { width: 80%; }

  /* Spatial units in sixths */
  .tb-grid6  >  .tb-unit2  { width: 33.33333%; }
  .tb-grid6  >  .tb-unit3  { width: 50%; }
  .tb-grid6  >  .tb-unit4  { width: 66.66666%; }
  .tb-grid6  >  .tb-unit5  { width: 83.33333%; }

  /* Spatial units in sevenths */
  .tb-grid7  >  .tb-unit2  { width: 28.57142%; }
  .tb-grid7  >  .tb-unit3  { width: 42.85714%; }
  .tb-grid7  >  .tb-unit4  { width: 57.14285%; }
  .tb-grid7  >  .tb-unit5  { width: 71.42857%; }
  .tb-grid7  >  .tb-unit6  { width: 85.71428%; }

  /* Spatial units in eights */
  .tb-grid8  >  .tb-unit2  { width: 25%; }
  .tb-grid8  >  .tb-unit3  { width: 37.5%; }
  .tb-grid8  >  .tb-unit4  { width: 50%; }
  .tb-grid8  >  .tb-unit5  { width: 62.5%; }
  .tb-grid8  >  .tb-unit6  { width: 75%; }
  .tb-grid8  >  .tb-unit7  { width: 87.5%; }

  .tb-text-c { text-align: center; }

  #wrapper .tb-fs-3s,
  #wrapper .tb-fs-3s a { font-size:  78.6%;}

  #wrapper .tb-fs-ss,
  #wrapper .tb-fs-ss a {  font-size:  85.7%;}

  #wrapper .tb-fs-s,
  #wrapper .tb-fs-s a {  font-size: 92.9%;}

  /* --------- ヘッダー ---------- */
  #gnavi .gnavi5  {
    background-image: url(../siteimages/gnavi-line.gif),url(../siteimages/gnavi-line.gif);
    background-position: left 0, right 0;
    background-repeat: no-repeat, no-repeat;
  }

  /* ------------------------------------------------------------
    トップページ
  ------------------------------------------------------------ */
  #slider .inbox {
    height: 358px;
  }

  #slider .bg {
  }

  #slider p.text {
    width: 23%;
    margin: 10px 0;
  }

  .ie7 .top-concept h2 {
    width: 55%;
  }

  .ie7 .top-point .unit {
    width: 43%;
    padding: 5px;
  }

  .point1 .point-text h3 {
    width: 68%;
  }

  .ie7 .point1 .point-text h3 {
    width: 63%;
  }

  .point1 .point-img {
    width: 30%;
    padding: 10px;
  }

  .sp-slide {
    width: 95%;
    margin: 20px auto 30px;
  }

  .point-sp p.img {
    width: 50%;
  }



  .point-sp h3,.point-sp p {
    width: 48%;
  }




  /* ------------------------------------------------------------
    使用例
  ------------------------------------------------------------ */

  .guide-img {
    max-width: 45%;
  }

  .guide-odd h2 {
    max-width: 55%;
  }




   /*
  ------------------------------------------------------------
    機能
  ------------------------------------------------------------
  */
  #content .unit-main {
    width: 100%;
  }

  #content .unit-extra {
    width: 100%;
  }

  .extra-navi {
/*    border-right: 4px solid #d6d6d6;
    border-bottom: 4px solid #d6d6d6;*/
  }

  .extra-navi li {
    width: 33.333%;
  }

  .extra-navi li:nth-child(n+4) {
    border-bottom: none;
  }

  .extra-navi li a {
    display: block;
    border-right: 1px solid #d6d6d6;
  }

  .extra-navi li:nth-child(3) a {
    border-right: none;
  }

  .feature-navi {
    border-right: 3px solid #d6d6d6;
    border-bottom: 3px solid #d6d6d6;
  }

  .feature-navi li {
    width: 33.333%;
  }

  .feature-navi li a {
    display: block;
    border-right: 1px solid #d6d6d6;
  }

  .feature-point {
    height: 15em;
  }

  .rslides_nav {
    bottom: 19em;
  }

  .extra-sp.sty1 {
    margin-top: 16px;
  }

  .extra-sp {
    margin-top: 10px;
  }

  .extra-sp p {
  display: block;
  text-indent: 0;
  display: inline;
  }

  .extra-sp a {
    padding-right: 15px;
    color: #0176c0;
    font-weight: bold;
    text-decoration: none;
    background: url(../siteimages/arrow01.gif) right center no-repeat;
  }

  .extra-sp img {
  display: none;
  }





   /*
  ------------------------------------------------------------
    価格とコース
  ------------------------------------------------------------
  */
  .price-box .unit{
    width: 100%;
  }

  .price-box .price-img {
    padding-bottom: 0;
  }

  .price-box .price-text {
    padding-top: 10px;
  }

  .flow-step .grid dd {
    width: 100%;
    padding-left: 20px;
    padding-top: 20px;
  }



  /*
  ------------------------------------------------------------
    お問合せ
  ------------------------------------------------------------
  */
  .footer-contact p {
      width: 80%;
    }


  /*
  ------------------------------------------------------------
    契約解除
  ------------------------------------------------------------
  */
  .cancel-login {
    width: 80%;
  }


  /*
  ------------------------------------------------------------
    本契約申し込み
  ------------------------------------------------------------
  */
  .form-adress p span.item1 {
  width: 90%;
  display: block;
  margin-left: 0;
  }

}

@media screen and (min-width: 480px) and (max-width: 630px) {
    .extra-navi li {
      width: 50%;
    }

    .extra-navi li:nth-child(n+4) {
      border-bottom: 1px solid #d6d6d6;
    }

    .extra-navi li:nth-child(5) {
      border-bottom: none;
    }

    .extra-navi li:nth-child(3) a {
      border-right: 1px solid #d6d6d6;
    }

    .extra-navi li:nth-child(even) a {
      border-right: none;
    }

  }