/*-------------- media query ------------*/
.sp,
.sp_768,
.sp_mini{
  display: none;
}
.spTitle{
  display: none;
}
@media screen  and (max-height: 860px) and (orientation:landscape) {
  /* #header{
    height: var(--spHeaderHeight);
  } */

  #keyvisual .ti {
    font-size:12vh;
    top:calc(var(--pcHeaderHeight) + 3%);
  }
  #keyvisual .cont .copy {
    font-size:6vh;
  }
  #keyvisual .cont .siteName{
    display: flex;
    justify-content: center;
    width:fit-content;
    margin-top:.5em;
  }

}

@media screen and (max-width: 1024px)  {
/*-------------- 1024px ------------*/
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  .spbr{
    display: inline;
  }
 header{
   position: fixed;
   top:0;
   left:0;
 }
  #header{
    height: var(--spHeaderHeight);
    justify-content:space-between;
    padding:0;
  }
  #header .siteName span{
    display: block;
  }
  #header .siteName{
    position: static;
    height:var(--spHeaderHeight);
    width:auto;
    background:transparent;
  }
  #header .siteName a{
    display: block;
    height:100%;
    width:var(--spHeaderHeight);
    background:black;
    padding:10px;
  }
    #header .siteName .sp_text{
      font-size:.8rem;
      font-weight: 400;
      line-height: 1.2;
      text-align: left;
      padding-left:10px;
    }
    #header .siteName .sp_text .large{
      font-size:1.8em;
    }
  .keyvisual_img,
  #keyvisual{
    margin-top:var(--spHeaderHeight);
  }
  /*// globalmenu ///*/
#globalmenu{
  position: fixed;
  top:var(--spHeaderHeight);
  left:0;
  background:rgba(0,0,0,.3);
  background-size:cover;
  max-width: none;
  width:100%;
  height: calc(100% - var(--spHeaderHeight));
}
#globalmenu:after{
  content:"";
  display: block;
  position: absolute;
  top:0;
  left:0;
  background:rgba(0,0,0,.5);
  mix-blend-mode: screen;
  height: 100%;
  width:100%;
  z-index: 17;
}
#globalmenu:before{
  content:"";
  display: block;
  position: absolute;
  top:0;
  right:0;
  background:black;
  height: 100%;
  width:80%;
  z-index: 18;
}
 #menu{
  position: relative;
  margin:0 0 0 auto;
  height: 100%;
  width: 80%;
  z-index: 20;
 }
 #menu ul{
   display: block;
   position: relative;
   z-index: 20;
   padding-top:13vh;
   padding-left:10%;
 }
 #menu ul li a{
   color:white;
   padding:1rem;
   font-size:clamp(18px,4vw,20px);
   text-align: left;
 }
  #nav-drawer{
    display: block;
  }
  #keyvisual{
    height: calc(100% - var(--spHeaderHeight));
  }

}

@media screen and (max-width: 926px) and (orientation:landscape) {
  #header{
    height: var(--spHeaderHeight);
  }
  #keyvisual .ti br{
    display: none;
  }
  #keyvisual .ti{
    top:calc(var(--spHeaderHeight) + 8%);
    font-size: 12vh;
  }
  #keyvisual .cont .copy{
    font-size: 25px;
  }
    #keyvisual .cont .copy br{
      display: none;
    }
  #keyvisual .cont .siteName{
    display: flex;
    justify-content: center;
    width:fit-content;
    font-size: clamp(16px,3vw,25px);
    margin-top:0;
  }
  #menu ul li a{
    font-size:2vw;
    padding:2vh;
  }
}

@media screen and (max-width: 834px) {
  #header{
    height:var(--spHeaderHeight) ;
  }
  .keyvisual_img.sub,
  #keyvisual.sub{
    height: clamp(180px,30vh,330px);
  }

  .keyvisual_img .cont {
    top:0;
    left:0;
    right:auto;
    padding-top:0;
    transform:none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - var(--spHeaderHeight));
  }
  .keyvisual_img .cont .parts01{
    display: none;
  }
  .keyvisual_img .cont .parts02{
    top:calc( 100vh / 4);
    right:auto;
    width:75%;
  }
  .plesuers .elem{
    display: block;
    margin-bottom: 15%;
  }
  .plesuers .elem .textarea{
    width:100%;
    padding:0;
  }
  .plesuers h4{
    text-align: center;
  }
.plesuers .elem ul{
  width:100%;
}
.lifeinfo.flex{
  display: block;
}
#useful .lifeinfo.flex > .elem{
  width:100% !important;
  margin-bottom: 5%;
}
.shopping-center {
  display: block;
}
.shopping-center .imgs{
  width:100%;
}
.shopping-center .textaera{
  width:100%;
  padding:0;
}
#useful .anyshop.flex > .elem{
  width:48%;
}

