@charset "utf-8";


/* 画面サイズが960px以下の場合に適用 */

/*共通
---------------------------------------------------*/
@media only screen and (max-width: 980px) {


/*ボタン
---------------------------------------------------*/
.button01 {
  font-size: 2rem;
}


/* header
---------------------------------------------------*/
header .right {
  position: relative;
}

header .right .tel {
  width: 53px;
  margin-right: 15px;
  line-height: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 44px;
}

header .right .tel .number {
  display: none;
}

header .right .tel .icon {
  display: block;
}

header .right .tel .icon .cls-1 {
  fill: #f14e15;
}

header .right .contact {
  padding: 0;
  color: #f0551f;
  border-radius: 0px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0;
}

header .right .contact span {
  display: none;
}

header .right .contact i {
  display: block !important;
  font-size: 42px;
}


/* お知らせ
---------------------------------------------------*/



/* 便利屋の需要
---------------------------------------------------*/
.needs ul li {
  max-width: 300px;
  margin: 0 auto 30px;
}


/* 便利屋が求められていること
---------------------------------------------------*/
.want h2 {
  padding-left: 15px;
  padding-right: 15px;
}

.want .txt {
  background-image: none;
  padding: 0;
  height: auto;
}


/* 売上1000万円プレイヤー
---------------------------------------------------*/
.player h2 {
  padding-left: 15px;
  padding-right: 15px;
  white-space: nowrap
}

.player .case .col-md-5 {
  max-width: 100%;
  margin-bottom: 20px;
}

.player .case .col-md-7 {
  padding: 0 15px;
}


/* 開業の準備
---------------------------------------------------*/
.ready .paper {
  background-image: none;
  width: auto;
  height: auto;
  padding: 0;
  margin-bottom: 50px;
}


/* 恩恵を受けることが出来るんです
---------------------------------------------------*/
.benefit ul li.point-3 {
  margin-bottom: 30px;
}

.benefit .flow .flow_content h4 {
  margin-bottom: 20px;
}

.benefit .flow .flow_content .col-md-5 {
  margin-bottom: 20px;
}

.benefit .flow .flow_content section ul {
  padding-left: 60px;
}

.benefit .flow .flow_content section ul li {
  margin-bottom: 20px;
}

.benefit .flow .flow_content::before {
  display: none;
}

.benefit ul.point-3 li {
  max-width: 300px;
  margin: 0 auto 30px;
}

.benefit .flow_content ul li.col-md-5 {
  padding-left: 110px;
}

.benefit .flow .flow_content section ul {
  padding-left: 20px;
}


/* 全国展開している便利屋
---------------------------------------------------*/
.expansion .map {
  width: auto;
  padding: 30px;
}

.expansion .map .map_bg {
  background-image: none;
  height: auto;
  padding: 0;
}

.expansion .map .map_bg p {
  margin-bottom: 10px;
  text-align: center !important;
}

.expansion .map .map_img {
  display: block;
}

.expansion .open {
  padding: 30px;
}

.expansion .open .col-md-8 p,
.expansion .open .col-md-4 {
  margin-bottom: 20px;
}

.expansion .open .col-md-4 img {
  max-width: 200px;
}

/* 開業しましょう
---------------------------------------------------*/
.expansion .open ul li {
  width: 100%;
  margin-bottom: 20px;
}

}


  /* 画面サイズが750px以下の場合に適用 */

  /*共通
  ---------------------------------------------------*/
  @media only screen and (max-width: 750px) {

  /* header
  ---------------------------------------------------*/
  header .left .logo {
    max-width: 350px;
  }


  /* 恩恵を受けることが出来るんです
  ---------------------------------------------------*/
  .benefit h2 {
    max-width: 100%;
    width: 100%;
  }


  /* 売上1000万円プレイヤー
  ---------------------------------------------------*/
  .player h3 {
    font-size: 3rem;
  }


  /* 全国展開している便利屋
  ---------------------------------------------------*/
  .expansion h2 {
    padding-left: 15px;
    padding-right: 15px;
  }


  /* メールフォーム
  ---------------------------------------------------*/
  .mailform h2 {
    padding-left: 15px;
    padding-right: 15px;
  }


  }


    /* 画面サイズが576px以下の場合に適用 */


    /*共通
    ---------------------------------------------------*/
    @media only screen and (max-width: 576px) {

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    	font-size: .9rem;
    	line-height: 1.4em;
    }


    body {
      padding-top: 62px;
    }


    /*背景
    ---------------------------------------------------*/
    .bg_default {
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .bg_white {
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .bg_orange {
      padding-top: 50px;
      padding-bottom: 50px;
    }


    /*.sp非表示
    ---------------------------------------------------*/
    .pc {
      display: none !important;
    }

    /*.sp表示
    ---------------------------------------------------*/
    .sp {
      display: block !important;
    }

    /*見出し
    ---------------------------------------------------*/
    .midashi02 {
      font-size: 1.2rem;
    }


    /*リンク
    ---------------------------------------------------*/
    .button01 {
      font-size: 1.2rem;
      padding: 10px 30px;
    }



    /*margin
    ---------------------------------------------------*/
    .sp-mb-10 {
      margin-bottom: 10px;
    }

    .sp-mb-20 {
      margin-bottom: 20px;
    }

    .sp-mb-30 {
      margin-bottom: 30px;
    }

    .sp-mb-40 {
      margin-bottom: 40px;
    }

    .sp-mb-50 {
      margin-bottom: 50px;
    }

    .sp-mb-60 {
      margin-bottom: 60px;
    }

    .sp-mb-70 {
      margin-bottom: 70px;
    }

    .sp-mb-80 {
      margin-bottom: 80px;
    }

    /*メニュー
    ---------------------------------------------------*/
    .toggle .txt {
      font-size: .9rem;

    }


    /* header
    ---------------------------------------------------*/
    header {
      height: 62px;
    }

    header .left {
      margin-top: 17px;
    }

    header .left .logo {
      max-width: 230px;
      width: 100%;
    }

    header .right .tel {
      width: 37px;
      right: 29px;
      margin: 0;
    }

    header .right .contact i {
      font-size: 28px;
    }


    /* お知らせ
    ---------------------------------------------------*/
    .news h2 {
      font-size: 1.2rem;
    }


    /* 便利屋の需要
    ---------------------------------------------------*/
    .needs ul li p {
      font-size: 1.3rem;
    }


    /* 便利屋が求められていること
    ---------------------------------------------------*/
    .want .txt h3 {
      font-size: 1.2rem;
    }


    /* 売上1000万円プレイヤー
    ---------------------------------------------------*/
    .player h3 {
      font-size: 1.3rem;
    }

    .player .case h4 {
      font-size: 1.2rem;
      top: -25px;
    }

    .player .case h5 {
      font-size: 1.2rem;
    }

    .player .case .row {
      padding: 30px 15px 15px;
    }


    /* 開業の準備
    ---------------------------------------------------*/
    .ready h2 {
      max-width: 200px;

    }

    .ready .paper section ul li {
      font-size: 1.2rem;
    }


    /* 恩恵を受けることが出来るんです
    ---------------------------------------------------*/
    .benefit .flow .flow_content h4 {
      font-size: 1.4rem;
    }

    .benefit .flow .flow_content h4 .number {
      font-size: 1.4rem;
      padding-top: 8px;
      width: 35px;
      height: 35px;
    }


    /* 全国展開している便利屋
    ---------------------------------------------------*/
    .expansion .map {
      padding: 15px;
    }

    .expansion .open {
      padding: 15px;
    }

    .expansion .open h3 {
      font-size: 1.3rem;
    }

    .expansion .open .button01 {
      margin: 10px 0px;
      width: 100%;
      text-align: center;
    }


    /* メールフォーム
    ---------------------------------------------------*/
    .mailform h2 {
      max-width: 350px;
    }


    }