@media(max-width:1024px){

header{
  width:100vw;
  height: 65px;
}

.header__container{
  height:65px;
}

.header__nav--list{
  display: none;
  flex-direction: column;
}

.header__nav--list a{
    display: block;
    text-decoration: none;
    color: #333333;
    background-color: #ffffff;
}

.header__logo{
  margin-left: 20px;
}

.header__logo a{
  font-size: 32px;
}

.burger-btn{
  display: block;
}



.fv__wrapper{
  position: absolute;
  top:50%;
  left:5%;
}

.fv__wrapper--title{
  margin-bottom: 23px;
}



.news__container{
  left:20px;
  width: 90vw;
  height: 94px;
  margin-left: 0;
  margin-top: -47px;
}

.news__wrapper {
    margin-top: 30px;
    margin-left: 20px;
}



.concept__wrapper {
    width: 90vw;
    padding-left: 0;
}

.concept__container--title h2{
  font-size: 26px;
}
.concept__container--title{
  margin-bottom: 15px;
}

.concept__container--price p{
  font-size: 22px;
  line-height: 1.64;
}

.concept__container--text{
  width: 330px;
}

.concept-btn{
  margin-top: 57px;
}

.business__container{
  padding: 65px 0 0 0;
  margin: -5px 0 60px 0;
}

.business__container--title{
  margin-bottom: 21px;
}

.business__container--title h2{
  font-size: 26px;
}

.business__container--text{
  margin: auto;
  width: 90vw;
  margin-bottom: 30px;
}

.business__wrapper img {
    width: 50vw;
    height: 90%;
}

.business__wrapper--top{
  width:90vw;
  height:159px;
  margin-top: 15px;
  padding-top:19px;
  margin-right: 0px;
}
.business__wrapper--main{
  margin-left: 20px;
}
.business__wrapper--number{
  margin-right: 14px;
}

.business__wrapper--number p{
  font-size: 56px;
  line-height: 0.64;
}
.business__wrapper--title h3{
  font-size: 22px;
  line-height: 1.64;
}
.business__wrapper--text{
  margin-left:20px;
}
.business__wrapper--middle{
  width:90vw;
  height:159px;
  margin-top: 15px;
  padding-top:18px;
  margin-right: 0px;
}

.business__wrapper--bottom{
  width:90vw;
  height:149px;
  margin-top: 15px;
  padding-top:19px;
  margin-right: 0px;
}

.works__container{
  margin-top: 20px;
  padding: 60px 0;
  background-image: url("../img/works-sp.png");
}

.works__container--title{
  margin-bottom: 21px;
}

.works__container--title h2{
  font-size: 26px;
}

.works__container--text{
  margin: auto;
  width:90vw;
}


.next-arrow{ right:-30px; }/*内側に右から10ピクセル移動*/
.prev-arrow{ left:-20px; }/*内側に左から10ピクセル移動*/

.slider__wrapper{
  height: 250px;
  background-color: #ffffff;
  box-shadow: 0 0px 16px rgba(0, 0, 0, 0.16);
  margin-top: 40px;
}

.slide-arrow{
	/*上下中央に矢印配置*/
	top:50%;
}

 .slider{
  width: 700px;
  padding-top: 30px;
}

.design__container{
  padding: 60px 0;
}

.design__container--title h2{
  font-size:26px;
}

.design__container--text{
  margin: auto;
  margin-top: 21px;
  margin-bottom:30px;
  width:90vw;
}

.design__container--contents{
  margin: auto;
  margin-bottom: 20px;
  width:90vw;
}



.design__items{
  width: 50%;
  height:370px;
  margin-bottom:20px;
}

.design__items img{
  margin: auto;
  padding-top: 20px;
}

.design__items--margin{
  margin: 0;
}

.design__items--contents{
  margin: auto;
  padding: 30px 30px;
  height:155px;
}

.design__items--text{
  margin-top: 11px;
}

.blog__container{
  margin-top: 60px;
}

.blog__wrapper{
  width:90vw;
  height:517px;
  padding: 60px 20px;
  flex-direction: column;
}

.blog__wrapper--left{
  margin-right: 0;
}

.blog__container--title{
  margin-top: 0px;
  margin-bottom: 18px;
}

.blog-btn{
  display: none;
}

.blog__container--contents{
  margin: auto;
  width:90%;
  height:241px;
}



.blog__container--date{
  margin-bottom: 8px;
}

.blog__container--text{
  display: none;
}

.blog__container--text-sp{
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
  color: #2D2D2D;
  text-decoration: underline;
}

.sp-btn{
  display: block;
  margin: auto;
  margin-top: 30px;
}

.contact__container{
  margin-top: 60px;
  padding: 60px 0;
}

.contact__container--title h2{
  font-size: 26px;
}

.contact__container--text{
  margin: auto;
  width: 90vw;
  margin-top: 31px;
  margin-bottom: 31px;
}

.contact__container--text p{
  font-size: 22px;
  line-height: 1.64;
}

.contact__wrapper{
  flex-direction: column;
}

.contact__wrapper--tel{
  justify-content: center;
  margin-right: 0;
}

.contact__wrapper--right p{
  font-size: 36px;
  line-height: 1.5;
}

.contact__wrapper--btn{
  margin: auto;
  margin-top: 15px;
  width: 318px;
  height: 63px;
}

.contact__wrapper--btn img{
  margin-right: 8px;
}

.contact__wrapper a{
  font-size: 18px;
  line-height: 1.61;
}

.contact__container--time{
  margin: auto;
  margin-top: 24px;
}

footer{
  /*height: 554px;*/
  padding: 60px 0 57px 0;
  background-image: url("../img/footer-sp.png");
}

.footer__text{
  margin: auto;
  margin-top: 20px;
  margin-bottom: 40px;
  width: 90vw;
}

.footer__links{
  display:none;
}

.copyright{
  margin-top: 0;
}


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

    .burger-btn{
        display: block;
        width: 30px;
        height: 24px;
        position: relative;
        z-index: 3;
        /*   codepenの挙動のため */
        background-color:transparent;
        border:none;
        margin-right: 20px;
      }


      .bar{
        background-color: #ffffff;
        width: 30px;
        display: block;
        position: absolute;
        left:50%;
        transform: translateX(-50%);
       }

      .bar_top{
        top: 7px;
        right:15px;
        border:1px solid #000000;
      }

      .bar_mid{
        top: 17px;
        right:15px;
        border:1px solid #000000;
      }

      .bar_bottom{
        top: 27px;
        right:15px;
        border:1px solid #000000;
      }


      .burger-btn.close .bar_top{
        transform: translate(-50%,10px) rotate(45deg);
        transition: transform .3s;
      }
      .burger-btn.close .bar_mid{
        opacity: 0;
        transition: opacity .3s;
      }
      .burger-btn.close .bar_bottom{
        transform: translate(-50%,-10px) rotate(-45deg);
        transition: transform .3s;
      }

      .nav__wrapper--sp{
        display: none;
        width: 100vw;
        height:100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        background-color:#ffffff;
      }

      .header__nav{
        width: 100%;
        height: 100%;
        z-index: 2;
        background-color:#ffffff;
      }

      .nav-item__contact-sp a{
        display: flex;
        align-items: center;
        width: 214px;
        height: 64px;
        padding: 20px 40px;
        font-size: 16px;
        font-weight:bold;
        text-align: left;
        background-color: #DBCEA0;
        color: #2D2D2D;
      }

      .nav-item__contact-sp img{
        margin-right: 8px;
        width: 30px;
        height: 21px;
      }

      .header__nav .header__nav--list{
        display: block;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: left;
        padding-top:100px;
        padding-bottom:62px;
      }
      .header__nav .nav-item{
        margin: auto;
        margin-bottom:55px;
        text-align: center;
      }

      body.noscroll{
        overflow: hidden;
      }

      .nav__wrapper{
          display: none;
      }

}

