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

  #header{
    padding:.5em;
    justify-content: space-between;
  }
  #header .logo{
    position: relative;
    z-index: 1000;
    width:100px;
  }
  #nav-drawer {
    display: block;
  }
  #menu{
    display: none;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    background: black;
    padding:0;
  }
  #menu ul{
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    height: auto;
    width:auto;
    padding:100px 10% 4% 10%;
    margin:0;
  }
  #menu ul li{
    width:100%;
    border-bottom:1px solid white;
  }
  #menu ul li a{
    display: block;
    padding:1.8rem;
    font-size:clamp(21px, 4vw, 25px);
  }
  #menu .sns {
  	display: block;
  }


  #keyvisual{
    background-position: 78% center;
  }
  #main p.onayami {
    font-size: 4vw;
    padding:4%;
  }
  /* #main span.strong {
    font-size: 8vw;
  } */
  #point .point-elem::after {
    height: 10vh;
  }
  #point .point-elem .inner{
    padding-top: 7vh;
  }
  #point .point-elem .textarea dl dt{
    font-size:2em;
  }
  #plan .plan-content{
    display: block;
    max-width: 480px;
    margin: 8% auto;
  }
  #plan .plan-content .light-plan,
  #plan .plan-content .standard-plan,
  #plan .plan-content .premium-plan {
    margin: 8% auto 20%;
  }
  #plan.plan-body th {
    height:60px;
    width:70%
  }
  #option .option-1 th, .option-1 td {
    padding: 10px 15px;
    text-align: left;
  }
  #option .option-1 th {
    width: 200px;
  }
  #product , #news { width : 100% ; }
  #flow .flow-content {
    padding-left:7%;
  }
  #flow .flow-content .elem{
    width:45%;
  }
  #flow .flow-content .elem:nth-child(3n){
    margin: 3% 4% 3% 0%;
  }
  #flow .flow-content .elem::after{
    width:10%;
    height: 10%;
  }
  #flow .flow-content .elem:nth-child(3n)::after{
    display: block;
  }
  #flow .flow-content .elem:nth-child(2n)::after{
    display: none;
  }
  /*-----------*/
  .hidden1024{
    display: none;
  }
  .visible1024{
    display: block;
  }
}
/*////////////////////1024//////////////////////////*/
@media screen and (max-width:834px){
  #main p.onayami {
    font-size: 5vw;
    padding:4%;
  }
  /* #main span.strong {
    font-size: 9vw;
  } */
  #main p.omakase {
    font-size: 5vw;
  }
  #main span.wo {
    font-size: 6vw;
  }

  #point .point-elem .inner{
    flex-wrap: wrap;
  }
  #point .point-elem .ti{
  	display: block;
    width:100%;
    font-size:1.8rem;
  }
  #point .point-elem .textarea dl dt{
    display: none;
  }

  /* #plan .plan-content{
    display: block;
    max-width: 480px;
    margin: 8% auto;
  }
  #plan .plan-content .light-plan,
  #plan .plan-content .standard-plan,
  #plan .plan-content .premium-plan {
    margin: 8% auto;
  } */

  /* #plan .plan-content .item{
    width: 100%;
    max-width: 480px;
    margin:8% auto;
  } */
  #option .row,
  #plan .row {
    margin:4% ;
  }
  #option .row .waku{
    max-width: 480px;
    margin:auto;
  }
  #option p.large{
    font-size:clamp(20px,3.5vw,1.6rem);
  }
  #option .option-flex {
    display:block;
    justify-content: center;
  }
  #option .option-1 {
    padding: 0;
  }
  #option .option-1 th {
    height: 60px;
    width: 240px;
  }
  #option .option-1 th,
  #option .option-1 td {
    padding: 10px 20px;
  }
  .btnarea{
  	display: block;
  }
    .btn{
      padding:.5em 0;
    }
  .btn a{
    font-size:clamp(16px,3.3vw,1.3rem);
    width: 100%;
    padding:1em ;
  }
  .sns_btn a{
    font-size: clamp(16px,3.3vw,1.3rem);
    width: 100%;
    padding:2em ;
  }
  /*----------*/
  .centerimg{
    padding:8% 4%;
  }

  /*-----------*/
  .hidden834{
    display: none;
  }
  .visible834{
    display: block;
  }
}
/*////////////////834//////////////////////////////*/
@media screen and (max-width:640px){
  .title{
    padding:0 4%;
    line-height: 1.6;
  }
  .title h3{
    font-size:1.5rem;
  }
  .title .sub{
    font-size:1.1rem;
  }
  #keyvisual .cont{
    max-width:100%;
    width:80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
  }
  #keyvisual .cont .productName{
    padding:1rem;
  }
  #keyvisual .cont .textarea .ti{
    font-size:2rem;
    text-align: center;
    margin-bottom:1rem;
  }
  #keyvisual .cont .textarea{
    padding-top:17vh;
  }
  #keyvisual .cont .textarea p br{
    display: none;
  }
  #point .point-elem .inner{
    display: block;
  }
  #point .point-elem .inner > div{
    width:100%;
  }
  #point .point-elem .photoarea,
  #point .point-elem .textarea{
    padding:4%;
  }

  #service .service-content {
    display: block;
  }
  #service .service-item {
    width: 100%;
    padding:1rem;
	  margin-bottom:3rem;
  }


  #plan .plan-body th,
  #plan .plan-body td {
	padding:10px 20px;
  }
  .waku {
    padding:1em;
  }
  #option .option-1 th {
    height: 60px;
    width: 250px;
  }
  .sns-flex {
    display: block;
  }
  #flow .flow-content {
    padding-left:13%;
  }
  #flow .flow-content .elem{
    width:85%;
    margin:10% 0;
  }
  #flow .flow-content .elem:nth-child(3n){
    margin:8% 0;
  }
  #flow .flow-content .elem::after{
    bottom:-3%;
    left:50%;
    right:auto;
    top:auto;
    width:13%;
    height: 13%;
    transform: rotate(90deg) translate(100% , 50%);
  }
  #flow .flow-content .elem:nth-child(2n):after{
    display: block;
  }
  #flow .flow-content .elem:nth-last-child(1):after{
    display: none;
  }
  #footer{
    font-size:.8em;
  }
  .sns i{
  	font-size:1.8rem;
  }
  /*-----------*/
  .hidden640{
    display: none;
  }
  .visible640{
    display: block;
  }
}
/*////////////////428//////////////////////////////*/
@media screen and (max-width:428px){
  #point .point-elem .ti{
    font-size:1.5rem;
  }
  /*-----------*/
  .hidden428{
    display: none;
  }
  .visible428{
    display: block;
  }
  .waku {
    padding:1em;
  }
  #option .option-1 th,
  #option .option-1 td {
    padding: 10px;
  }
  #option .option-1 th {
    height: 74px;
    width: 185px;
  }
}
/*////////////////428//////////////////////////////*/