.beautyhair {
  min-width: 1070px;
  /* margin: auto; */
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400; /* bold 700 */
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.mv_wrap01 {
  background-color: #BED9F8;
}
.mv_wrap01_inner {
  position: relative;
  width: 1070px;
  margin: auto;
  h1 {
    width: 1034px;
    margin-left: auto;
  }
}
.mv_logo {
  position: absolute;
  top: 40px;
  left: 24px;
  width: 339px;
  z-index: 1;
  transition: 0.2s ease;
  @media (any-hover: hover) {
    &:hover {
      opacity: 0.6;
    }
  }
}
.mv_txt {
  margin-top: 60px;
  font-size: 20px;
  text-align: center;
  line-height: 1.7;
  span {
    background: linear-gradient(transparent 55%, rgba(190, 217, 248, 0.5) 45%);
  }
}
.mv_note {
  margin: 25px 0 62px;
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
}
.mv_wrap03 {
  padding: 53px 0;
  background-color: #ECF5FF;
}
.bnr_reservation {
  display: block;
  width: 650px;
  margin: 0 auto 20px;
  transition: 0.2s ease;
  @media (any-hover: hover) {
    &:hover {
      opacity: 0.6;
    }
  }
}

.intro {
  width: 1000px;
  margin: auto;
  padding-top: 160px;
}
.intro_top {
  padding-bottom: 0.1px;
  background-color: #BED9F8;
}
.intro_top_item {
  display: flex;
  justify-content: space-between;
  padding-bottom: 64px;
}
.intro_top_item_head {
  width: 436px;
  margin: 57px 0 0 125px;
}
.intro_top_item_img {
  width: 314px;
  margin-top: -48px;
  margin-right: 95px;
}
.intro_top_checklist_wrap {
  position: relative;
  width: 505px;
  margin-top: -232px;
  margin-bottom: -220px;
  margin-left: 110px;
  &::after {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-color: #BED9F8;
    mix-blend-mode: multiply;
    position: absolute;
    top: 20px;
    left: 20px;
  }
}
.intro_top_checklist {
  padding: 30px 0 50px 29px;
  background-color: #fff;
  position: relative;
  z-index: 1;
  li {
    display: flex;
    align-items: center;
    font-size: 20px;
    line-height: 1.5;
    &::before {
      display: block;
      content: '';
      width: 58px;
      height: 58px;
      background-image: url(../img/beautyhair/intro_check.svg);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    & + li {
      margin-top: 4px;
    }
  }
}
.intro_bottom_arrow {
  margin: 273px auto 0;
  width: 99px;
  height: 50px;
  background-color: #AFD0F6;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.intro_bottom_img {
  width: 748px;
  margin: auto;
}

.course {
  padding-top: 170px;
}
.course_head {
  width: 301px;
  margin: 0 auto 48px;
}
.course_item {
  position: relative;
  padding: 76px 0 80px;
  &:nth-of-type(odd) {
    background-color: rgba(190, 217, 248, 0.3);
  }
  .course_item_num {
    margin: auto;
  }
  .course_item_txt {
    margin-top: 30px;
    font-size: 16px;
    text-align: center;
    line-height: 1.7;
  }
  .course_item_img {
    margin: 30px auto 0;
  }
  &:not(.course_item._08) {
    &::after {
      display: block;
      content: '';
      width: 99px;
      height: 50px;
      background-color: #AFD0F6;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      position: absolute;
      bottom: -22px;
      left: 0;
      right: 0;
      margin: auto;
    }
  }
}
.course_item._01 {
  .course_item_num {
    width: 212px;
  }
  .course_item_img {
    width: 429.5px;
    transform: translateX(-28px);
  }
}
.course_item._02 {
  .course_item_num {
    width: 535px;
  }
  .course_item_img {
    width: 472px;
  }
}
.course_item._03 {
  .course_item_num {
    width: 247px;
  }
  .course_item_img {
    width: 333px;
  }
}
.course_item._04 {
  .course_item_num {
    width: 556px;
  }
  .course_item_img {
    width: 316.5px;
  }
}
.course_item._07 {
  .course_item_num {
    width: 273px;
  }
  .course_item_img {
    width: 467px;
  }
}
.course_item._08 {
  padding-bottom: 120px;
  .course_item_num {
    width: 523px;
  }
  .course_item_img {
    width: 472px;
  }
}

.end {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 16px;
  grid-row-gap: 35px;
  padding: 78px 0 68px;
  background-color: #BED9F8;
}
.end_txt {
  width: 543px;
  margin: 0 auto;
  grid-area: 1 / 1 / 2 / 3;
}
.end_tel {
  display: block;
  width: 370px;
  margin-left: auto;
  grid-area: 2 / 1 / 3 / 2;
}
.end_reservation {
  display: block;
  width: 370px;
  margin-right: auto;
  grid-area: 2 / 2 / 3 / 3;
  transition: 0.2s ease;
  @media (any-hover: hover) {
    &:hover {
      opacity: 0.6;
    }
  }
}
.end_note {
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  grid-area: 3 / 1 / 4 / 3;
}

.fixed_reservation {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-top: 2px solid #E40065;
  border-bottom: 2px solid #E40065;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s ease;
  &.-active {
    opacity: 1;
    visibility: visible;
  }
  .txt {
    width: 133px;
  }
  .tel {
    width: 373px;
    margin: 0 48px 0 20px;
  }
  .btn {
    display: block;
    width: 259px;
    margin-top: -8px;
    transition: 0.2s ease;
    @media (any-hover: hover) {
      &:hover {
        opacity: 0.6;
      }
    }
  }
}

.footerWrap02 {
  width: 1000px;
  margin: auto;
  ul {
    display: flex;
    padding: 24px 0;
    a {
      float: left;
      color: #000;
      padding: 3px 0 3px 25px;
      margin-right: 10px;
      font-size: 14px;
      background: url(/common_rn2015/img/common/icon_arrow_etc_02.png) no-repeat 10px 7px;
      @media (any-hover: hover) {
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

.footerWrap03 {
  border-top: 1px solid #e1e1e1;
  .wrap {
    display: flex;
    align-items: center;
    width: 1000px;
    margin: auto;
    padding: 25px 0;
  }
  ul {
    display: flex;
    align-items: center;
  }
  .qr {
    width: 184px;
    margin-right: 15px;
  }
  .pmark {
    width: 56px;
    margin-right: 30px;
    transition: 0.2s ease;
    @media (any-hover: hover) {
      &:hover {
        opacity: 0.6;
      }
    }
  }
  .jhair {
    width: 150px;
    transition: 0.2s ease;
    @media (any-hover: hover) {
      &:hover {
        opacity: 0.6;
      }
    }
  }
  address {
    margin-left: auto;
    font-size: 10px;
  }
}