@charset "UTF-8";

.mgB0 {
  margin-bottom: 0 !important;
}

.l-section {
  width: 100%;
}

.l-section[data-color="gray"] {
  background-color: #F8F8F8;
}

.l-section[data-color="darkgray"] {
  background-color: #EDEDED;
}

.l-section.faq {
  background: linear-gradient(#EDEDED 0%, #FFF 49.75%, #EDEDED 100%);
}

.l-section_inner {
  max-width: 960px;
  margin: auto;
  padding: 80px 10px 120px;
  box-sizing: content-box;
}

.l-kv {
  text-align: center;
}


.l-kv .l-section_inner {
  padding-bottom: 50px;
}

.l-kv h1 {
  font-size: 38px;
  font-weight: bold;
  margin-bottom: 30px;
}

.l-guide-step {
  width: 100%;
}

.l-guide-step_label {
  width: 100%;
  background-color: #848484;
  color: #FFF;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.l-guide-step_head {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
}

.l-flex_center {
  display: flex;
  justify-content: center;
}

.l-flex_left {
  display: flex;
  justify-content: flex-start;
}

.l-guide-step_app {
  text-align: left;
  width: 277px;
}

.l-guide-step_app:last-child {
  margin-left: 46px;
}

.l-guide-step_app .qr {
  width: 65px;
}

.l-guide-step_app dt {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.l-guide-step_app_note {
  font-size: 10px;
  margin-top: 10px;
}

.l-guide-step_note {
  font-size: 14px;
  text-align: center;
  margin-top: 34px;
}

.l-guide-step_app_wrap {
  margin: 27px auto 0;
  max-width: 610px;
}

.l-guide-step li {
  margin-top: 60px;
}

.l-guide-step li:first-child {
  margin-top: 0px;
}

.l-guide-step_img {
  width: 200px;
  flex-shrink: 0;
}

.l-guide-step_text {
  margin-left: 22px;
}

.l-guide-step_text p span {
  font-weight: bold;
}

.l-guide-step_list {
  margin-top: 12px;
}

.l-guide-step_list li {
  text-indent: -1em;
  padding-left: 1em;
  font-size: 14px;
  margin-top: 10px;
}

.l-guide-step_list[data-size="m"] li {
  font-size: 16px;
}

.btn-type01.-large01 {
  width: 100%;
  font-size: 18px;
  padding-bottom: 22px;
  position: relative;
}

.btn-type01.-large01::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 5px;
  right: 48%;
  width: 12px;
  height: 17px;
  transition: all .3s ease-out;
  background: url(/beautykey/userguide/assets/img/icon_arrow_01.svg) 0 0/cover no-repeat;
  transform: translate(-50%, -50%) rotate(90deg);
}

.btn-type01.-white01.-large01::after {
  background: url(/beautykey/shared/img/icon_arrow_01.svg) 0 0/cover no-repeat;
  transform: translate(-50%, -50%) rotate(90deg);
}


.btn-type01.-large01 .btn-type01__inner {
  min-height: 64px;
}

.btn-type01.-large01 .btn-type01__inner.-large01 {
  min-height: 85px;
  line-height: 1.4;
}

.m-h2 {
  font-weight: bold;
  font-size: 36px;
  text-align: center;
  margin-top: 20px;
}

.m-h2 span {
  font-size: 27px;
}

.l-step_wrap {
  width: 100%;
  max-width: 960px;
  margin: 36px auto 95px;
  background-color: #fff;
  border-top: 2px solid #C81622;
  padding-bottom: 119px;
}

.l-step {
  width: 100%;
  max-width: 624px;
  margin: auto;
  padding: 50px 12px 0;
}

.l-step_item {
  display: flex;
  justify-content: space-between;
}

.l-step>li {
  position: relative;
  margin-top: 85px;
}


.l-step>li::after {
  position: absolute;
  content: "";
  border-top: 25px solid #E90A2B;
  border-right: 22px solid transparent;
  border-left: 22px solid transparent;
  left: 50%;
  transform: translateX(-50%);
  bottom: -55px;
}

.l-step>li:first-child {
  margin-top: 0px;
}

.l-step>li:last-child::after {
  display: none;
}

.l-step_item .l-step_item_head {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
}

.l-step_item_text {
  max-width: 370px;
}

.l-step_img {
  max-width: 200px;
  flex-shrink: 0;
}

.l-step_item+.l-step_item {
  margin-top: 10px;
}

.faq .m-h2 {
  margin-bottom: 40px;
}

.content-block01 p {
  font-size: 28px;
}

.fontRed {
  color: #C81622;
}

.w207 {
  max-width: 207px;
}

.hr {
  margin-top: 31px;
  border-top: 1px solid #2d2d2d;
}


.l-main-anchor-catch{
  margin-bottom: 11px;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px; /* 150% */
  letter-spacing: -0.14px;
}
.l-main-anchor-catch span{
  display: inline-block;
  position: relative;
}
.l-main-anchor-catch span::before {
  content: '';
  display: block;
  width: 1px;
  height: 50px;
  background-color: #2D2D2D;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: rotate(-25deg) translateX(-10px);
}
.l-main-anchor-catch span::after {
  content: '';
  display: block;
  width: 1px;
  height: 50px;
  background-color: #2D2D2D;
  position: absolute;
  right: 0;
  bottom: 0;
  transform: rotate(25deg) translateX(10px);
}
.l-main-anchor-catch em{
  font-style: normal;
  font-size: 17px;
  font-weight: 700;
  color: var(--primary-red, #E90A2B);
}
.l-main-anchor .btn-type01::after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  width: 12px;
  height: 17px;
  transition: all .3s ease-out;
  background: url(/beautykey/userguide/assets/img/icon_arrow_01.svg) 0 0/cover no-repeat;
  transform: translate(0, -50%) rotate(90deg);
}
.l-main-anchor .btn-type01.-white01::after{
  background: url(/beautykey/shared/img/icon_arrow_01.svg) 0 0/cover no-repeat;
  transform: translate(0, -50%) rotate(0deg);
}

@media screen and (min-width: 600px) {
  .pc_mgT10 {
    margin-top: 10px;
  }

  .pc_mgT20 {
    margin-top: 20px;
  }

  .pc_mgT30 {
    margin-top: 30px;
  }

  .pc_mgB0 {
    margin-bottom: 0;
  }

  .pc_pdB0 {
    padding-bottom: 0;
  }

  .pc_mgL15 {
    margin-left: 15px;
  }

  .content-block01.-app01:not(:first-child) {
    margin-bottom: 20px;
  }

  ._pc_t-center {
    text-align: center;
  }

  ._pc-content {
    display: block;
  }
  ._sp-content {
    display: none;
  }

  .l-main-anchor{
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 36px;
  }
}

@media screen and (max-width: 599px) {

  .sp_mgT10 {
    margin-top: 10px !important;
  }

  .sp_mgT12 {
    margin-top: 12px !important;
  }

  .sp_mgT15 {
    margin-top: 15px !important;
  }

  .sp_mgT23 {
    margin-top: 23px !important;
  }

  .sp_mgT25 {
    margin-top: 25px !important;
  }

  .l-section_inner {
    padding: 38px 15px 50px;
  }

  .l-kv .l-section_inner {
    padding-bottom: 40px;
  }

  .l-kv h1 {
    font-size: 28px;
    margin-bottom: 18px;
  }

  .l-kv p {
    font-size: 14px;
  }

  .l-guide-step_label {
    margin-bottom: 13px;
  }

  .l-guide-step_head {
    font-size: 21px;
  }

  .l-guide-step .qr {
    display: none;
  }

  .l-guide-step_app_wrap {
    margin: 20px auto 0;
  }

  .l-guide-step_app {
    width: 50%;
  }

  .l-guide-step .l-flex_center {
    justify-content: space-between;
  }

  .l-guide-step_app:last-child {
    margin-left: 18px;
  }

  .l-guide-step_note {
    margin-top: 24px;
  }

  .l-guide-step>li {
    margin-top: 50px;
  }

  .l-guide-step_app_wrap.l-flex-qr {
    flex-direction: row;
  }

  .l-guide-step_app_wrap {
    flex-direction: column-reverse;
  }

  ._pcTb-content {
    display: none;
  }

  .l-guide-step_text {
    margin-left: 0px;
  }

  .l-guide-step_img {
    margin: 17px auto 0;
  }

  .l-guide-step_list {
    margin-top: 20px;
  }

  .btn-type01 {
    padding: 5px;
  }

  .btn-type01.-large01 .btn-type01__inner {
    min-height: 40px;
  }

  .btn-type01.-large01::after {
    bottom: 1px;
    right: 47%;
  }

  .btn-type01.-large01 {
    font-size: 16px;
    padding-bottom: 21px;
  }

  .btn-type01.-large01 .btn-type01__inner.-large01 {
    line-height: 1.5;
  }

  .m-h2 {
    font-size: 22px;
    margin-top: 6px;
  }

  .guide .l-section_inner {
    padding: 38px 10px 10px;
  }

  .l-step_item {
    display: block;
    text-align: center;
  }

  .l-step {
    padding: 30px 10px 0;
  }

  .l-step_item .l-step_item_head {
    font-size: 19px;
    margin-bottom: 0px;
  }

  .guide .l-guide-step_list {
    margin-top: 13px;
  }

  .l-step_img {
    margin: 18px auto 0;
  }

  .l-step_item+.l-step_item .l-step_img {
    margin-top: 10px;
  }

  .l-step_item+.l-step_item {
    margin-top: 17px;
  }

  .l-step_wrap {
    margin: 36px auto 42px;
    padding-bottom: 50px;
  }

  .m-h2 span {
    font-size: 17px;
  }

  ._sp_t-left {
    text-align: left !important;
  }

  .faq .l-section_inner {
    padding: 38px 0px 50px;
  }

  .content-block01.-app01:not(:first-child) {
    margin-bottom: 20px;
  }

  .l-guide-step_app dt {
    font-size: 15px;
  }

  .l-step_item_text {
    max-width: none;
  }

  ._pc-content {
    display: none;
  }
  ._sp-content {
    display: block;
  }

  .l-main-anchor{
    margin-top: 26px;
  }
  .l-main-anchor-unit:nth-child(n + 2) {
    margin-top: 10px;
  }
}