@media screen and (max-width:1024px) and (orientation: portrait){
  .pageTitle{
      top:clamp(90px,12vw,300px);
  }
  .pageTitle  h2{
    font-size:15vw;
    margin-left:-.5rem;
  }
  #contents{
    padding-top:clamp(200px,30vw,500px);
    padding-bottom:clamp(150px,30vw,500px);
  }
  #keyvisual .topSlider .button-next{
    width:30px;
    height: 30px;
    bottom:1.5%;
  }
  /*------------------------------------*/
  #staff .menber{
    display: block;
  }
  #staff .menber .row{
    width:100%;
  }
 /*//////// footer //////*/
  #footer{
    position: fixed;
    bottom:0;
    left:0;
  }

}
@media screen and (max-width:1024px) and (orientation: landscape) {

}
@media screen and (max-width:1024px) {
  .sp{
    display: block;
  }
  .pc{
    display: none;
  }
  .brsp{
    display: inline;
  }
  .telno a{
      pointer-events: auto;
    }
  /*-------------------------------------*/
body.subpage{
  background-size:15% ;
}
  #header{
    width:100%;
    position: fixed;
    top:0;
    left:0;
  }
  #header .header{
    width: 100%;
    background: transparent;
    padding:0;
  }
  #header .header-inner{
    width: 100%;
    background:rgba(233,233,233,.55);
    border-radius: 100px;
    padding:.8rem;
    z-index: 999;
  }
  #header .header-inner .logo{
    margin:auto;
    min-width:auto;
    max-width: 300px;
    width:clamp(180px,30vw,300px);
  }
  #nav-drawer {
    display: block;
    z-index: 1000;
  }

  #globalmenu {
    position: fixed;
    top:100%;
    left:0;
    width:100%;
    height: 100%;
    background:white;
    margin:0;
    z-index: 777;
    /* transform:translateY(100%); */
    transition:.3s all var(--custom-ease-easeOutCubic);
    transition-delay: .4s;
  }
  #globalmenu:before {
    content:"";
    display: block;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.8);
    position: fixed;
    top:100%;
    left:0;
    z-index: 555;
    transition:.2s all var(--custom-ease-easeOutCubic);
    transition-delay: .2s;
  }

  #globalmenu .menu ul{
    display: block;
    text-align: center;
  }
    #globalmenu .menu ul li{
      margin:2vh;
    }
  #globalmenu .menu ul li a{
    font-size:1.5rem; /* noclamp */
    font-size:clamp(20px,4vw,25px);
  }
.globalmenu-inner {
  display: block;
  padding-top:20vw;
  position: relative;
  height: 100%;
  background:white;
  z-index: 666;
}
.spfooter{
  position: absolute;
  bottom:0;
  left:0;
}

#header.open #globalmenu{
  display: block;
  top:0;
}
#header.open #globalmenu:before {
  top:0%;
}

  /*-------------------------------------*/
#contact .inner{
  margin: 4% 10% 0;
}
#post ul.postlist li{
  width:46%;
  margin:2%;
}
#works .workslist .inner .item{
  width:48%;
  height: 25vw;
}

  /*//////// 1024 ///////////*/
}

@media screen and (max-width:835px){
  html{
    font-size:87.5%;
  }
.worksSlider{
  padding-top:clamp(80px,10vw,250px);
}
.worksSlider .button-prev,
.worksSlider .button-next{
  width:clamp(25px,10vw,40px);
  height:clamp(25px,10vw,40px);
}
  /*/----------------------------/*/
#works .workslist .inner .item{
  width:100%;
  height: auto;
}
#office .googlemap{
  width:100%;
}
#proposal .inner{
  margin-top:6%;
  margin-left:5%;
}
#contact .formarea{
  margin:4% ;
}
#otherlist .title{
  margin:1rem;
}

#post {
  display: block;
}
#post .inner{
  width:auto;
}
#post .post{
  max-width: 640px;
  margin:auto;
}
#post #archive{
  width:auto;
  padding:0 4%;
}
#post #archive .post_list{
  display: flex;
  flex-wrap: wrap;
}
#post #archive .post_list li{
  width:47%;
  margin:0 1.5%;
}
/*/----------------------------/*/
  .visible834{
    display: block;
  }
  .hidden834{
    display: none;
  }
