@charset "UTF-8";
/*--------------------------
 kv
----------------------------*/
@media (min-width: 768px) and (max-width: 1079.98px) {
  .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 {
    margin-left: 4vw;
    margin-right: 4vw;
  }
  .offer_text {
    font-size: 14px;
  }
  .offer .block-inner .block-right {
    width: calc(460 / 1080 * 100vw);
  }
  .offer .block-inner .img-wrapper {
    width: calc(480 / 1080 * 100vw);
  }
}
/*--------------------------
 fragrance
----------------------------*/
@media (min-width: 768px) and (max-width: 1079.98px) {
  .fragrance .accordion_head {
    padding-right: 24px;
  }
}
/*--------------------------
 hair quality
----------------------------*/
@media (min-width: 768px) and (max-width: 1079.98px) {
  .hair_quality .block-inner .lead {
    font-size: 18px;
  }
}
/*--------------------------
 howto
----------------------------*/
@media (min-width: 768px) and (max-width: 1079.98px) {
  .howto > .head {
    top: -60px;
  }
}
/*--------------------------
 user's voice
----------------------------*/
@media (min-width: 768px) and (max-width: 1079.98px) {
  .voice #vue-app-freepage-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;
  }
}
/*--------------------------
 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;
  }
  section.kv-2 .text-wrapper {
    position: absolute;
    left: calc(46 / 1100 * 100vw);
    height: calc(84 / 1100 * 100vw);
  }
  section.kv-2 .text-1 {
    font-size: calc(24 / 1100 * 100vw);
  }
  section.kv-2 .text-2 {
    font-size: calc(32 / 1100 * 100vw);
  }
  section.kv-2 .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(100vw - 8vw);
  }
  section.spec .block-top .inner {
    padding-left: 4vw;
    padding-right: 4vw;
  }
  section.spec .block-middle .inner-2 {
    width: auto;
  }
  section.spec .block-middle .inner-3 .block-left {
    width: calc(310 / 1080 * 100vw);
  }
  section.spec .block-middle .inner-2 {
    padding-left: 4vw;
    padding-right: 4vw;
    margin-left: 4vw;
    margin-right: 4vw;
  }
  section.spec .block-bottom .inner {
    background-color: #fff;
    padding: 60px 80px 43px 80px;
  }
  section.spec .block-bottom .inner-2 {
    background-color: #fff;
    width: auto;
    max-width: 580px;
    margin: 0 auto;
  }
  section.spec .block-bottom .inner-2 .block-left,
  section.spec .block-bottom .inner-2 .block-right {
    width: 50%;
    padding: 40px;
    flex-shrink: 0;
    background: #f4f4f6;
  }
}
/*--------------------------
 kv-3
----------------------------*/
@media (min-width: 768px) and (max-width: 1099.98px) {
  section.kv-3 .inner {
    height: auto;
    min-width: auto;
    width: 100vw;
    margin: 0 auto;
  }
  section.kv-3 .text-wrapper {
    position: absolute;
    left: calc(46 / 1100 * 100vw);
    height: calc(154 / 1100 * 100vw);
  }
  section.kv-3 .text-1 {
    font-size: calc(24 / 1100 * 100vw);
  }
  section.kv-3 .text-2 {
    font-size: calc(32 / 1100 * 100vw);
  }
  section.kv-3 .inner img {
    width: 100%;
    height: calc(300 / 1100 * 100vw);
    object-fit: cover;
  }
}
/*--------------------------
 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);
  }
}
/*--------------------------
 howto
----------------------------*/
@media (min-width: 768px) and (max-width: 1079.98px) {
  section.howto .inner {
    background: #fff;
    width: calc(100vw - 8vw);
  }
  section.regular .block-split {
    width: calc(100% - 8vw);
  }
  section.regular .block-split .btn-link {
    width: calc(380 / 1080 * 100vw);
  }
}

