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

}
@media screen and (max-width:1100px){
  #header{
    height:70px;
  }
  #header .header .logo{
    width:130px;
  }
  #globalmenu {
    flex-basis: calc(100% - 150px);
  }

}
@media screen and (max-width:1024px) and (orientation:portrait){
  #keyvisual .content{
    top:45%;
  }

}

@media screen and (max-width:1024px){
  .hidden1024{
    display: none;
  }
  .visible1024{
    display: block;
  }
  .brsp1024{
    display: inline;
  }


  #header{
    height:55px;
  }
  #header .header .logo{
    width:110px;
  }
 .toggle_btn{
    display: flex;
  }

  #globalmenu{
    width:min(600px,80%);
    height: 100vh;
    background:var(--maincolor);
    position: fixed;
    top:0%;
    right:0;
    translate:100% 0;
    transform-origin: right;
    z-index: 26;
    transition:.6s all cubic-bezier(0.770, 0.000, 0.175, 1.000);
  }
  #header.mopen #globalmenu {
   translate:0% 0;
  }
  
  .globalmenu_bg {
    display: none;
    width:100%;
    height: 100%;
    position: fixed;
    top:0;
    left:0;
    z-index: 0;
    background:black;
    mix-blend-mode:color;
    opacity:.5;
  }
  #globalmenu nav > ul {
  display: block;
  z-index: 10;
  position: relative;
  width:100%;
  height: 100%;
  padding-top:50px;
  padding-left: 6%;
  }
  #globalmenu ul li{
  width:100%;
  height: auto;
  margin: 0;
  }
  #globalmenu nav ul li a{
  display: block;
  color:white;
  font-size:clamp(18px,2vw,24px);
  padding:clamp(5px,1.7vh,25px) 0;
  position: relative;
  text-align: left;
  line-height: 1.4;
  }
  /*-------------*/
  .timeline_area .dotline.dot03{
    height:16vw;
    left:48%;
    top:52.3%;
    rotate:8deg;
  }
  .timeline_area .dotline.dot04{
    height:21vw;
    left:43%;
    top:64%;
    rotate:-12deg;
  }
  .timeline_area .dotline.dot05{
    height:20vw;
    left:45%;
    top:80%;
    rotate:8deg;
  }

}
@media screen and (max-width:835px){
  .hidden834{
    display: none;
  }
  .visible834{
    display: block;
  }
  .brsp834{
    display: inline;
  }

  #land_scape .land_area .textarea{
    background:rgba(255,255,255,.7);
    padding:20px;
    width:70%;
   }

   #land_scape .kauai_area .textarea{
    position: relative;
    top:auto;
    left:auto;
    width:90%;
    margin: auto ;
    translate:unset;
    background:transparent;
    padding:0 20px
   }
   #land_scape .any_area{
    display: block;
   }
  
   #land_scape .any_area .thumb{
    float:left;
    margin:0 15px 0 0;
    width:45%;
   }
   #land_scape .any_area .elem{
    margin: max(20px,5%) auto;
    padding: max(20px,5%) 0 0 0;
    border-top:1px solid var(--maincolor);
   }

   #land_scape .any_area .elem:after{
    content:"";
    display: block;
    clear:both;
   }
   #designer .designer_area {
    gap:unset;
   }
   .designer_area .parson{
    flex-basis:46%;
    margin:0 2%;
   }
   .designer_area .parson dl dd{
    font-size:13px;
    text-align: left;
   }
   .timeline01{
    margin:0 0 8% 0;
   }
   .timeline02{
    margin: 0 0 6% 10%;
   }
   #lifestyle .timeline_area .line.timeline03{
    display: block;
   }
   .timeline_area .timeline03{
    margin:0 0 8% 0;
    display: block;
   }
   .timeline_area .timeline03 .thumb{
    margin-right:5%;
   }
   .timeline_area .timeline03 .box{
    margin:-3% 0% 10% 8%;
    translate:none;
   }
   .timeline_area .timeline04{
    margin:10% 6% 6% 0 ;
   }
   .timeline_area .timeline04 .thumb{
    width: 40% ;
    translate: 4% -10%;
   }
   .timeline_area .timeline05{
    margin: 15% 0 5% 10%;
   }
   .timeline_area .timeline06{
    margin: 4% 10% 10% 0;
   }
   .timeline_area .timeline07{
    margin:0 0 8% 0;
   }
   .timeline_area .dotline{
    display: none;
   }
   .timeline_area .line{
    position: relative;
    z-index: 10;
   }
   .timeline_area{
    padding:10% 0 ;
   }
   .timeline_area .dotline-all{
    position: relative;
    background:var(--maincolor);
    width:3px;
    height: 100%;
    opacity: .5;
    position: absolute;
    top:0;
    left:50%;
    translate:-50% 0;
    z-index: 0;
  }
  .timeline_area .dotline-all:before{
    content:"";
    width:16px;
    aspect-ratio: 1;
    background:var(--maincolor);
    position: absolute;
    top:0;
    left:50%;
    translate:-50% -50%;
    border-radius:50%;
  }
  .timeline_area .dotline-all:after{
    content:"";
    width:16px;
    aspect-ratio: 1;
    background:var(--maincolor);
    position: absolute;
    bottom:0;
    left:50%;
    translate:-50% 50%;
    border-radius:50%;
  }
  .timeline_area .txt{
    position: absolute;
    bottom:-10px;
    left:50%;
    translate:-50% 100%;
    color:var(--maincolor);
    width: 100%;
    text-align: center;
  }
}
@media screen and (max-width:769px){

  .visible768{
    display: block;
  }
  .brsp768{
    display: inline;
  }


/*/----------------contents 769  -------------*/
#keyvisual .kv.kv01 img{
 object-position: 80%;
}
#keyvisual .content .lp_title img {
  width:60vw;
}
#land_scape .land_area .imgs {
  translate: -15% 0;
}
#land_scape .land_area .textarea{
 top:50%;
 right:0;
 translate:0 -50%;
}