/*//////// 769 ///////////*/
}
@media screen and (max-width:640px){
  .title h3 {
    font-size:1.2rem;
  }
  .data{
    margin-left:0;
    margin-right:0;
  }

  #keyvisual .blocks{
    display: block;
  }
  #keyvisual .ph1,
  #keyvisual .ph3,
  #keyvisual .content .works_text{
    display: none;
  }
  #keyvisual .row .content{
    top:35%;
    left:50%;
    transform: translate(-50%,0);
    width:100%;
    text-align: center;
  }
  #keyvisual .row .content::before{
    display: none;
  }
  #keyvisual .more_btn{
    width:100%;
    margin:2rem auto;
  }
  #keyvisual .row .content .new{
    margin:auto;
  }
  #keyvisual .topSlider .button-next{
    bottom:10%;
  }

  #keyvisual .topSlider .pagenation span.swiper-pagination-bullet{
    width:6vw;
  }

  #works .introduction{
    display: block;
  }

  #works .introduction .imgs{
    width:100%;
    padding:5% 10%;
  }
  #works .introduction .textarea{
    width:100%;
    padding:10%;
  }
  #works .introduction .worksTitle{
    font-size:.8em;
  }

  #staff .menber .section{
    font-size:clamp(15px,3.5vw,30px);
  }
  #staff .menber .name{
    font-size:clamp(20px,5vw,26px);
  }
  #staff .menber .sub{
    font-size:clamp(14px,3vw,20px);
  }

  #archives .tile .row{
    width:50%;
    padding:6px;
  }

  #proposal .inner{
    margin-top:10%;
    margin-left:4%;
  }
  #proplist .item{
    display: block;
  }
  #proplist .item .itemname{
    width:100%;
  }
  #proplist .item .itemname .btn{
    margin:0 0 1rem 0;
    max-width: 150px;
    font-size:1rem;
  }
  #proplist .item .itemname .btn a{
    padding:.3em 1rem;
  }
  #proplist .item .itemname .name{
    font-size:1.2rem;
    text-align: left;
    padding-left:30px;
    padding-right:0;
  }
  #proplist .item .itemname .name:after{
    left:0;
    right:auto;
    height: 20px;
    transform:rotate(90deg);
  }
  #proplist .item .imgs{
    width:100%;
    border:0;
    padding:0;
  }
  #proplist .item .imgs p{
    line-height: 1.8;
    font-weight: 400;
    font-size:.85em;
  }

  #contact .inner{
    margin:4%;
  }
  #contact p.txr{
    text-align: center;
  }
  #contact p.telno{
    font-size:7vw;
    text-align: center;
  }

  #contact .thanks h3{
    font-size:8vw;
  }
  #contact .thanks h4{
    font-size:5.5vw;
  }

  .footer .logo{
    width:70px;
  }
  .footer .name{
    font-size:14px;
    line-height: 1.4;
  }
  .footer p{
    font-size:10px;
  }
  .footer .icons i{
    font-size:23px;
  }

/*/----------------------------/*/
  .visible640{
    display: block;
  }
  .hidden640{
    display: none;
  }
  .brsp640{
    display: inline;
  }
  /*//////// 640 ///////////*/
}

@media screen and (max-width:429px){
  html{
    font-size:87.5%;
  }
.inner{
  margin-left:15%;
}
.modaal-video-wrap{
  margin:0;
}
.footer .footerlink a{
  display: block;
  text-align: right;
  margin:0 0 0 auto;
}
/*/-------------------------------/*/
#post #archive .post_list{
  display: block;
}
#post #archive .post_list li{
  width:100%;
  margin:0;
}
#post .pagenation{
  margin:8% 0;
}
#post .pagenation a.btn{
  padding:1em;
  margin:2%;
}


/*/----------------------------/*/
  .brsp480{
    display: inline;
  }
  .visible480{
    display: block;
  }
  .hidden480{
    display: none;
  }
/*//////// 480 ///////////*/
}
@media screen and (max-width:342px){
  .footer .footerlink {
    position: static;
  }
  .footer .footerlink a{
  display: inline-block;
  text-align: left;
  }
}