@media (max-width:1300px){

  .slider{
  width: 700px;
}

.blog__wrapper {
    width:100vw;
}

.blog__container--contents {
    height: 280px;
}

}


@media (max-width:760px){
.slider{
  width: 311px;
  padding-top: 23px;
}
}


@media(max-width:560px){

  .fv__wrapper{
  position: absolute;
  top:216px;
  left:27px;
}

.fv__wrapper--title h1{
  font-size: 36px;
}

  .sp{
  display: block;
}
  .news__wrapper{
  flex-direction: column;
  margin-top: 22px;
  margin-left: 20px;
}

.news__container--date{
  margin-right: 0px;
}

.news__container--text{
  display: none;
}

.news__container--text-sp{
  display: block;
  text-decoration: underline;
}

.concept__container{
 background-image: url(../img/concept-sp.jpg);
}
.concept__wrapper{
  width: 90vw;
  /*height: 701px;*/
  padding-left: 0px;
  padding-top: 65px;
  padding-bottom: 277px;
  margin-top: 54px;
}

.concept__container--text{
  margin-top: 15px;
  width: 90vw;
}

.business__wrapper{
  height:342px;
  margin-top:0;
  margin-bottom: 41px;
  flex-direction: column;
}

.business__wrapper img {
    width: 100vw;
    height: 100%;
}
.design__container--contents ul{
  flex-direction: column;
  width: 100%!important;
}

  .design__items {
    width: 90%;
    margin: auto!important;
    margin-bottom: 20px!important;
}



.design__items img{
  width: 295px;
  margin: auto;
  padding-top: 20px;
}

.design__items--contents{
  padding: 30px 30px;
  width:90vw;
  height:155px;
}

.blog__container--contents{
  margin: auto;
  width:295px;
  height:241px;
  padding:10px 10px;
}

.blog__container--item{
 flex-direction: column;
}

.blog__container--date{
  margin-right: 0;
  margin-bottom: 8px;
}

}

@media(max-width:360px){

  .slider{
  width: 80vw;
  padding-top: 23px;
}

.fv__wrapper--title h1 {
    font-size: 9.8vw;
}
.news__wrapper p {
    font-size: 90%;
}
  .design__items--contents {
    padding: 30px 0px;
}
  .design__items img {
    width: 80vw;
}

  .blog__container--contents{
  width:98%;
}

  .blog__container--text-sp{
  font-size: 0.8rem;
}

.contact__container--text p {
    font-size: 6vw;
}

.header__nav .nav-item{
        margin-bottom:30px;
      }
}

@media(max-width:1140px){
  .design__container--contents{
  width:100%;
}

.design__container--contents ul {
    justify-content: center;
    width: 90%;
}

.design__items--margin {
    margin: 0 0;
}


}