.security .item2 dl.equip-info{
  margin:0;
}
dl.equip-info.doorcover dd .imgs{
  width:80%;
  margin:auto;
}
.security-system.flex.block2{
  display: block;
}
.security-system.flex.block2 > .elem{
  width:100%;
}
.item.system24 .imgs{
  max-width: 600px;
  margin:auto;
}
ul.smart-point .flex{
  display: block;
}
ul.smart-point li .flex dl{
  margin:0;
  width:100%;
}
ul.smart-point li .flex .diagram{
  width:80%;
  margin:auto;
}
/* .door.flex.block2{
  display: block;
}
.door.flex.block2 > .elem{
  width:100%;
} */
  /*///////// footer /////////*/



/*-------------- 834px ------------*/
}


@media screen and (max-width: 769px) {
  .spbr_middle{
    display: inline;
  }
  .sp_768_none{
    display: none;
  }
  .sp_768{
    display: block;
  }
  .title h3 img{
    height: 15vw;
  }

  #top_data .data ul li{
    display: block;
  }
  #top_data .data ul li .imgs,
  #top_data .data ul li dl{
    width:100%;
  }
#top_data .data ul li .imgs{
  max-width: 600px;
  margin:auto;
  padding:1.5em 0;
}
#top_data .data ul li.data06 .imgs{
    display: flex;
    padding:0;
}
#top_data .data ul li.data06 .imgs .img01,
#top_data .data ul li.data06 .imgs .img02{
  position: static;
  width:100%;
  max-height: 100%;
  padding:0;
}
#top_data .data ul li.data06 .imgs .img01{
  width:46%;
}
#top_data .data ul li.data06 .imgs .img02{
  width:54%;
}
#top_data .data ul li.data04 .imgs{
  overflow-x:scroll;
  padding:1em 0;
}
#top_data .data ul li.data04 .imgs img{
  width:200%;
  max-width: none;
}
#top_access{
  background-size:contain;
}
ul.access_detail{
  flex-wrap: wrap;
  justify-content: left;
}
ul.access_detail li{
  width:45%;
}
#top_access h4 {
  font-size:clamp(17px,3vw,20px);
}

#top_feature .feature .elem{
  padding:0;
  margin:0;
}

#top_feature .feature .elem .textarea{
  width:75%;
  margin-left:-80%;
}
#top_feature .feature .elem .ti {
 text-align: left;
}
#top_feature .feature .elem .ti img{
  height: 20vw;
}
  /*-------------- 769px ------------*/
}
@media screen and (max-width: 640px) {
  :root{
    --btmButtonHeight:80px;
  }
  .top.btminfo{
    display: none;
  }
ul.type-list.flex.block3{
  justify-content: center;
}
ul.type-list.flex.block3 li{
  width:48%;
  margin:1%
}
ul.type-list.flex.block3 li.j{
    width:48%;
}
ul.type-list.flex.block3 li.remarks{
    width:100%;
    padding:1em 0;
}
ul.type-list a::after {
  padding:.3em;
  font-size:1em;
}
.remarks .flex.block2 .elem:nth-child(1){
  width:65%;
  padding-right:.3em;
}
.remarks .flex.block2 .elem:nth-child(2){
  width:35%;
}
ul.equip-list.flex.block3 li{
  width:46.8%;
}
ul.equip-list li.equip-image{
  width:100% !important;
  height: 100vw;
}
.bathroom.flex.block3 > .flex{
  width:100%;
}
.bathroom.flex.block3 .flex .flex.long dl{
  margin-top:0;
}
.toilet.flex.block4 {
  flex-wrap: wrap;
}
.toilet.flex.block4 li{
  width:46.8%;
}
.toilet.flex.block4 li:nth-child(3){
  width:100%;
}
.equip-list,
#equipment.contents,
#security.contents{
  padding:0;
}
.camera{
  display: block;
}
.camera dl,
.camera .imgs{
  width:100%;
  margin:1em 0;
}
.security.flex.block2, .security .flex.block2{
  display: block;
}
.security.flex.block2 > .elem, .security .flex.block2 > .elem{
  width:100%;
}
#smartlife{
  padding-top:78vw;
  background-size:contain;
  background-position: center top;
}
#smartlife > .flex{
  display: block;
}
#smartlife .flex .elem{
  width:100%;
}
.ai_speaker {
  padding:2.2em;
  margin-top:2em;
}
.ai_speaker .flex{
  display: block;
}
.ai_speaker .flex .imgs{
  width:100%;
  margin:0 auto 1em;
}
.ai_speaker .flex .text{
  width:100%;
  margin:0;
}
/*//// footer /////////*/
.btminfo{
  display: none;
  position: fixed;
  bottom:0;
  left:0;
  width:100%;
  z-index: 776;
  height: var(--btmButtonHeight);
  padding:0;
}
.btminfo:after{
  display: none;
}
.btminfo .ti{
  font-size:1em;
  margin:3px;
  /* display: none; */
}
.btm.btminfo{
  border-top:1px solid #444;
}
ul.info_btn li{
  margin:0 5px;
}
ul.info_btn li a{
  font-size:1.1em;
  padding:.5em 1em;
}
.gototop{
  bottom:calc(1em + var(--btmButtonHeight));
}
.gototop a{
  font-size:.7em;
}

  .footer{
    padding:1rem 2rem ;
  }
  .footer dl dd{
    font-size:.85em;
  }
  #footer{
    padding-bottom: calc(2em + var(--btmButtonHeight));
  }

