@charset "UTF-8";
/* CSS Document */

  @media screen and (max-width: 768px) {
  .clm-contents{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    gap:min(60px,10vw);
  }
  #l-main{
    width: 100%;
    padding-right: 0;
  }
    #l-side{
      width: 100%;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      -o-flex-wrap: wrap;
      flex-wrap: wrap;
      gap:min(20px,5vw);
    }
    #l-side> * + *{
      margin-top: 0;
    }
    .side-item{
      width: calc((100% - min(20px,5vw))/2);
    }
}
@media screen and (max-width: 600px) {
/*
  .single-key-image{
    aspect-ratio:1/1;
  }
*/
  .cnp-detail-list > div{
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  gap:min(20px,3vw);
}
.cnp-detail-list dt{
  width: 100%;
  font-weight: 600;
  padding-left: 1.15em;
}
.cnp-detail-list dt::after{
  content:'';
  right: auto;
  top: 50%;
  left: 0;
  width: .85em;
  aspect-ratio:1/1;
  border-radius: 50%;
  background: var(--clr-grn);
  transform: translateY(-50%);
}
.cnp-detail-list dd{
  width: 100%;
  padding-left: 1em;
}
/*Refa
======================================================*/
  .refa-intro-box{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    gap:min(30px,5vw);
  }
  .refa-intro-box > *{
    width: 100%;
  }
  .refa-intro-box .detail{
    padding-left: 0;
  }
  .refa-items-category ul
  ,.tag-mattress-intro{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }
  .refa-items-category ul li
  ,.tag-mattress-intro > *{
    width: 100%;
  }
  .refa-items-category ul li.hair-care
  ,.refa-items-category ul li.shape-up
  ,.refa-items-category ul li.mattress{
    background-position: right 10% center;
  }
  .refa-items-category ul li.mattress{
    background-size: min(150px,30%);
  }
  .refa-item-cat ul li{
    width: calc((100% -  min(20px, 3vw))/2);
  }
  .tag-mattress-intro{
     gap:min(30px,5vw);
  }
  .tag-mattress-intro .detail{
    padding-left: 0;
  }
  /*refa form*/
  .refa-item-bar{
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .refa-item-bar.active .refa-count
  ,.refa-check-wrap{
    width: 100%;
  }
  .refa-item-bar{
    padding-left: min(10px,2.5vw);
    padding-right: min(10px,2.5vw);
  }
  .form-user-list > div{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    gap:min(20px,3vw);
  }
  .form-user-list > div dt
  ,.form-user-list > div dd
  ,.form-user-list > div dd input.inp-dial
  ,.form-user-list > div dd input.inp-madd{
    width: 100%;
  }
  .form-user-list > div dt p{
    padding-left: 2.5em;
  }
  .page-refa-complate .in-text{
    text-align: left;
  }
    .refa-form-attention dt span{
    display: block;
    padding: 1em 0 0 0;
    }
}
@media screen and (max-width: 480px) {
  
  .side-item{
      width: 100%;
    }
}