@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, 10.6666666667vw, 109.12px) * 1);
    padding-bottom: calc(clamp(0px, 6vw, 61.38px) * 1);
    margin-bottom: calc(clamp(0px, 13.3333333333vw, 136.4px) * 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, 100vw, 1023px) * 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, 92.4479166667vw, 1775px) * 1);
    height: calc(clamp(0px, 46.5625vw, 894px) * 1);
    padding: calc(clamp(0px, 3.4895833333vw, 67px) * 1) calc(clamp(0px, 5.5729166667vw, 107px) * 1) 0;
    background-image: url(/media/export/cms2.0/lp/house-of-brightening/250214/img/steps_bg.jpg);
    border-radius: calc(clamp(0px, 1.8229166667vw, 35px) * 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, 18.75vw, 360px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents {
    width: calc(clamp(0px, 73.3333333333vw, 750.2px) * 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.8125vw, 150px) * 1);
    height: calc(clamp(0px, 2.1354166667vw, 41px) * 1);
    font-size: calc(clamp(0px, 1.5625vw, 30px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_num span {
    width: calc(clamp(0px, 21.3333333333vw, 218.24px) * 1);
    height: calc(clamp(0px, 5.8666666667vw, 60.016px) * 1);
    font-size: calc(clamp(0px, 4.5333333333vw, 46.376px) * 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.4583333333vw, 28px) * 1);
    margin-top: calc(clamp(0px, 0.8854166667vw, 17px) * 1);
    margin-bottom: calc(clamp(0px, 1.5625vw, 30px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_category {
    font-size: calc(clamp(0px, 4.8vw, 49.104px) * 1);
    margin-top: calc(clamp(0px, 2.2666666667vw, 23.188px) * 1);
    margin-bottom: calc(clamp(0px, 4vw, 40.92px) * 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, 18.75vw, 360px) * 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.1458333333vw, 22px) * 1);
    height: calc(clamp(0px, 1.3020833333vw, 25px) * 1);
    top: calc(clamp(0px, 8.75vw, 168px) * 1);
    left: calc(clamp(0px, 1.7708333333vw, 34px) * -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.1458333333vw, 22px) * 1);
    height: calc(clamp(0px, 1.3020833333vw, 25px) * 1);
    top: calc(clamp(0px, 8.75vw, 168px) * 1);
    left: calc(clamp(0px, 1.7708333333vw, 34px) * -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.3958333333vw, 46px) * 1);
    height: calc(clamp(0px, 2.3958333333vw, 46px) * 1);
    top: calc(clamp(0px, 8.28125vw, 159px) * 1);
    left: calc(clamp(0px, 1.71875vw, 33px) * -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.25vw, 24px) * 1);
    line-height: 1.5;
    margin-top: calc(clamp(0px, 0.8854166667vw, 17px) * 1);
    margin-bottom: calc(clamp(0px, 0.5208333333vw, 10px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_item_name {
    font-size: calc(clamp(0px, 4.5333333333vw, 46.376px) * 1);
    line-height: 1.5;
    margin-top: calc(clamp(0px, 4vw, 40.92px) * 1);
    margin-bottom: calc(clamp(0px, 2.6666666667vw, 27.28px) * 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.9895833333vw, 19px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_item_name span {
    font-size: calc(clamp(0px, 3.7333333333vw, 38.192px) * 1);
  }
}
@media screen and (min-width: 1024px) {
  .hob-steps_contents .hob-steps_item_lead {
    font-size: calc(clamp(0px, 0.9375vw, 18px) * 1);
    line-height: 1.7;
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_item_lead {
    font-size: calc(clamp(0px, 3.4666666667vw, 35.464px) * 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.78125vw, 15px) * 1);
    margin-bottom: calc(clamp(0px, 1.5625vw, 30px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_item_list {
    margin-top: calc(clamp(0px, 2.6666666667vw, 27.28px) * 1);
    margin-bottom: calc(clamp(0px, 3.7333333333vw, 38.192px) * 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.8333333333vw, 16px) * 1);
    line-height: 1.7;
    padding-left: calc(clamp(0px, 1.0416666667vw, 20px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_item_list > li {
    font-size: calc(clamp(0px, 2.9333333333vw, 30.008px) * 1);
    line-height: 1.7;
    padding-left: calc(clamp(0px, 4.2666666667vw, 43.648px) * 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, 1.0416666667vw, 20px) * -1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_item_list > li::before {
    margin-left: calc(clamp(0px, 4.2666666667vw, 43.648px) * -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.8333333333vw, 16px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .hob-steps_contents .hob-steps_item_link {
    font-size: calc(clamp(0px, 4vw, 40.92px) * 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, 38.5416666667vw, 740px) * 1);
    justify-content: space-between;
  }
}