@charset "UTF-8";

.bg-color-bonding-color-treatment-silver {
  background-color: #8e8e8e !important;
}

.bg-color-bonding-color-treatment-pink {
  background-color: #ea5a91 !important;
}

.bg-color-bonding-color-treatment-milktea {
  background-color: #c3aa90 !important;
}

.bg-color-bonding-color-treatment-murasaki {
  background-color: #3a2380 !important;
}

.bg-color-bonding-color-treatment-silver {
  background-color: #8e8e8e !important;
}

.bg-color-bonding-color-treatment-pink {
  background-color: #ea5a91 !important;
}

.bg-color-bonding-color-treatment-milktea {
  background-color: #c3aa90 !important;
}

.bg-color-bonding-color-treatment-murasaki {
  background-color: #3a2380 !important;
}

/* ボーダー */
.bm-silver .lineup-details .details {
  border-color: #8e8e8e !important;
}

.bm-pink .lineup-details .details {
  border-color: #ea5a91 !important;
}

.bm-murasaki .lineup-details .details {
  border-color: #3a2380 !important;
}

.bm-milktea .lineup-details .details {
  border-color: #c3aa90 !important;
}

.color-bonding-color-treatment-silver{
  color: #8e8e8e !important;
}

.color-bonding-color-treatment-pink{
  color: #ea5a91 !important;
}

.color-bonding-color-treatment-milktea{
  color: #c3aa90 !important;
}

.color-bonding-color-treatment-murasaki{
  color: #3a2380 !important;
}

/*******************************
ポイントコンテンツ
*******************************/
 section.point .point1 .inner,
 section.point .point2 .inner,
 section.point .point3 .inner,
 section.point .point4 .inner,
 section.point .point5 .inner {
  border-top-color: #727171;
}

 section.point .point1 h2,
 section.point .point2 h2,
 section.point .point3 h2,
 section.point .point4 h2,
 section.point .point5 h2 {
  color: #727171;
}

 section.point .point1 h3,
 section.point .point2 h3,
 section.point .point3 h3,
 section.point .point4 h3,
 section.point .point5 h3 {
  color: white;
  background-color: #727171;
}

/*******************************
lineup
*******************************/
section.lineup .lineup-cross-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #000;
  background: #fff;
  text-decoration: none;
  color: #000;
  box-sizing: border-box;
  white-space: nowrap;
}

section.lineup .buttons .btn .prod img {
  cursor: pointer;
}

section.lineup .buttons .btn.btn-silver:before {
  background-color: #8e8e8e;
}

section.lineup .buttons .btn.btn-silver.on .prod {
  background-image: url("../../images/lineup/bonding-color-treatment/btn_product_silver_on.png");
  background-size: cover;
  background-repeat: no-repeat;
}

section.lineup .buttons .btn.btn-silver.on .prod img {
  visibility: hidden;
}

section.lineup .buttons .btn.btn-pink:before {
  background-color: #ea5a91;
}

section.lineup .buttons .btn.btn-pink.on .prod {
  background-image: url("../../images/lineup/bonding-color-treatment/btn_product_pink_on.png");
  background-size: cover;
  background-repeat: no-repeat;
}

section.lineup .buttons .btn.btn-pink.on .prod img {
  visibility: hidden;
}

section.lineup .buttons .btn.btn-murasaki:before {
  background-color: #3a2380;
}

section.lineup .buttons .btn.btn-murasaki.on .prod {
  background-image: url("../../images/lineup/bonding-color-treatment/btn_product_murasaki_on.png");
  background-size: cover;
  background-repeat: no-repeat;
}

section.lineup .buttons .btn.btn-murasaki.on .prod img {
  visibility: hidden;
}

section.lineup .buttons .btn.btn-milktea:before {
  background-color: #c3aa90;
}

section.lineup .buttons .btn.btn-milktea.on .prod {
  background-image: url("../../images/lineup/bonding-color-treatment/btn_product_milktea_on.png");
  background-size: cover;
  background-repeat: no-repeat;
}

section.lineup .buttons .btn.btn-milktea.on .prod img {
  visibility: hidden;
}

/*******************************
How to
*******************************/

.bm-silver .howto .boxes-02,
.bm-pink .howto .boxes-02 {
  display: none;
}

.bm-milktea .howto .boxes-01,
.bm-murasaki .howto .boxes-01 {
  display: none;
}

/*******************************
PC
*******************************/