/*-----------------------------------*/
  .hidden640{
    display: none;
  }

}
@media screen and (max-width: 428px) {
  .spbr_mini{
    display: inline;
  }
  .sp_mini{
    display: block;
  }
  .sp_mini_none{
    display: none;
  }
  /*///////////////////////////*/
  .inner{
    padding:0 1.5em;
  }
.addimage.bg01,
.addimage.bg02{
    height: 80vh;
  }
  .keyvisual_img .cont .parts02{
    top:calc( 100vh / 6);
  }
  .spTitle{
    display: flex;
    position: relative;
    padding:1em;
  }
  .spTitle::after{
    content:"";
    display: block;
    background:#777CA7;
    mix-blend-mode: multiply;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height: 100%;
  }
  .spTitle .textarea{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 20;
    color:white;
    text-align: left;
  }
    .spTitle .textarea .text{
      width:65%;
    }
    .spTitle .textarea span{
      display: inline-block;
    }
  .spTitle .textarea .large{
    font-size:1.8em;
    line-height: 1.2;

  }
    .spTitle .textarea .logo{
      background:black;
      width:20%;
      height: auto;
      padding:10px;
      margin-right:10px;
    }

  #keyvisual .access{
    display: block;
  }
  ul.access_detail{
    display: block;
  }
  ul.access_detail li{
    width:auto;
    margin:1em;
  }
  .addimage.bg02 .text{
    padding:2em;
  }
  #top_feature .feature .elem{
    display: block;
    margin-bottom: 4em;
  }
  #top_feature .feature .elem .imgs{
    width:100%;
  }
    #top_feature .feature .elem > .ti{
      margin-bottom: -1em;
      margin-left:2em;
      z-index: 24;
      position: relative;
    }
  #top_feature .feature .elem .textarea{
    width:100%;
    margin-left:0;
    padding-top:0;
    padding:0 2em;
    margin-top:-1em;
    z-index: 25;
    position: relative;
  }
  #top_feature .feature .elem .textarea .box{
    background:#F5F5F5;
  }
  .feature.inner{
    padding:0;
  }
  .plesuers .elem ul.flex.block2{
    display: block;
  }
  .plesuers .elem ul.flex.block2 li{
    width:100%;
    margin-bottom: 2em;
  }
  .convine.flex.block2{
    display: block;
  }
  #useful .convine.flex.block2 > .elem{
    width:100%;
  }
  #useful .lifeinfo.flex > .elem{
    display: block;
  }
  #useful .lifeinfo.flex > .elem > .elem{
    width:85%;
    margin:auto;
  }
  #security{
    margin-bottom: 10%;
  }
  dl.equip-info dd.flex.picking{
    display: block;
  }
  .security .item dl.equip-info dd.flex.picking p,
  .security .item dl.equip-info dd.flex.picking .imgs{
    width:100%;
  }
  .bathroom.flex.block3 .flex .flex.long{
    display: block;
  }
  .bathroom.flex.block3 .flex .flex.long .imgs,
  .bathroom.flex.block3 .flex .flex.long dl{
    width:auto;
    margin:0 0 1em 0;
  }
  .store-detail{
    display: block;
  }
  .store-detail .imgs{
    width:100%;
  }
  .store-detail .textarea{
    width:100%;
    padding:1em;
    margin:0;
  }
  #smartlife dl.multilight dd.flex{
    display: block;
  }
  dl.multilight dd.flex .imgs,
  dl.multilight dd.flex p{
    width:100%;
  }
  dl.multilight dd.flex .imgs{
    padding:0 2em;
  }
  dl.multilight dd.diagram{
    padding:1em;
  }
  ul.smart-point{
    display: block;
  }
    ul.smart-point li{
      width:auto;
      margin:2% 4%;
    }
  /*/////////// footer ///////////////*/

  .copyright{
    font-size:.7em;
  }

    /*-------------- 428px ------------*/
  }