/* COLUMN WIDTH ON DISPLAYS -480px */
@media screen and (max-width: 480px) {
  #wrapper {
    font-size: 92.9%;
  }

  .grid .unit {
    width: auto;
    display: block;
  }

  .ingrid　{
    margin: 0 0 20px;
  }

  .sp-grid2 > .unit,.sp-grid3 > .unit,.sp-grid4 > .unit,.sp-grid5 > .unit,.sp-grid6 > .unit,.sp-grid7 > .unit,.sp-grid8 > .unit {
    display: inline-block;
    /display: inline;
    /zoom: 1;
    vertical-align: top;
  }

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

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

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

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

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

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

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

  .sp-text-c { text-align: center; }
  .sp-text-l { text-align: left; }

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

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

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

  #wrapper .sp-pdt0 { padding-top: 0;}

  .section-tit img {
    padding-bottom: 10px;
  }

  /* 20170704_hirai */
  .d-flex{
    display:block
  }

  /* --------- ヘッダー ---------- */
  #header .logo {
    width: 100%;
  }

  .package-btn {
    display: none;
  }

  .sp-gnavi {
    width: 50px;
    position: absolute;
    display: block;
    top: 0px;
    right: 10px;
  }

  #header .header-top {
    margin-top: -20px;
    right: 0;
  }

  .header-top li {
    display: none;
  }

  .header-top li.header-login {
    display: block;
    position: absolute;
    top: 80px;
    right: 10px;
    width: auto;
  }

  .header-top li.header-login img {
    display: none;
  }

  .header-top li.header-login span {
    display: block;
  }

  #gnavi {
    display: none;
    margin: 20px 0;
    background: #0176c0;
  }

  #gnavi li {
    background: #0176c0;
    border-bottom: 1px solid #fff;
    padding: 0;
  }

  #gnavi .gnavi5 a {
    background: none;
  }



  #gnavi li a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 10px;
    border-right: 1px solid #fff;
  }

  #gnavi li img {
    display: none;
  }

  /* --------- フッター ---------- */
  .footer-contact p.text {
    text-align: left;
  }

  .footer-contact p.btn {
    width: 90%;
  }

  .fnavi li a {
    font-size: 85.7%;
  }

  /* --------- フォーム ---------- */
  textarea:focus,textarea:hover {
    height: 8em;
  }


  /* --------- タイトルスタイル ---------- */
  .section-tit2 h2 {
    font-size: 135.7%;
    border-right: none;
  }

  #wrapper .mg-sty3 {
    margin-top: 10px;
    margin-bottom: 10px;
  }




  /* ------------------------------------------------------------
    トップページ
  ------------------------------------------------------------ */
  #slider .inbox {
    position: static;
    height: auto;
  }

  #slider .inbox-in {
    height: auto;
    position: static;
  }

  #slider .bg {
    display: none;
  }

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

  #slider p.btn {
    text-align: center;
  }

  #slider p.btn2 {
  position: static;
  }

  .top-concept h2 {
    width: 100%;
  }

  .top-concept .img-box {
    height: 130px;
    overflow: hidden;
    margin-bottom: 10px;
  }

  .top-concept .img {
    max-width: 100%;
    float: none;
    padding-bottom: 20px;
  }

  .ie7 .top-point .unit {
    width: 97% !important;
    padding: 5px;
  }



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

  .point1 .point-text {
    padding: 10px;
  }

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

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

  .point-sp .box{
    background: #000 url(../siteimages/top/sp-bg1_sp.jpg) 0 0 no-repeat;
  }

  .point-sp h3 {
    width: 100%;
    padding: 20px 20px 0;
  }

  .point-sp p {
    display: none;
  }

  .point-sp p.btn,.point-sp p.img {
    display: block;
    float: none;
    text-align: center;
    width: 100%;
  }

  .point-sp .btn {
    padding-bottom: 20px;
  }




   /*
  ------------------------------------------------------------
    機能
  ------------------------------------------------------------
  */
  #content .feature-index {
    display: none;
  }

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

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

   #content .feature-snavi li {
    border: none;
  }

  #content .extra-snavi li {
    border: none;
  }

  .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;
  }

  .rslides_nav {
    bottom: 23em;
  }

  .feature-navi a {
    display: block;
    background: url(../siteimages/arrow02.png) 98% center no-repeat;
  }

  .feature-point-tit {
    padding: 40px 0px 0;
    font-weight: bold;
    font-size: 121.4%;
  }

  .feature-point {
    height: 19em;
    padding: 10px 0 10px 0px;
  }

  .sp-slide {
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .sp-slide .sp-text {
    padding: 20px 0 0 20px;
    position: relative;
    z-index: 3;
  }

  .sp-text h3 {
    margin-bottom: 0;
  }

  .sp-slide .sp-text p {
    display: none;
  }

  .sp-slide .sp-img {
    margin-top: -20px;
  }

  .sp-slide .rslides_nav {
    bottom: -30px;
  }

  .contact-submit li.btn2 {
    margin-top: 20px;
    }

    /*
  ------------------------------------------------------------
    コースと価格
  ------------------------------------------------------------
  */
  .price-box .price-img {
    padding-bottom: 0;
  }

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

  .price-link {
    position: static;
    text-align: right;
    margin-top: 20px;
  }

  .price-link img {
    width: 60%;
  }

  .price-link+.tit-text {
    margin-top: 20px;
  }

  .flow-step dd {
    padding-left: 20px;
    padding-top: 20px;
  }



   /*
  ------------------------------------------------------------
    ユーザーサポート
  ------------------------------------------------------------
  */
  /*メンテナンス情報*/
  .meaintenance-box .date {
    width: 100%;
    display: block;
    padding-right: 0;
    font-size: 84.6%;
  }

  /*よくある質問*/
  .faq-navi li.tab1,.faq-navi li.tab2 {
    border-bottom: none;
  }


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

  .contact-form dd {
    padding: 0px 10px 20px;
  }

  .input-form dd {
    padding: 0px 10px 20px;
  }

  .ie7 .contact-submit li{
    width: 90%;
  }



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

  .cancel-login dt.unit {
  padding-bottom: 0;
  }

  .input-form dd.cancel-reason {
    padding: 0px 10px 10px;
  }




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