@media screen and (min-width: 769px) {
   section.page-top .inner .title {
    text-align: left;
    background-image: url("../../images/common/title-bg-03.png");
    background-size: 546px 232px;
    width: 546px;
    height: 232px;
    line-height: 70px;
    letter-spacing: -0.05em;
    padding-right: 20px;
    padding-bottom: 20px;
  }

   section.point .point2 h3 {
    letter-spacing: -0.025em;
    font-size: 30px;
  }

   section.point .point-box.point3 .pic {
    width: 472px;
  }

   section.point .point-box.point4 .pic {
    width: 490px;
    top: 118px;
  }

  section.lineup .lineup-cross-link {
    width: fit-content;
    height: 56px;
    margin: 40px auto 41px;
    padding: 9px 30px;
  }

  section.lineup .lineup-cross-link .font-DIN-C-light {
    font-size: 32px;
    line-height: 1;
  }

  section.lineup .lineup-cross-link .ja {
    font-size: 14px;
    line-height: 24px;
  }

  section.lineup .lineup-cross-link .icon-arrow {
    font-size: 18px;
  }

   section.lineup .buttons {
    width: 530px;
    justify-content: center;
    gap: 0 0px;
  }

   section.lineup .buttons .btn {
    height: 270px;
  }

  section.lineup .buttons .btn:before {
    margin-left: 0px;
  }

  section.lineup .lineup-details .details {
    width: 1200px;
  }

  section.lineup .lineup-details .detail {
    height: auto;
    padding: 35px 70px 40px 540px;
  }

  section.lineup .lineup-details .bgs .bg.bg-silver {
    background-image: url("../../images/top/lineup-bt-bg-silver.jpg");
  }

  section.lineup .lineup-details .bgs .bg.bg-pink {
    background-image: url("../../images/top/lineup-bt-bg-pink.jpg");
  }

  section.lineup .lineup-details .bgs .bg.bg-murasaki {
    background-image: url("../../images/top/lineup-bt-bg-murasaki.jpg");
  }

  section.lineup .lineup-details .bgs .bg.bg-milktea {
    background-image: url("../../images/top/lineup-bt-bg-milktea.png");
  }

  section.lineup .lineup-details p.kome {
    line-height: 1.666em;
  }

  section.lineup .lineup-details .detail.detail-bonding-color-treatment-silver {
    background-image: url("../../images/lineup/bonding-color-treatment/silver/img-01.jpg");
    background-size: 480px auto;
  }

  section.lineup .lineup-details .detail.detail-bonding-color-treatment-pink {
    background-image: url("../../images/lineup/bonding-color-treatment/pink/img-01.jpg");
    background-size: 480px auto;
  }

  section.lineup .lineup-details .detail.detail-bonding-color-treatment-milktea {
    background-image: url("../../images/lineup/bonding-color-treatment/milktea/img-01.png");
    background-size: 480px auto;
  }

  section.lineup .lineup-details .detail.detail-bonding-color-treatment-murasaki {
    background-image: url("../../images/lineup/bonding-color-treatment/murasaki/img-01.jpg");
    background-size: 480px auto;
  }

  section .color-images .color-image-container {
    justify-content: center !important;
  }

  section .color-images .color-image-row {}

  section .color-image {
    width: 45% !important;
    margin-right: 0 !important;
  }

}

/*******************************
SP
*******************************/

@media screen and (max-width: 768px) {
   section.page-top .inner .title {
    background-image: url("../../images/common/title-bg-04.png");
    background-size: 352px 124px;
    background-position: center;
    width: 100%;
    height: 124px;
    line-height: 45px;
    letter-spacing: -0.05em;
  }

   section.point .point1 h3 {
    font-size: clamp(10px, 4.9vw, 20px);
  }

   section.point .point-box.point3 .pic {
    width: 31.6vw;
    margin: clamp(20px, 5vw, 100px) auto 0;
  }

   section.point .point-box.point4 .pic {
    width: 86.1vw;
    max-width: 550px;
    margin: clamp(20px, 5vw, 100px) 0 0 auto;
  }

  section.lineup .lineup-cross-link {
    width: fit-content;
    height: 42px;
    margin: 30px auto 34px;
    padding: 4px 24px;
  }

  section.lineup .lineup-cross-link .font-DIN-C-light {
    font-size: 28px;
    line-height: 1;
  }

  section.lineup .lineup-cross-link .ja {
    font-size: 14px;
    line-height: 24px;
  }

  section.lineup .lineup-cross-link .icon-arrow {
    font-size: 18px;
  }

   section.lineup .buttons {
    width: 100%;
    justify-content: center;
  }

  section.lineup .buttons .btn:before {
    margin-left: 1px;
  }

   section.lineup .buttons .btn {
    height: 35vw;
  }

  section.lineup .buttons .btn {
    width: 14.5vw;
    margin: 0 0vw;
  }

  .detail-bonding-color-treatment .color-images .color-image-container {
    height: auto !important;
    justify-content: center !important;
    gap: 0 8vw;
  }

  .detail-bonding-color-treatment .color-image {
    width: 35% !important;
    margin: 0 !important;
  }
}