#contact_us:after{
  content:"";
  display: block;
  width:100%;
  height:100%;
  position: absolute;
  left:0;
  top:0;
  background:rgba(234, 77, 77, 0.2);
  mix-blend-mode: multiply;
}
#lifeinfo .map{
  flex-basis:50%;
}
#lifeinfo .info{
  flex-basis:50%;
}
#lifeinfo .info ul{
  display: block;
}
/*/--------------- footer 769 ----------------/*/

/*//////// 769 ///////////*/
}

@media screen and (max-width:640px){
 

.visible640{
  display: block;
}

/*/----------------contents 640  -------------*/

#style{
  overflow-y: hidden ;
}

#style .photoarea {
  width: 145%;
  margin: 8% -15% 8% -20%;
}


.lifestyle_content .elem {
  flex-wrap: wrap;
}
.lifestyle_content .text p.ti {
  margin-left: 0;
  margin-top: 0;
  padding: .3em 1em;
}

.lifestyle_content .elem  .text {
  order: 1;
  flex-basis: 100%;
}
.lifestyle_content .box .box_inner{
   margin-top: 0;
}
.lifestyle_content .box {
  margin: 0 auto;
}

.lifestyle_content .elem.el01 {
  margin-top: 4%;
}
.lifestyle_content .elem.el01 > .thumb {
   position: absolute;
  top: 22%;
  left: auto;
  translate: -10%;
  rotate: -2deg;
}
.lifestyle_content .elem.el01 .text p.ti {
  margin-bottom: 75%;
}
.lifestyle_content .elem.el01 p.en {
  text-align: left;
  margin-left: -1em;
}
.lifestyle_content .elem.el02 .thumb {
  order:2;
  flex-basis: 110%;
  margin: 0 -2% auto -5%;
}

.lifestyle_content .elem.el02 .box {
  margin: 0 auto 0 0;
  max-width: unset;
  width: 90%;
}

.lifestyle_content .elem.reverse .text p.ti {
  margin-right: auto;
  margin-left: -1.5em;
}
.lifestyle_content .elem.el02 .text p.ti {
  width: 100%;
}
.lifestyle_content .elem.el02 p.en {
  text-align: right;
  margin-right: -1em;
}
.lifestyle_content .elem.el03 .thumb {
  position: absolute;
  top: 15%;
  left: auto;
  translate: -10%;
  rotate: 2deg;
}
.lifestyle_content .elem.el03 .text p.ti {
  margin-bottom: 60%;
}
.lifestyle_content .elem.el03 .box {
  margin: 0 0 0 auto;
  width:83%;
}

