@charset "UTF-8";
@media screen and (max-width: 1023px) {
  #node-524053 .content {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(/media/export/cms2.0/lp/house-of-brightening/250214/img/steps_bg.sp.jpg);
    padding-top: calc(clamp(0px, 9.5288888889vw, 67.6551111109px) * 1);
    padding-bottom: calc(clamp(0px, 5.36vw, 38.0559999999px) * 1);
    margin-bottom: calc(clamp(0px, 11.9111111111vw, 84.5688888886px) * 1);
  }
  #node-524053 .content .editorial-grid-formatter {
    padding-left: 0;
    padding-right: 0;
    min-height: auto !important;
  }
  #node-524053 .content .editorial-grid-formatter__carousel.carousel--peeking {
    margin: 0;
    width: calc(clamp(0px, 89.333333333vw, 634.2666666643px) * 1);
  }
  #node-524053 .content .editorial-grid-formatter__carousel.carousel--peeking .slick-list {
    padding: 0;
    margin-right: 0;
  }
  #node-524053 .content .editorial-grid-formatter__carousel .slick-track > div {
    padding: 0;
  }
  #node-524053 .content .slick-slide {
    display: flex;
    justify-content: center;
  }
  #node-524053 .content .editorial-grid-formatter-carousel-arrow.previous {
    left: 5%;
  }
  #node-524053 .content .editorial-grid-formatter-carousel-arrow.next {
    right: 5%;
  }
}
.section_steps {
  position: relative;
  color: #1a1a1a;
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 1024px) {
  .section_steps {
    width: calc(clamp(0px, 85.5143229167vw, 1518.734375px) * 1);
    height: calc(clamp(0px, 43.0703125vw, 764.92875px) * 1);
    padding: calc(clamp(0px, 3.2278645833vw, 57.326875px) * 1) calc(clamp(0px, 5.1549479167vw, 91.551875px) * 1) 0;
    background-image: url(/media/export/cms2.0/lp/house-of-brightening/250214/img/steps_bg.jpg);
    border-radius: calc(clamp(0px, 1.6861979167vw, 29.946875px) * 1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}
@media screen and (max-width: 1023px) {
  .section_steps {
    display: none;
  }
}
.section_steps p, .section_steps dl, .section_steps dt, .section_steps dd, .section_steps h2 {
  margin: 0;
}
@media screen and (max-width: 1023px) {
  .section_steps .pc {
    display: none !important;
  }
}
@media screen and (min-width: 1024px) {
  .section_steps .sp {
    display: none !important;
  }
}

.hob-steps_contents {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents {
    width: calc(clamp(0px, 17.34375vw, 308.025px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents {
    width: calc(clamp(0px, 65.5111111109vw, 465.1288888872px) * 1);
    margin: 0 auto;
  }
}
.hob-steps_contents p, .hob-steps_contents dl, .hob-steps_contents dt, .hob-steps_contents dd, .hob-steps_contents h2, .hob-steps_contents h3 {
  margin: 0;
}
.hob-steps_contents a {
  color: #1a1a1a;
  pointer-events: none;
}
.hob-steps_contents a:hover {
  color: #1a1a1a;
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .pc {
    display: none !important;
  }
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .sp {
    display: none !important;
  }
}
.hob-steps_contents .col_grey {
  color: #c7c7c7;
}
.hob-steps_contents .hob-steps_num {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.hob-steps_contents .hob-steps_num span {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica !important;
  background-color: #addeb7;
  border-radius: 50px;
  line-height: 1;
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_num span {
    width: calc(clamp(0px, 7.2265625vw, 128.34375px) * 1);
    height: calc(clamp(0px, 1.9752604167vw, 35.080625px) * 1);
    font-size: calc(clamp(0px, 1.4453125vw, 25.66875px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_num span {
    width: calc(clamp(0px, 19.0577777777vw, 135.3102222217px) * 1);
    height: calc(clamp(0px, 5.2408888889vw, 37.210311111px) * 1);
    font-size: calc(clamp(0px, 4.0497777778vw, 28.7534222221px) * 1);
  }
}
.hob-steps_contents .hob-steps_category {
  width: 100%;
  font-weight: 700;
  line-height: 1;
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_category {
    font-size: calc(clamp(0px, 1.3489583333vw, 23.9575px) * 1);
    margin-top: calc(clamp(0px, 0.8190104167vw, 14.545625px) * 1);
    margin-bottom: calc(clamp(0px, 1.4453125vw, 25.66875px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_category {
    font-size: calc(clamp(0px, 4.288vw, 30.4447999999px) * 1);
    margin-top: calc(clamp(0px, 2.0248888889vw, 14.3767111111px) * 1);
    margin-bottom: calc(clamp(0px, 3.5733333333vw, 25.3706666666px) * 1);
  }
}
.hob-steps_contents .hob-steps_item {
  position: relative;
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_item {
    width: calc(clamp(0px, 17.34375vw, 308.025px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_item {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_item::before {
    z-index: 2;
    content: "";
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-size: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_item.hob-steps_item_02 .hob-steps_item_name {
    letter-spacing: -0.02em;
  }
}
.hob-steps_contents .hob-steps_item.hob-steps_item_02::before {
  background-image: url(/media/export/cms2.0/lp/house-of-brightening/250214/img/ico_step_triangle.png);
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_item.hob-steps_item_02::before {
    width: calc(clamp(0px, 1.0598958333vw, 18.82375px) * 1);
    height: calc(clamp(0px, 1.2044270833vw, 21.390625px) * 1);
    top: calc(clamp(0px, 8.09375vw, 143.745px) * 1);
    left: calc(clamp(0px, 1.6380208333vw, 29.09125px) * -1);
  }
}
.hob-steps_contents .hob-steps_item.hob-steps_item_03::before {
  background-image: url(/media/export/cms2.0/lp/house-of-brightening/250214/img/ico_step_triangle.png);
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_item.hob-steps_item_03::before {
    width: calc(clamp(0px, 1.0598958333vw, 18.82375px) * 1);
    height: calc(clamp(0px, 1.2044270833vw, 21.390625px) * 1);
    top: calc(clamp(0px, 8.09375vw, 143.745px) * 1);
    left: calc(clamp(0px, 1.6380208333vw, 29.09125px) * -1);
  }
}
.hob-steps_contents .hob-steps_item.hob-steps_item_04::before {
  background-image: url(/media/export/cms2.0/lp/house-of-brightening/250214/img/ico_step_or.png);
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_item.hob-steps_item_04::before {
    width: calc(clamp(0px, 2.2161458333vw, 39.35875px) * 1);
    height: calc(clamp(0px, 2.2161458333vw, 39.35875px) * 1);
    top: calc(clamp(0px, 7.66015625vw, 136.044375px) * 1);
    left: calc(clamp(0px, 1.58984375vw, 28.235625px) * -1);
  }
}
.hob-steps_contents .hob-steps_item_image {
  display: block;
  width: 100%;
  pointer-events: auto;
}
.hob-steps_contents .hob-steps_item_image:hover {
  opacity: 0.8;
}
.hob-steps_contents .hob-steps_item_name {
  font-weight: 700;
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_item_name {
    width: 110%;
    margin-left: -5%;
    font-size: calc(clamp(0px, 1.15625vw, 20.535px) * 1);
    line-height: 1.5;
    margin-top: calc(clamp(0px, 0.8190104167vw, 14.545625px) * 1);
    margin-bottom: calc(clamp(0px, 0.4817708333vw, 8.55625px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_item_name {
    font-size: calc(clamp(0px, 4.0497777778vw, 28.7534222221px) * 1);
    line-height: 1.5;
    margin-top: calc(clamp(0px, 3.5733333333vw, 25.3706666666px) * 1);
    margin-bottom: calc(clamp(0px, 2.3822222222vw, 16.9137777777px) * 1);
    width: 110%;
    margin-left: -5%;
  }
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_item_name span {
    font-size: calc(clamp(0px, 0.9153645833vw, 16.256875px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_item_name span {
    font-size: calc(clamp(0px, 3.3351111111vw, 23.6792888888px) * 1);
  }
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_item_lead {
    font-size: calc(clamp(0px, 0.8671875vw, 15.40125px) * 1);
    line-height: 1.7;
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_item_lead {
    font-size: calc(clamp(0px, 3.0968888889vw, 21.987911111px) * 1);
    line-height: 1.2115384615;
  }
}
.hob-steps_contents .hob-steps_item_list {
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_item_list {
    margin-top: calc(clamp(0px, 0.72265625vw, 12.834375px) * 1);
    margin-bottom: calc(clamp(0px, 1.4453125vw, 25.66875px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_item_list {
    margin-top: calc(clamp(0px, 2.3822222222vw, 16.9137777777px) * 1);
    margin-bottom: calc(clamp(0px, 3.3351111111vw, 23.6792888888px) * 1);
  }
}
.hob-steps_contents .hob-steps_item_list > li {
  font-weight: 700;
  position: relative;
  text-align: left;
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_item_list > li {
    font-size: calc(clamp(0px, 0.7708333333vw, 13.69px) * 1);
    line-height: 1.7;
    padding-left: calc(clamp(0px, 0.9635416667vw, 17.1125px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_item_list > li {
    font-size: calc(clamp(0px, 2.6204444444vw, 18.6051555555px) * 1);
    line-height: 1.7;
    padding-left: calc(clamp(0px, 3.8115555555vw, 27.0620444443px) * 1);
    width: 110%;
    margin-left: -5%;
  }
}
.hob-steps_contents .hob-steps_item_list > li::before {
  content: "□";
  position: absolute;
  display: inline-block;
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_item_list > li::before {
    margin-left: calc(clamp(0px, 0.9635416667vw, 17.1125px) * -1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_item_list > li::before {
    margin-left: calc(clamp(0px, 3.8115555555vw, 27.0620444443px) * -1);
  }
}
.hob-steps_contents .hob-steps_item_link {
  pointer-events: auto;
  text-decoration: underline;
  line-height: 1;
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_item_link {
    font-size: calc(clamp(0px, 0.7708333333vw, 13.69px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_item_link {
    font-size: calc(clamp(0px, 3.5733333333vw, 25.3706666666px) * 1);
  }
}
.hob-steps_contents .hob-steps_item_link:hover {
  opacity: 0.8;
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents.hob-steps_contents_wide {
    width: calc(clamp(0px, 35.6510416667vw, 633.1625px) * 1);
    justify-content: space-between;
  }
}