/*--------------------------
 arrange
----------------------------*/
@media (min-width: 768px) and (max-width: 1079.98px) {
  section.arrange .inner-2 {
    max-width: auto;
    width: calc(100vw - 8vw);
  }
}
/*--------------------------
 faq
----------------------------*/
@media (min-width: 768px) and (max-width: 839.98px) {
  section.faq #vue-app-freepage-faq {
    width: calc(720 / 840 * 100vw);
  }
}
/*--------------------------
 buy now
----------------------------*/
@media (min-width: 768px) and (max-width: 1079.98px) {
  section.buy-now #vue-app-freepage-buy-now.inner,
  section.buy-now #vue-app-freepage-buy-now-2.inner {
    width: auto;
    margin-left: 4vw;
    margin-right: 4vw;
  }
  section.buy-now #vue-app-freepage-buy-now .block-left,
  section.buy-now #vue-app-freepage-buy-now-2 .block-left {
    width: calc(480 / 1080 * 100vw);
    margin-right: 40px;
  }
  section.buy-now .block-split {
    width: calc(720 / 1080 * 100vw);
  }
  section.buy-now .block-split .inner {
    padding-left: 4vw;
    padding-right: 4vw;
  }
  section.buy-now .block-split .inner-2 {
    padding-left: 4vw;
    padding-right: 4vw;
    align-items: stretch;
  }
  section.buy-now .block-split .btn-link {
    width: calc(310 / 1080 * 100vw);
    height: 74px;
    display: flex;
    align-items: center;
  }
  section.buy-now .block-split .btn-link .br-2 {
    display: none;
  }

  section.buy-now .block-purchase {
    width: calc(720 / 1080 * 100vw);
  }
  section.buy-now .block-purchase h4 {
    width: calc(640 / 1080 * 100vw);
  }
  section.buy-now .block-purchase .list {
    padding-left: 4vw;
    padding-right: 4vw;
  }
  section.buy-now .block-purchase .list > li {
    width: calc((100% - 20px) / 2);
  }
  section.buy-now .block-guarantee {
    width: calc(720 / 1080 * 100vw);
  }
  section.buy-now .block-guarantee .inner {
    padding-left: 4vw;
    padding-right: 4vw;
  }
  section.spec-table {
    width: calc(720 / 1080 * 100vw);
  }
  section.spec .block-top .inner .img-wrapper-2 {
    width: calc(480 / 1080 * 100vw);
  }
  section.association {
    padding-left: 4vw;
    padding-right: 4vw;
  }
  section.association .inner {
    width: auto;
    gap: 30px 0;
  }
  section.association .img-wrapper {
    width: calc(126 / 1080 * 100vw);
  }
  section.association .link {
    margin-left: calc(24 / 1080 * 100vw);
  }
  section.association .text-1 {
    font-size: 14px;
  }
  section.association .inner-2 {
    padding-left: 4vw;
    padding-right: 4vw;
  }
  section.support .inner {
    width: calc(720 / 1080 * 100vw);
    padding-left: 4vw;
    padding-right: 4vw;
  }
  section.support .link {
    width: calc(300 / 1080 * 100vw);
  }
  section.comparison {
    width: calc(840 / 1080 * 100vw);
  }
  section.comparison .d-cell:nth-of-type(3n + 1) {
    width: calc(170 / 1080 * 100vw);
  }
  section.comparison .d-cell:nth-of-type(3n + 2) {
    width: calc(335 / 1080 * 100vw);
    min-width: auto;
  }
  section.comparison .d-cell:nth-of-type(3n) {
    width: calc(335 / 1080 * 100vw);
    min-width: auto;
  }
  section.comparison .d-cell .product-wrapper {
    width: calc(130 / 1080 * 100vw);
  }
  section.regular {
    max-width: auto;
  }
  section.regular .block-split .btn-link {
    border: 1px solid #afb7bc;
    width: min(43vw, 430px);
    margin: 0 auto;
    background-color: #fff;
  }
  section.regular .block-split .btn-link a {
    font-size: 0.75rem;
    line-height: calc(19.6 / 12);
  }
}

/*--------------------------
 buy now twinset
----------------------------*/
@media (min-width: 768px) and (max-width: 890px) {
  section.buy-now .block-choice .list > a {
    position: relative;
  }
  /* section.buy-now .block-choice .list > a[data-cart^="#cart-twin"]:before{
    content: "";
    border: 15px solid transparent;
    border-top: 15px solid #739fba;
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%); 
     pointer-events: none;
  }
  section.buy-now .block-choice .list > a[data-cart^="#cart-twin"]:after{
    content: "おしゃれ上級者はこちら\Aヘアスタイルによって使い分けよう";
    white-space: pre;
    font-size: 10px;
    width: 115%;
    text-align: center;
    display: block;
    position: absolute;
    top: -62px;
    left: 50px;
    background-color: #739fba;
    color: #fff;
    padding: 0.7rem;
    border-radius: 6px;
    pointer-events: none;
  } */
}