.plan_content {
  display: flex;
  flex-wrap: wrap;
}
.plan_content:after {
  display: none;
}
.planmap {
  order: 3;
}

.plan_content .photoarea {
  padding-top:unset;
  display: flex;
  flex-wrap: wrap;
}

.plan_content .photoarea .imgs01 {
  position: static;
  width: 90%;
  margin: auto;
  order: 2;
}

.plan_content .photoarea .imgs02 {
  position: static;
  width: 70%;
  margin: auto;
  order: 1;
}

.plan_content p.copy {
  top: unset;
  right: unset;
  margin: auto;
  position: relative;
  text-align: center;
  padding: 5% 0;
  z-index: 50;
}

.plan_content .price {
  position: relative;
  top: 0;
  right: 0;
  margin: 15% auto;
}

.plan_content p.copy {
  order: 0;
}
.plan_content .photoarea {
  order: 1;
}
.plan_content .price {
  /* margin: 15% 4%; */
  margin: 16% auto;
  order: 2;
  z-index: 2;
}
/*-------*/
#land_scape .land_area{
  padding-bottom: 40%;
}
#land_scape .land_area .imgs {
  width:150%;
  translate: -15% 0;
}
#land_scape .land_area .textarea{
 top:70%;
 right:0;
 width:90%;
 translate:0 -50%;
}
#land_scape .any_area .elem .thumb{
  text-align: center;
}
#land_scape .any_area .elem{
  display: block;
  margin:max(40px,5%) auto;
 }
 #land_scape .kauai_area .textarea{
  width:100%;
 }
 #concept .concept_area02 .flex{
  display: block;
 }
 #concept .concept_area02 h4{
  margin-top:max(20px,3%);
 }
 #lifeinfo .box.thumbs ul{
  gap:3vw
 }
 #lifeinfo .box.thumbs ul li{
  flex-basis:calc(50% - 3vw);
 }

  /*//////// 640 ///////////*/
}

@media screen and (max-width:480px){

  .brsp480{
    display: inline;
  }
  
  .visible480 {
    display: block;
  }

  .hidden480 {
    display: none;
  }

  /*-------- header -----------*/
  #header .logo {
    width: 100%;
  }

  #globalmenu {
    width: 82%;
  }
/*----------- keyvisual -----------*/
  #keyvisual .content p {
    font-size: 3vw;
  }
/*-------------contents 480 --------*/



/*----------------------------------*/
#concept .concept_area01 .side-padding{
  padding-left:13px;
  padding-right:13px;
}
#land_scape .land_area{
  padding:0;
}
#land_scape .land_area .textarea{
  position: static;
  margin:auto;
  translate:none;
  width:100%;
 }
.designer_area {
  display: block;
}
.designer_area .parson{
  display: flex;
  gap:5%;
  margin:30px auto;
}
.designer_area .parson .photo{
  flex:0 1 40%;
}
.designer_area .parson dl{
  flex:0 1 55%;
}
.designer_area .parson dl dt .sub{
  font-size:12px;
}
.designer_area .parson dl dd{
  font-size:11px;
}
.make_town .flex{
  display: block;
}
.make_town .numbers ul li{
  margin:5% 0;
  padding-left:calc(min(18%,70px) );
}
.make_town .numbers ul li:before {
  width:15%;
}
.make_town .numbers ul li:after {
  width:15%;
  font-size:7vw;
}
.designer_area .ampersand{
  font-size:20.3vw;
  top:59%;
}
#access .access_area{
  display: block;
}
#access .access_area .img02{
  margin:30px auto;
}
#lifeinfo .life-information .cont {
  display: block;
  height: auto;
  margin:20px;
}
#lifeinfo .info {
  height: 50vh;
  overflow-y: auto;
}
#contact_us .cont{
  width:90%;
  margin:auto;
}

/*//////// 480 ///////////*/
}