@media(max-width: 1140px) {
  .top-navi {
    display: none;
  }  

}

@media(max-width: 960px) {

  /* --------------------------------
  ヘッダー
  -------------------------------- */
  /* トップナビの非表示 */
  .top-navi {
    display: none;
  }

  /* ハンバーガーメニュー */

  /* ヘッダーの余白 */
  .logoarea {
    margin-bottom: 6%;
  }


  /* --------------------------------
  メイン
  -------------------------------- */
  .slick-track {
    height: auto;
  }

  .main-slider-common {
    width: 475px;
    background-size: cover;
    height: 270px;
  }


  /* --------------------------------
  ワーク
  -------------------------------- */
  .work-bg {
    top: 4%;
    left: 40%;
  }

  .work-slider>.slick-list {
    height: auto;
  }

  .work-slider-common {
    width: 400px;
    height: 250px;
    background-size: cover;
  }

  .text-slider-common {
    width: 400px;
    height: 250px;
    /* ドットに被らないようにするマージン */
    margin-bottom: 10px;
  }


  /* --------------------------------
  サービス
  -------------------------------- */

  /* 見出しの位置 */
  .service-title {
    transform: none;
    top: -7%;
    left: auto;
    padding: 0 15px;
  }

  /* 外枠のライン */
  .service {
    padding: 0% 5%;
    border: none;
    border-top: solid 10px;
    left: auto;
  }

  /* サービス内容を2カラに変更 */
  .service-wrap {
    flex-wrap: wrap;
  }

  .service-box {
    width: 100%;
    padding-bottom: 6%;
  }

  .service-box {
    display: flex;
  }

  .seivice-img {
    width: 35%;
    flex-shrink: 0; 
  }

  /* --------------------------------
  デザイン
  -------------------------------- */
  .design {
    padding: 0%;
    margin-bottom: 230px;
  }

  .design-title {
    top: -9%;
    left: 29%;
  }

  .design-copy1 {
    padding: 30px 0px;
  }

  .design-copy2 {
    padding: 60px 0px 30px 0px;
  }

  .design-wrap {
    border: none;
    border-top: solid 10px;

  }

  /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  work-page
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
  /* アイテムを1カラム表示にさせる */
  .item {
    width: 100%;
  }
}

@media(max-width: 520px) {

  /* --------------------------------
  共通設定
  -------------------------------- */
  h2 {
    font-size: 55px;
  }

  .sp {
    display: inline-block;
  }

  /* --------------------------------
  ヘッダー
  -------------------------------- */
  /* ヘッダーロゴの大きさ */
  .logo {
    font-size: 25px;
  }

  .sitecopy {
    font-size: 10px;
    letter-spacing: 3px;
  }

  /* --------------------------------
  トップ
  -------------------------------- */
  .topcopy1 {
    font-size: 55px;
  }

  .topcopy2 {
    padding-top: 4%;
    line-height: 1.5;
  }


  /* --------------------------------
  コンテンツ
  -------------------------------- */
  .contents-text {
    padding: 0 10%;
  }

  /* --------------------------------
  ワーク
  -------------------------------- */
  .work-title {
    font-size: 55px;
  }

  .work-btn {
    margin-bottom: 130px;
  }

  .work-slider-common {
    width: 230px;
    height: 150px;
  }

  .text-slider-common {
    width: 230px;
    height: 150px;
    /* ドットに被らないようにするマージン */
    margin-bottom: 130px;
  }

  /* --------------------------------
  サービス
  -------------------------------- */
  .service {
    padding: 0;
    margin-bottom: 45%;
  }

  .service-title {
    top: -2%;
    left: 0%;
    font-size: 55px;
  }

  .service-copy {
    padding: 7% 4%;
  }

  .service-wrap {
    padding: 0 10%;
  }

  .service-box {
    padding: 10% 0% 15% 0%;
    flex-wrap: wrap;
  }

  .seivice-img {
    width: 100%;
  }

  /* --------------------------------
  デザイン
  -------------------------------- */
  .design {
    margin-bottom: 100px;
  }

  .design-title {
    font-size: 55px;
    top: -6%;
    left: auto;
  }

  .design-copy {
    text-align: left;
    padding: 7% 5%;
  }

  .design-copy1 {
    letter-spacing: 2px;
    font-size: 19px;
    padding: 40px 0px 30px 0px;
    text-align: center;
    font-weight: bold;
  }

  .design-copy2 {
    letter-spacing: 2px;
    font-size: 19px;
    padding: 70px 0px 30px 0px;
    text-align: center;
    font-weight: bold;
  }

  .design-text p {
    font-weight: 100;
  }

  /* --------------------------------
  コンタクト
  -------------------------------- */
  .contact-title {
    font-size: 55px;
  }

  .contact-text {
    padding: 0% 10%;
    letter-spacing: 2px;
  }

  .footer-navi li {
    padding: 0 15px;
  }

  .footer-sitecopy {
    padding-bottom: 43px;
  }

  .copylight {
    font-size: 10px;
    transform: none;
    position: sticky;
    left: auto;
    text-align: center;
    bottom: auto;
    padding: 5% 0%;
  }


  /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  work-page
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
  /* work-page */
  /* 画像のサイズ変更 */
  .item img {
    width: 300px;
  }

  /* 説明文の行間 */
  .item-text .text-slider-common {
    line-height: 1.4;
  }
}