@media screen and (max-width:1024px) and (orientation: portrait){
   #topcontents .textarea .txt p{
     margin-top:10px;
   }
   #topcontents .cont01 .textarea .txt{
     top:6%;
     transform:none;
     z-index: 33;
     padding-left:5%;
     padding-right:0;
   }
   #topcontents .cont01 .textarea .ph{
     width:75%;
   }
   #topcontents .cont01 .textarea .ph img{
     top:auto;
     bottom:20px;
     transform:none;
   }
   #topcontents .cont01 .textarea .ph::after{
     top:0;
   }
   #topcontents .cont02 .textarea .ph{
     width:80%;
   }
   #topcontents .cont02 .textarea .txt{
     top:10%;
     transform:none;
     z-index: 33;
     padding-left:10%;
   }
   #topcontents .cont02 .textarea .ph:after{
     height: 55%;
   }
}
/* @media screen and (max-width:1024px) and (orientation: landscape) {
}  */
@media screen and (max-width:1024px) {
  .sp{
    display: block;
  }
  .pc{
    display: none;
  }
  .brsp{
    display: inline;
  }
  .tel a{
      pointer-events: auto;
    }
  /*-------------------------------------*/
    #header{
      height: 60px;
    }
    #header .header .logo .icon-logo{
      width:clamp(100px,13vw,200px);
      height:clamp(40px,4vw,80px) ;
    }
    #nav-drawer{
      width:25%;
    }
    .hanbargar:before{
      top:10px;
    }
    .hanbargar:after{
      bottom:10px;
    }
    #header.open .hanbargar:before{
      transform:rotate(18deg) translateY(-11px);
    }
    #header.open .hanbargar:after{
      transform:rotate(-18deg) translateY(11px);
    }
  /*-------------------------------------*/
    #message .textarea .pdr{
      padding-right:280px;
    }
    #message .phtoarea .ph01{
      width:100%;
      padding-right:0px;
      }
    #message .phtoarea .ph02{
      width:100%;
      margin:0;
      }
    #message .phtoarea .ph02:after{
      left:100px;
      bottom:-100px;
    }


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

@media screen and (max-width:835px){
 #globalmenu .menu ul{
   display: block;
 }
  #globalmenu .menu ul li{
    width: 100%;
  }
  #globalmenu .menu ul li .en{
    display: inline-block;
    font-size:6vw;
    margin-right:20px;
  }
  .colum2{
    display: block;
  }
  .colum2 .titlearea{
    width:100%;
  }
  .colum2 .contentarea{
    width:100%;
  }
  .contentarea{
    padding:4%;
  }
  .title h3{
    text-align: center;
  }
  /*/----------------------------/*/
  #message .textarea .pdr{
    padding-right:0px;
  }
  #message .phtoarea{
    width:100%;
    position: static;
    display: flex;
  }
  #message .phtoarea .ph01:after,
  #message .phtoarea .ph02:after{
    display: none;
  }
  #shop .flex{
    display: block;
  }
  #shop .flex > div{
    width:100%;
    text-align: center;
  }
/*/----------------------------/*/
  .visible834{
    display: block;
  }
  .hidden834{
    display: none;
  }
/*//////// 769 ///////////*/
}
@media screen and (max-width:640px){
  #topcontents .photoarea{
    width:25%;
  }
  #topcontents .textarea{
    width:75%;
  }
  #shopInfo .flex{
    display: block;
  }
  #shopInfo .photoarea{
    display: flex;
    width:100%;
  }
  #shopInfo .textarea{
    width:100%;
  }

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

@media screen and (max-width:429px){
  html{
    font-size:87.5%;
  }
  #contents{
    padding-top:10vw;
    background-size:60%;
  }
  #topcontents .textarea .txt {
    padding-left:8% !important;
  }
  #topcontents .textarea .txt p{
    font-size:1rem;
    margin-top:0;
    padding-left:0;
  }
  #message .staff .member{
    padding:1%;
  }
  #message .staff .member .name .position{
    padding-right:0;
    display: block;
  }

/*/----------------------------/*/
  .brsp480{
    display: inline;
  }
  .visible480{
    display: block;
  }
  .hidden480{
    display: none;
  }
/*//////// 480 ///////////*/
}
@media screen and (min-width:1025px){
  #message .textarea .pdr{
    padding-right:310px;
  }
  #message .phtoarea {
    top:10%;
  }
}
@media screen and (min-width:1366px){
#message .textarea .pdr{
  padding-right:300px;
}
}
@media screen and (min-width:1920px){
#message .textarea .pdr{
  padding-right:180px;
}
}