@charset "UTF-8";
/*--------------------------
 kv
----------------------------*/
@media (min-width: 768px) and (max-width:1079.98px){
  body img{
    height: auto;
  }
  .kv_wrapper{
    height: auto;
    min-width: auto;
    width: 100vw;
    margin:0 auto;
  }
  .kv_wrapper img{
    width: 100%;
    height: calc(466 / 1100 * 100vw);
    object-fit: cover;
  }
}
/*--------------------------
 offer
----------------------------*/
@media (min-width: 768px) and (max-width:1079.98px){
  .offer_wrapper {
    width: calc(100% - 8vw);
    margin-left:auto;
    margin-right:auto;
  }
  /* .offer .offer__txt {
    padding-left:4vw;
  } */
  .offer .block-inner .block-right{
    width: calc(460 / 1080 * 100vw);
  }
  .offer .block-inner .img-wrapper{
    width: calc(480 / 1080 * 100vw);
  }
}
/*--------------------------
 promotion
----------------------------*/
@media (min-width: 768px) and (max-width:1079.98px){
  section.promotion .block-inner{
    margin: auto;
    align-items: stretch;
  }
  section.promotion .block-inner .block-left{
    width: calc(770 / 1080 * 100vw);
    height: auto;
    flex-shrink: 1;
  }
  section.promotion .block-inner .block-right{
    width: calc(480 / 1080 * 100vw);
    padding:0;
    flex-shrink: 1;
  }
  section.promotion .block-inner .block-right .text-wrapper{
    position: relative;
    top: 50px;
  }  
  body section.promotion .large-text{
    font-size: calc(28 / 1080 * 100vw);
    margin-bottom: calc(20 / 1080 * 100vw);
  }
  body section.promotion .small-text {
    font-size: calc(14 / 1080 * 100vw);
  }
  body .promotion .block-inner .block-left{
    height: calc(530 / 1080 * 100vw);
    background-size: calc(795 / 1080 * 100vw);
    width: calc(770 / 1080 * 100vw);
  }
}
/*--------------------------
 共同開発
----------------------------*/
@media (min-width: 768px) and (max-width:1079.98px){
  .joint .reason{
    width: auto;
    margin-left: 4vw;
    margin-right: 4vw;
  }
  .joint .salon{
    width: auto;
    margin-left: 4vw;
    margin-right: 4vw;
  }
  .joint .salon .block-left{
    width: calc(400 / 1080 * 100vw);
  }
  .joint .joint__box{
    width: calc(100% - 8vw);
    margin-left:auto;
    margin-right:auto;
    padding-left: 4vw;
    padding-right: 4vw;
  }
}
/*--------------------------
 user's voice
----------------------------*/
@media (min-width: 768px) and (max-width:1079.98px){
  .user_voice{
    width:auto;
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .voice #refa-dryer-smart-slider{
    width: auto;
    margin-left: 4vw;
    margin-right: 4vw;
  }
  .voice .swiper-target{
    width: calc(100% - 12vw);
  }
  .voice .aster-wrapper{
    width: calc(100% - 12vw);
    margin: auto;
  }
}
/*--------------------------
 offer-2
----------------------------*/
@media (min-width: 768px) and (max-width:1079.98px){
}
@media (min-width: 768px) and (max-width:839.98px){
  .offer-2{
    width: calc(720 / 840 * 100vw);
  }
  .offer-2 .inner{
    padding-left: calc((720 / 840 * 100vw - 558px) / 2);
    padding-right: calc((720 / 840 * 100vw - 558px) / 2);
  }
  .offer-2 .inner-2 > .block-right{
    width: auto;
  }
  .hair_content{
    padding-left: 4vw;
    padding-right: 4vw;
  }
}
/*--------------------------
 kv-2
----------------------------*/
@media (min-width: 768px) and (max-width:1099.98px){
  section.kv-2 .inner{
    height: auto;
    min-width: auto;
    width: 100vw;
    margin:0 auto;
    left: 0;
  }
  section.kv-2 .text-wrapper{
    position: absolute;
    right: calc(79 / 1100 * 100vw);
    top: calc(105 / 1100 * 100vw);
  }
  section.kv-2 .text-1{
    font-size: calc(24 / 1100 * 100vw);
  }
  section.kv-2 .text-2{
    font-size: calc(32 / 1100 * 100vw);
  }
  body section.kv-2 .inner img{
    width: 100%;
    height: calc(300 / 1100 * 100vw);
    object-fit: cover;
  }
}
/*--------------------------
 kv-4
----------------------------*/
@media (min-width: 768px) and (max-width:1099.98px){
  body section.kv-4 .inner{
    height: auto;
    min-width: auto;
    width: 100vw;
    margin:0 auto;
  }
  body section.kv-4 .title{
    left: 0;
  }
  body section.kv-4 .picture_wrapper{
    height: auto;
  }
  body section.kv-4 .text-wrapper{
    position: absolute;
    right: calc(23 / 1100 * 100vw);
    top: calc(105 / 1100 * 100vw);
  }
  body section.kv-4 .text-1{
    font-size: calc(24 / 1100 * 100vw);
  }
  body section.kv-4 .text-2{
    font-size: calc(32 / 1100 * 100vw);
  }
  body section.kv-4 .inner img{
    width: 100%;
    height: calc(300 / 1100 * 100vw);
    object-fit: cover;
  }
}
/*--------------------------
 spec
----------------------------*/
@media (min-width: 768px) and (max-width:1079.98px){
  section.spec .block-top,
  section.spec .inner{
    width: calc(100% - 8vw);
  }
  section.spec .block-top .inner{
    padding-left: 4vw;
    padding-right: 4vw;
  }
  section.spec .block-bottom .inner-2,
  section.spec .block-middle .inner-2{
    width: auto;
  }
  section.spec .block-bottom .inner-3 .block-left,
  section.spec .block-middle .inner-3 .block-left{
    width: calc(310 / 1080 * 100vw);
  }
  section.spec .block-bottom .inner-2,
  section.spec .block-middle .inner-2{
    padding-left: 4vw;
    padding-right: 4vw;
    margin-left: 4vw;
    margin-right: 4vw;
  }
}
/*--------------------------
 kv-3
----------------------------*/
@media (min-width: 768px) and (max-width:1099.98px){
  body section.kv-3{
    height: calc(300 / 1600 * 100vw);
    min-width: auto;
    width: 100vw;
    background-position-x: -6px;
    margin:0 auto;
  }
  body section.kv-3 .text-wrapper{
    position: absolute;
    left: calc(292 / 1600 * 100vw);
    height: calc(84 / 1600 * 100vw);
  }
  body section.kv-3 .text-1{
    font-size: calc(24 / 1600 * 100vw);
  }
  body section.kv-3 .text-2{
    font-size: calc(32 / 1600 * 100vw);
  }
}
/*--------------------------
 spec-2
----------------------------*/
@media (min-width: 768px) and (max-width:1079.98px){
  body section.spec-2 .block-bottom,
  body section.spec-2 .block-middle,
  body section.spec-2 .block-top,
  body section.spec-2 .inner{
    width: calc(100% - 8vw);
  }
  section.spec-2 .block-middle,
  section.spec-2 .block-top{
    margin-bottom: 60px;
  }
  section.spec-2 .block-bottom .inner,
  section.spec-2 .block-middle .inner,
  section.spec-2 .block-top .inner{
    padding-left: 4vw;
    padding-right: 4vw;
  }
  section.spec-2 .block-bottom .inner-3 .img-wrapper-3,
  section.spec-2 .block-bottom .inner .img-wrapper-2,
  section.spec-2 .block-middle .inner .img-wrapper-2,
  section.spec-2 .block-top .inner .img-wrapper-2{
    width: calc(480 / 1080 * 100vw);
  }
  section.spec-2 .block-bottom .inner-2,
  section.spec-2 .block-middle .inner-2,
  section.spec-2 .block-top .inner-2{
    padding-left: 4vw;
    padding-right: 4vw;
  }
  section.spec-2 .block-bottom .inner-2 .block-left,
  section.spec-2 .block-bottom .inner-2 .block-right,
  section.spec-2 .block-middle .inner-2 .block-left,
  section.spec-2 .block-middle .inner-2 .block-right,
  section.spec-2 .block-top .inner-2 .block-left,
  section.spec-2 .block-top .inner-2 .block-right{
    width: calc(380 / 1080 * 100vw);
  }
  section.spec-2 .block-bottom .inner-3{
    padding-left: 4vw;
    padding-right: 4vw;
  }
  section.spec-2 .block-bottom .inner-4-0{
    width: auto;
    margin-left: 4vw;
    margin-right: 4vw;
    padding-left: 4vw;
    padding-right: 4vw;
  }
  section.spec-2 .block-bottom .inner-4-1 .block-right,
  section.spec-2 .block-bottom .inner-4-2 .block-right{
    width: calc(240 / 1080 * 100vw);
  }
}
/*--------------------------
 movie
----------------------------*/
@media (min-width: 768px) and (max-width:1079.98px){
  
}
/*--------------------------
 variation
----------------------------*/
@media (min-width: 768px) and (max-width:1079.98px){
 
}
/*--------------------------
 guarantee
----------------------------*/
@media (min-width: 768px) and (max-width:839.98px){
  section.guarantee .inner-2 .block-left,
  section.guarantee .inner-2 .block-right{
    width: calc(340 / 840 * 100vw);
  }
}
/*--------------------------
 faq
----------------------------*/
@media (min-width: 768px) and (max-width:839.98px){
  body section.faq #refa-dryer-smart-faq{
    width:calc(720 / 840 * 100vw);
  }
  
}
/*--------------------------
 バナー
----------------------------*/
@media (min-width: 768px) and (max-width:1079.98px){
  section.banner {
    padding: 80px 0;
  }
  section.banner .img-wrapper{
    width: 720px;
    margin: auto;
  }
  body .user_manual{
    transform:scale(0.9);
  }
  body .user_manual-item{
    width: 30%;
    margin-left: auto;
    margin-right: auto;
  }
  body .hair_inner{
    padding-left: 4vw;
    padding-right: 4vw;
  }
  body .hair-device2 .hair_inner__media{
    width: calc(720 / 1080 * 100vw);
    margin-left: auto;
    margin-right: auto;
  }
  body .hair-device1 .hair_inner__media{
    width: calc(480 / 1080 * 100vw);
  }
}
/*--------------------------
 buy now
----------------------------*/
@media (min-width: 768px) and (max-width:1079.98px){
  body section.buy-now #refa-dryer-smart-buy-now-2.inner,
  body section.buy-now #refa-dryer-smart-buy-now.inner{
    width: auto;
    margin-left: 4vw;
    margin-right: 4vw;
  }
  body section.buy-now #refa-dryer-smart-buy-now-2 .block-left,
  body section.buy-now #refa-dryer-smart-buy-now .block-left{
    width: calc(480 / 1080 * 100vw);
    margin-right: 60px;
  }
  body section.buy-now .block-split{
    width: calc(720 / 1080 * 100vw);
  }
  body section.buy-now .block-split .inner{
    padding-left: 4vw;
    padding-right: 4vw;
  }
  body section.buy-now .block-split .inner-2{
    padding-left: 4vw;
    padding-right: 4vw;
    align-items: stretch;
  }
  body section.buy-now .block-split .btn-link{
    width: calc(310 / 1080 * 100vw);
    height: 74px;
    display: flex;
    align-items: center;
  }
  body section.buy-now .block-split .btn-link .br-2{
    display: none;
  }
  
  body section.buy-now .block-purchase{
    width: calc(720 / 1080 * 100vw);
  }
  body section.buy-now .block-purchase h4{
    width: calc(640 / 1080 * 100vw);
  }
  body section.buy-now .block-purchase .list{
    padding-left: 4vw;
    padding-right: 4vw;
  }
  body section.buy-now .block-purchase .list > li{
    width: calc((100% - 20px) / 2);
  }
  body section.buy-now .block-choice{
    width: calc(720 / 1080 * 100vw);
  }
  body section.buy-now .block-guarantee {
    width: calc(720 / 1080 * 100vw);
  }
  body section.buy-now .block-guarantee .inner{
    padding-left: 4vw;
    padding-right: 4vw;
  }
  body section.spec-table{
    width: calc(720 / 1080 * 100vw);
  }
  body section.association{
    padding-left: 4vw;
    padding-right: 4vw;
  }
  body section.association .inner{
    width: auto;
    margin: auto;
  }
  body section.association .inner .block-right,
  body section.association .inner .block-left{
    width: calc(480 / 1080 * 100vw);
  }
  body section.association .img-wrapper{
    width: calc(126 / 1080 * 100vw);
  }
  body section.association .link{
    margin-left: calc(24 / 1080 * 100vw);
  }
  body section.association .inner-2{
    padding-left: 4vw;
    padding-right: 4vw;
  }
  body section.support .inner{
    width: calc(720 / 1080 * 100vw);
    padding-left: 4vw;
    padding-right: 4vw;
  }
  body section.support .link{
    width: calc(300 / 1080 * 100vw);
  }
  body section.comparison{
    width: calc(840 / 1080 * 100vw);
  }
  body section.comparison .d-cell:nth-of-type(3n+1){
    width: calc(170 / 1080 * 100vw);
  }
  body section.comparison .d-cell:nth-of-type(3n+2){
    width: calc(335 / 1080 * 100vw);
    min-width: auto;
  }
  body section.comparison .d-cell:nth-of-type(3n){
    width: calc(335 / 1080 * 100vw);
    min-width: auto;
  }
  body section.comparison .d-cell .product-wrapper{
    width: calc(130 / 1080 * 100vw);
  }
}
/*--------------------------
 TIPS
----------------------------*/
@media (min-width: 768px) and (max-width:1079.98px){
  #refaHairTips .block-inner-2{
    margin-left: 4vw;
    margin-right: 4vw;
  }
  #refaHairTips .block-inner .picture-wrapper{
    width: calc(720 / 1080 * 100vw);
  }
  #refaHairTips .block-title{
    text-align: center;
    margin-bottom: 46px;
  }
  #refaHairTips .block-title .sub{
    font-size: 0.875rem;
    line-height: calc(33.6 / 14);
    letter-spacing: 0.08em; 
    display: block;
  }
  #refaHairTips .block-title .main{
    font-family :'YuMincho Medium','Yu Mincho Medium',serif;
    font-size: 1.5rem;
    line-height: calc(36 / 24);
    letter-spacing: 0.08em; 
    display: block;
  }
  #refaHairTips .block-title:after{
    content:'';
    width: 44px;
    height: 1px;
    background-color: #3C4249;
    margin: 14px auto 0 auto;
    display: block;
  }
  #refaHairTips .btn-link{
    border: 1px solid #8F999F;
    width: 315px;
    margin: 30px auto 0  auto;
  }
  #refaHairTips .btn-link a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    min-height: 56px;
    font-size: 0.875rem;
    line-height: calc(19.6 / 14);
    letter-spacing: 1.12px;
    color: #000000;
    padding:10px 40px 10px 34px;
    position: relative;
  }
  #refaHairTips .btn-link a:after{
    content:'';
    background-image: url('../../../common/img/ic-arrow-gray.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 14px;
    height: 14px;
    display: block;
    position: absolute;
    right: 12px;
  }
}