/* CSS Document */
/*--------  Media Queries --------*/
/*--------  var --------*/
/*------------------------------------------------
  /////  index  /////
------------------------------------------------*/
/*---- common ----*/
#index h2, footer h2 {
  font-size: 1.8rem;
  text-align: center;
  display: inline-block;
}

@media (max-width: 767px) {
  #index h2, footer h2 {
    font-size: 1.7rem;
  }
}

#index h2::before, footer h2::before {
  font-size: 4.8rem;
  display: block;
  line-height: 1.1;
}

@media (max-width: 999px) {
  #index h2::before, footer h2::before {
    font-size: 4rem;
  }
}

@media (max-width: 767px) {
  #index h2::before, footer h2::before {
    font-size: 3.6rem;
  }
}

.ttl_profile::before {
  content: "Profile";
}

.ttl_aesthetic::before {
  content: "Aesthetic";
}

.ttl_school::before {
  content: "School";
}

.ttl_info::before {
  content: "Information";
}

.ttl_access::before {
  content: "Access";
}

.ttl_contact::before {
  content: "Contact";
}

.ttl_aesthetic {
  text-align: left;
}

@media (max-width: 767px) {
  .ttl_aesthetic {
    text-align: center;
  }
}

.ttl_access {
  text-align: left;
}

@media (max-width: 999px) {
  .ttl_access {
    text-align: center;
  }
}

/*---- index_key ----*/
#index_key {
  height: 68rem;
  /*background-image: url("../images/index/key_img01.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    @include sp {
        background-position: 65% 50%;
    }*/
  padding: 17rem 0 0 10%;
}

#index_key .key_concept img {
  max-width: 29rem;
}

#index_key .key_concept p {
  color: #222;
  font-size: 3.2rem;
  line-height: 1.875;
  padding-left: 3rem;
}

@media (max-width: 999px) {
  #index_key {
    height: 68vw;
    padding: 15vw 5vw;
  }
  #index_key .key_concept img {
    width: 29vw;
  }
  #index_key .key_concept p {
    font-size: 3.2vw;
    padding-left: 3vw;
  }
}

@media (max-width: 767px) {
  #index_key {
    height: 90vw;
    padding: 15vw 5vw;
  }
  #index_key .key_concept img {
    width: 36vw;
  }
  #index_key .key_concept p {
    font-size: 5vw;
    padding-left: 2vw;
  }
}

/*---- index_profile ----*/
#index_profile {
  background-color: #fbf5f0;
  background-image: url("../images/common/bg_herb01.png"), url("../images/common/bg_herb02.png");
  background-repeat: no-repeat;
  background-position: bottom left, top right;
  background-size: auto;
}

@media (max-width: 767px) {
  #index_profile {
    background-size: 40% auto;
  }
}

#index_profile h2 {
  display: block;
  font-size: 4rem;
  line-height: 1.4;
}

@media (max-width: 999px) {
  #index_profile h2 {
    font-size: 3rem;
  }
}

@media (max-width: 767px) {
  #index_profile h2 {
    font-size: 2.6rem;
    line-height: 1.5;
  }
}

#index_profile p, #index_profile dd {
  font-size: 1.9rem;
}

@media (max-width: 767px) {
  #index_profile p, #index_profile dd {
    font-size: 1.6rem;
  }
}

#index_profile p strong, #index_profile dd strong {
  font-weight: normal;
}

#index_profile dt {
  font-size: 95%;
}

/*---- index_aesthetic ----*/
#index_aesthetic {
  position: relative;
}

@media (max-width: 767px) {
  #index_aesthetic h2 {
    display: block;
    text-align: center;
  }
}

#index_aesthetic .f-txt {
  padding-left: 5%;
  padding-right: 5%;
  width: 50%;
}

#index_aesthetic .f-txt .inner {
  display: inline-block;
}

@media (max-width: 767px) {
  #index_aesthetic .f-txt {
    width: 100%;
  }
}

#index_aesthetic .f-img {
  width: 50%;
  height: 52rem;
  background: url("../images/index/index_aesthetic-img.jpg") no-repeat;
  background-position: left center;
  background-size: cover;
}

@media (max-width: 1099px) {
  #index_aesthetic .f-img {
    background-position: 20% 50%;
  }
}

@media (max-width: 999px) {
  #index_aesthetic .f-img {
    height: 52vw;
  }
}

@media (max-width: 767px) {
  #index_aesthetic .f-img {
    width: 90%;
    margin-top: 2.5rem;
    margin-left: auto;
    margin-right: auto;
  }
}

#index_aesthetic::before {
  content: "";
  width: 100%;
  height: 13rem;
  background: #fbf5f0;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}

/*---- index_school ----*/
#index_school {
  background-color: #fbf5f0;
  background-image: url("../images/common/bg_herb03.png"), url("../images/common/bg_herb04.png");
  background-repeat: no-repeat;
  background-position: 100% 10%, bottom left;
  background-size: auto;
}

@media (max-width: 767px) {
  #index_school {
    background-size: 40% auto;
  }
}

#index_school .sch_container {
  width: 36rem;
  margin-left: 2%;
  margin-right: 2%;
  position: relative;
  z-index: 10;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

@media (max-width: 1299px) {
  #index_school .sch_container {
    width: 32rem;
  }
}

@media (max-width: 1199px) {
  #index_school .sch_container {
    width: 30%;
    margin-left: 1%;
    margin-right: 1%;
  }
}

@media (max-width: 767px) {
  #index_school .sch_container {
    width: 44%;
  }
}

#index_school .sch_container:hover {
  opacity: 0.7;
}

#index_school .sch_container.no_link:hover {
  opacity: 1;
}

#index_school .sch_link, #index_school .sch_nolink {
  width: 91.667%;
  background: #fff;
  padding: 2.5rem 1.5rem 1.5rem 2.5rem;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 20;
}

@media (max-width: 999px) {
  #index_school .sch_link, #index_school .sch_nolink {
    padding: 5% 3% 3% 5%;
  }
}

#index_school h3 {
  font-size: 2.2rem;
  line-height: 1;
}

@media (max-width: 1199px) {
  #index_school h3 {
    font-size: 2rem;
  }
}

@media (max-width: 999px) {
  #index_school h3 {
    font-size: 2.2vw;
  }
}

@media (max-width: 767px) {
  #index_school h3 {
    font-size: 3.8vw;
  }
}

#index_school .more, #index_school .no_more {
  color: #80b556;
  font-size: 1.6rem;
  display: block;
  text-align: right;
  line-height: 1;
}

@media (max-width: 999px) {
  #index_school .more, #index_school .no_more {
    font-size: 1.5vw;
    margin-top: 5%;
  }
}

@media (max-width: 767px) {
  #index_school .more, #index_school .no_more {
    font-size: 1.2rem;
  }
}

#index_school .no_more {
  color: #999;
}

/*---- index_info ----*/
#index_info .fb_area {
  width: 48rem;
  height: 56rem;
}

@media (max-width: 1199px) {
  #index_info .fb_area {
    width: 38rem;
  }
}

@media (max-width: 767px) {
  #index_info .fb_area {
    width: 100%;
    height: 40rem;
  }
}

@media (max-width: 1199px) {
  #index_info .fb_bp1 {
    display: none;
  }
}

#index_info .fb_tb {
  display: none;
}

@media (max-width: 1199px) {
  #index_info .fb_tb {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  #index_info .fb_tb {
    display: none;
  }
}

#index_info .fb_sp {
  display: none;
}

@media (max-width: 767px) {
  #index_info .fb_sp {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

#index_info .calendar_area {
  width: calc(100% - 480px);
}

@media (max-width: 1199px) {
  #index_info .calendar_area {
    width: calc(100% - 380px);
  }
}

@media (max-width: 767px) {
  #index_info .calendar_area {
    width: 100%;
  }
}

#index_info .calendar_area iframe {
  width: 100%;
  max-width: 100%;
  height: 56rem;
}

/*---- index_access ----*/
#index_access {
  background-color: #fbf5f0;
  background-image: url("../images/common/bg_herb05.png"), url("../images/common/bg_herb06.png");
  background-repeat: no-repeat;
  background-position: bottom left, bottom right;
  background-size: auto;
}

@media (max-width: 767px) {
  #index_access {
    background-size: 40% auto;
  }
}

@media (max-width: 999px) {
  #index_access h2 {
    display: block;
  }
}

#index_access .f-txt {
  width: 42%;
}

@media (max-width: 999px) {
  #index_access .f-txt {
    width: 100%;
    text-align: center;
  }
}

#index_access .f-map {
  width: 55%;
}

@media (max-width: 999px) {
  #index_access .f-map {
    width: 100%;
    margin-top: 5rem;
  }
}

@media (max-width: 767px) {
  #index_access .f-map {
    margin-top: 2.5rem;
  }
}

#index_access strong {
  font-size: 110%;
  font-weight: normal;
}

#index_access li {
  line-height: 1.4;
  margin-top: 0.2em;
}

#index_access dt, #index_access dd {
  display: inline-block;
  vertical-align: text-top;
}

#index_access dt {
  margin-right: 1em;
}

#index_access dl {
  display: inline-block;
  text-align: left;
}

/*------------------------------------------------
  /////  pages_common  /////
------------------------------------------------*/
#page_title {
  position: relative;
  height: 36rem;
}

@media (max-width: 999px) {
  #page_title {
    height: 30rem;
  }
}

@media (max-width: 480px) {
  #page_title {
    height: 18rem;
    margin-bottom: 10%;
  }
}

#page_title::before {
  content: "";
  width: 67.5%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -1;
}

@media (max-width: 1199px) {
  #page_title::before {
    width: 80%;
  }
}

#page_title .wrapper_1200 {
  padding-top: 22rem;
}

@media (max-width: 1299px) {
  #page_title .wrapper_1200 {
    padding-left: 5%;
  }
}

@media (max-width: 999px) {
  #page_title .wrapper_1200 {
    padding-top: 22%;
  }
}

@media (max-width: 480px) {
  #page_title .wrapper_1200 {
    padding-top: 35%;
  }
}

#page_title h1 {
  font-size: 2rem;
  text-align: left;
  display: inline-block;
}

@media (max-width: 767px) {
  #page_title h1 {
    background: rgba(255, 255, 255, 0.9);
    padding: 0.3em;
    font-size: 1.7rem;
  }
}

#page_title h1::before {
  font-size: 5.6rem;
  display: block;
  line-height: 1.2;
}

@media (max-width: 999px) {
  #page_title h1::before {
    font-size: 5rem;
  }
}

@media (max-width: 767px) {
  #page_title h1::before {
    font-size: 3.6rem;
  }
}

.ttl_childcare::before {
  content: "Child Care";
}

.ttl_facetype::before {
  content: "Face Type Makeup";
}

.ttl_herb::before {
  content: "Herb Lesson";
}

.ttl_aroma::before {
  content: "Aroma Lesson";
}

.ttl_skincare::before {
  content: "Skin Care Lesson";
}

.ttl_teaparty::before {
  content: "Sachet Tea Party";
}

.page_theme {
  font-size: 3.6rem;
  text-align: center;
}

@media (max-width: 999px) {
  .page_theme {
    font-size: 3.4rem;
  }
}

@media (max-width: 767px) {
  .page_theme {
    font-size: 2.4rem;
  }
}

#aesthetic .bg_skin, #aesthetic .bg_skin-ptn01, #aesthetic .bg_skin-ptn02, #childcare .bg_skin, #childcare .bg_skin-ptn01, #childcare .bg_skin-ptn02, #facetype .bg_skin, #facetype .bg_skin-ptn01, #facetype .bg_skin-ptn02, #herb .bg_skin, #herb .bg_skin-ptn01, #herb .bg_skin-ptn02, #aroma .bg_skin, #aroma .bg_skin-ptn01, #aroma .bg_skin-ptn02, #skincare .bg_skin, #skincare .bg_skin-ptn01, #skincare .bg_skin-ptn02, #teaparty .bg_skin, #teaparty .bg_skin-ptn01, #teaparty .bg_skin-ptn02 {
  background-color: #fbf5f0;
  background-repeat: no-repeat;
  background-size: auto;
}

@media (max-width: 767px) {
  #aesthetic .bg_skin, #aesthetic .bg_skin-ptn01, #aesthetic .bg_skin-ptn02, #childcare .bg_skin, #childcare .bg_skin-ptn01, #childcare .bg_skin-ptn02, #facetype .bg_skin, #facetype .bg_skin-ptn01, #facetype .bg_skin-ptn02, #herb .bg_skin, #herb .bg_skin-ptn01, #herb .bg_skin-ptn02, #aroma .bg_skin, #aroma .bg_skin-ptn01, #aroma .bg_skin-ptn02, #skincare .bg_skin, #skincare .bg_skin-ptn01, #skincare .bg_skin-ptn02, #teaparty .bg_skin, #teaparty .bg_skin-ptn01, #teaparty .bg_skin-ptn02 {
    background-size: 40% auto;
  }
}

#aesthetic .bg_skin-ptn01, #childcare .bg_skin-ptn01, #facetype .bg_skin-ptn01, #herb .bg_skin-ptn01, #aroma .bg_skin-ptn01, #skincare .bg_skin-ptn01, #teaparty .bg_skin-ptn01 {
  background-image: url("../images/common/bg_herb07.png"), url("../images/common/bg_herb08.png");
  background-position: top right, bottom left;
}

#aesthetic .bg_skin-ptn02, #childcare .bg_skin-ptn02, #facetype .bg_skin-ptn02, #herb .bg_skin-ptn02, #aroma .bg_skin-ptn02, #skincare .bg_skin-ptn02, #teaparty .bg_skin-ptn02 {
  background-image: url("../images/common/bg_herb09.png"), url("../images/common/bg_herb10.png");
  background-position: bottom left, bottom right;
}

#aesthetic .menu_ttl, #childcare .menu_ttl, #facetype .menu_ttl, #herb .menu_ttl, #aroma .menu_ttl, #skincare .menu_ttl, #teaparty .menu_ttl {
  font-size: 1.7rem;
  text-align: center;
  display: inline-block;
  position: relative;
  margin-top: -0.2em;
  background: #fbf5f0;
  z-index: 2;
}

@media (max-width: 767px) {
  #aesthetic .menu_ttl, #childcare .menu_ttl, #facetype .menu_ttl, #herb .menu_ttl, #aroma .menu_ttl, #skincare .menu_ttl, #teaparty .menu_ttl {
    font-size: 1.6rem;
  }
}

#aesthetic .menu_ttl::before, #childcare .menu_ttl::before, #facetype .menu_ttl::before, #herb .menu_ttl::before, #aroma .menu_ttl::before, #skincare .menu_ttl::before, #teaparty .menu_ttl::before {
  font-size: 3.4rem;
  display: block;
  line-height: 1;
  background: #fbf5f0;
  padding: 0 0.5em;
}

@media (max-width: 999px) {
  #aesthetic .menu_ttl::before, #childcare .menu_ttl::before, #facetype .menu_ttl::before, #herb .menu_ttl::before, #aroma .menu_ttl::before, #skincare .menu_ttl::before, #teaparty .menu_ttl::before {
    font-size: 3.2rem;
  }
}

@media (max-width: 767px) {
  #aesthetic .menu_ttl::before, #childcare .menu_ttl::before, #facetype .menu_ttl::before, #herb .menu_ttl::before, #aroma .menu_ttl::before, #skincare .menu_ttl::before, #teaparty .menu_ttl::before {
    font-size: 2.2rem;
  }
}

#aesthetic .menu_line, #childcare .menu_line, #facetype .menu_line, #herb .menu_line, #aroma .menu_line, #skincare .menu_line, #teaparty .menu_line {
  position: relative;
}

#aesthetic .menu_line::before, #childcare .menu_line::before, #facetype .menu_line::before, #herb .menu_line::before, #aroma .menu_line::before, #skincare .menu_line::before, #teaparty .menu_line::before {
  content: "";
  width: 100%;
  height: 1px;
  background: #b6b0a9;
  position: absolute;
  top: 25%;
  left: 0;
  z-index: 1;
}

#aesthetic .ttl_menu::before, #childcare .ttl_menu::before, #facetype .ttl_menu::before, #herb .ttl_menu::before, #aroma .ttl_menu::before, #skincare .ttl_menu::before, #teaparty .ttl_menu::before {
  content: "Menu";
}

#aesthetic .ttl_option::before, #childcare .ttl_option::before, #facetype .ttl_option::before, #herb .ttl_option::before, #aroma .ttl_option::before, #skincare .ttl_option::before, #teaparty .ttl_option::before {
  content: "Option";
}

#aesthetic .ttl_salon::before, #childcare .ttl_salon::before, #facetype .ttl_salon::before, #herb .ttl_salon::before, #aroma .ttl_salon::before, #skincare .ttl_salon::before, #teaparty .ttl_salon::before {
  content: "Salon";
}

#aesthetic .ttl_lesson::before, #childcare .ttl_lesson::before, #facetype .ttl_lesson::before, #herb .ttl_lesson::before, #aroma .ttl_lesson::before, #skincare .ttl_lesson::before, #teaparty .ttl_lesson::before {
  content: "Lesson";
}

#aesthetic .ttl_comments::before, #childcare .ttl_comments::before, #facetype .ttl_comments::before, #herb .ttl_comments::before, #aroma .ttl_comments::before, #skincare .ttl_comments::before, #teaparty .ttl_comments::before {
  content: "Comments";
}

#childcare .menu_container, #facetype .menu_container, #herb .menu_container, #aroma .menu_container, #skincare .menu_container, #teaparty .menu_container {
  background: #fff;
  padding: 4.8rem;
}

#childcare .menu_container p, #childcare .menu_container dd, #facetype .menu_container p, #facetype .menu_container dd, #herb .menu_container p, #herb .menu_container dd, #aroma .menu_container p, #aroma .menu_container dd, #skincare .menu_container p, #skincare .menu_container dd, #teaparty .menu_container p, #teaparty .menu_container dd {
  line-height: 1.75;
}

@media (max-width: 999px) {
  #childcare .menu_container, #facetype .menu_container, #herb .menu_container, #aroma .menu_container, #skincare .menu_container, #teaparty .menu_container {
    padding: 5%;
  }
}

#childcare dt, #facetype dt, #herb dt, #aroma dt, #skincare dt, #teaparty dt {
  color: #706353;
  font-size: 2.6rem;
  line-height: 1.6;
}

@media (max-width: 999px) {
  #childcare dt, #facetype dt, #herb dt, #aroma dt, #skincare dt, #teaparty dt {
    font-size: 2.4rem;
  }
}

@media (max-width: 767px) {
  #childcare dt, #facetype dt, #herb dt, #aroma dt, #skincare dt, #teaparty dt {
    font-size: 2rem;
  }
}

#childcare .icon_online, #facetype .icon_online, #herb .icon_online, #aroma .icon_online, #skincare .icon_online, #teaparty .icon_online {
  border: rgba(227, 64, 114, 0.7) 1px solid;
  color: #e34072;
  font-size: 95%;
  padding: 0.2em 0.6em;
}

#childcare .icon_online i, #facetype .icon_online i, #herb .icon_online i, #aroma .icon_online i, #skincare .icon_online i, #teaparty .icon_online i {
  margin-right: 0.4em;
}

#childcare h3, #facetype h3, #herb h3, #aroma h3, #skincare h3, #teaparty h3 {
  font-size: 2.2rem;
  line-height: 1.65;
  font-weight: bold;
}

@media (max-width: 999px) {
  #childcare h3, #facetype h3, #herb h3, #aroma h3, #skincare h3, #teaparty h3 {
    font-size: 2rem;
  }
}

@media (max-width: 767px) {
  #childcare h3, #facetype h3, #herb h3, #aroma h3, #skincare h3, #teaparty h3 {
    font-size: 1.7rem;
  }
}

#childcare .btn_S, #facetype .btn_S, #herb .btn_S, #aroma .btn_S, #skincare .btn_S, #teaparty .btn_S {
  width: 40rem;
  padding: 0.9em 1.2em 0.8em;
  font-size: 2rem;
  background-image: url("../images/common/btn-l_bg.png");
  background-size: 100% auto;
}

@media (max-width: 767px) {
  #childcare .btn_S, #facetype .btn_S, #herb .btn_S, #aroma .btn_S, #skincare .btn_S, #teaparty .btn_S {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 0.9em 0.5em 0.8em;
    font-size: 1.7rem;
  }
}

/*------------------------------------------------
  /////  Profile  /////
------------------------------------------------*/
#profile #page_title::before {
  background-image: url("../images/pages/h1_profile_img.jpg");
}

#profile h2 {
  font-size: 4.8rem;
  line-height: 1.5;
  text-align: left;
}

@media (max-width: 1199px) {
  #profile h2 {
    font-size: 4.2rem;
  }
}

@media (max-width: 999px) {
  #profile h2 {
    font-size: 3.8rem;
  }
}

@media (max-width: 767px) {
  #profile h2 {
    font-size: 2.8rem;
    font-weight: bold;
  }
}

#profile h3 {
  font-size: 2.2rem;
  line-height: 1.65;
  font-weight: bold;
}

@media (max-width: 999px) {
  #profile h3 {
    font-size: 2rem;
  }
}

@media (max-width: 767px) {
  #profile h3 {
    font-size: 1.7rem;
  }
}

#profile dt {
  font-size: 90%;
}

#profile #area01 .f-txt, #profile #area02 .f-txt {
  width: 52%;
}

@media (max-width: 767px) {
  #profile #area01 .f-txt, #profile #area02 .f-txt {
    width: 100%;
  }
}

#profile #area01 .f-img, #profile #area02 .f-img {
  width: 40%;
}

@media (max-width: 767px) {
  #profile #area01 .f-img, #profile #area02 .f-img {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
}

#profile #area03 {
  background-color: #fbf5f0;
  background-image: url("../images/common/bg_herb03.png"), url("../images/common/bg_herb04.png");
  background-repeat: no-repeat;
  background-position: 100% 0, bottom right;
  background-size: auto;
}

@media (max-width: 767px) {
  #profile #area03 {
    background-size: 40% auto;
  }
}

#profile #area03 .f-txt {
  width: 63.333%;
}

@media (max-width: 767px) {
  #profile #area03 .f-txt {
    width: 100%;
  }
}

#profile #area03 .f-img {
  width: 29.1667%;
}

@media (max-width: 767px) {
  #profile #area03 .f-img {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
}

#profile #area03 li {
  margin-top: 1rem;
  text-indent: -1em;
  padding-left: 1em;
  line-height: 1.6;
}

@media (max-width: 999px) {
  #profile #area03 li {
    margin-top: 0.8rem;
  }
}

@media (max-width: 767px) {
  #profile #area03 li {
    margin-top: 0.5rem;
  }
}

#profile #area03 h4 {
  font-weight: bold;
}

/*------------------------------------------------
  /////  Aesthetic  /////
------------------------------------------------*/
#aesthetic #page_title::before {
  background-image: url("../images/pages/h1_aesthetic_img.jpg");
}

#aesthetic .btn_S {
  width: 36rem;
  padding: 1.2em 0.7em 1.1em;
  font-size: 2rem;
  background-image: url("../images/common/btn-l_bg.png");
  background-size: 100% auto;
}

@media (max-width: 767px) {
  #aesthetic .btn_S {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 1.2em 0.5em 1em;
  }
}

#aesthetic #area01 .wrapper {
  max-width: 80rem;
}

#aesthetic #area02 .menu_container {
  background: #fff;
  padding: 3rem 4.5rem 2.6rem;
}

@media (max-width: 999px) {
  #aesthetic #area02 .menu_container {
    padding: 5%;
  }
}

#aesthetic #area02 dt, #aesthetic #area02 .price {
  color: #706353;
  font-size: 2.6rem;
  line-height: 1.3;
}

@media (max-width: 999px) {
  #aesthetic #area02 dt, #aesthetic #area02 .price {
    font-size: 2.4rem;
  }
}

@media (max-width: 767px) {
  #aesthetic #area02 dt, #aesthetic #area02 .price {
    font-size: 2.2rem;
  }
}

#aesthetic #area02 .f-txt {
  width: calc(100% - 180px);
}

@media (max-width: 767px) {
  #aesthetic #area02 .f-txt {
    width: 100%;
  }
}

#aesthetic #area02 .f-price {
  width: 18rem;
}

@media (max-width: 767px) {
  #aesthetic #area02 .f-price {
    width: 100%;
    margin-top: 1rem;
  }
}

#aesthetic #area03 .f-table01 {
  width: 44%;
}

#aesthetic #area03 .f-table02 {
  width: 50%;
}

@media (max-width: 999px) {
  #aesthetic #area03 .f-table01, #aesthetic #area03 .f-table02 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  #aesthetic #area03 .f-table01, #aesthetic #area03 .f-table02 {
    width: 100%;
  }
}

#aesthetic #area03 table {
  width: 100%;
}

#aesthetic #area03 tr {
  border-bottom: #b6b0a9 1px solid;
}

#aesthetic #area03 th, #aesthetic #area03 td {
  padding: 0.7em 0;
  color: #706353;
  font-size: 2.2rem;
  line-height: 1.3;
}

@media (max-width: 767px) {
  #aesthetic #area03 th, #aesthetic #area03 td {
    font-size: 1.6rem;
  }
}

#aesthetic #area03 td {
  padding: 0.7em 0 0.7em 1em;
  text-align: right;
}

#aesthetic #area04 .f-img {
  width: 23.5%;
}

@media (max-width: 767px) {
  #aesthetic #area04 .f-img {
    width: 48%;
  }
}

#aesthetic #area04 .wrapper {
  max-width: 90rem;
}

#aesthetic #area05 .wrapper {
  border: #b6b0a9 1px solid;
  padding: 4rem 5rem;
}

@media (max-width: 999px) {
  #aesthetic #area05 .wrapper {
    padding: 5% 5%;
  }
}

#aesthetic #area05 .note_ttl {
  font-size: 2.8rem;
  line-height: 1.3;
  text-align: center;
}

@media (max-width: 767px) {
  #aesthetic #area05 .note_ttl {
    font-size: 5.5vw;
  }
}

/*------------------------------------------------
  /////  school  /////
------------------------------------------------*/
/*---- online ----*/
#school_online .online_bg_area {
  background: #fbebe6;
}

#school_online #online_title .wrapper_1100 {
  background-image: url("../images/lp/online_title_bg.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto;
  padding: 8rem 0;
}

@media (max-width: 999px) {
  #school_online #online_title .wrapper_1100 {
    background-size: 80% auto;
    padding-top: 10%;
  }
  #school_online #online_title .wrapper_1100 img {
    width: 50vw;
    height: auto;
  }
}

@media (max-width: 767px) {
  #school_online #online_title .wrapper_1100 {
    background-size: 100% auto;
    padding: 36% 0 0 4%;
  }
  #school_online #online_title .wrapper_1100 img {
    width: 80vw;
  }
}

#school_online .about2 {
  position: relative;
}

#school_online .about2 img {
  position: relative;
  z-index: 2;
}

#school_online .about2::after {
  content: "";
  background: #fff;
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
}

#school_online #online_present .list_area {
  background: url(../images/lp/online_present_bg.jpg) no-repeat center/cover;
}

#school_online #online_profile .f-img {
  width: 54%;
}

#school_online #online_profile .f-txt {
  width: 46%;
}

#school_online #online_profile .f-txt dt {
  line-height: 1.35;
}

#school_online #online_profile .f-txt dd {
  font-size: 160%;
  line-height: 1;
  margin-top: 0.5em;
}

#school_online #online_voice .voice_area {
  background: #fff;
  border-radius: 6px;
  padding: 2em 2.5em;
}

@media (max-width: 767px) {
  #school_online #online_voice .voice_area {
    padding: 1.4em 1.8em;
  }
}

#school_online #online_voice .voice_area h3 {
  color: #f3556f;
  font-size: 140%;
  font-weight: bold;
  line-height: 1.5;
}

@media (max-width: 767px) {
  #school_online #online_voice .voice_area h3 {
    font-size: 130%;
  }
}

#school_online #online_price .price {
  font-size: 230%;
  line-height: 1;
  letter-spacing: 0.01em;
}

#school_online #online_price .price .unit {
  font-size: 85%;
}

#school_online #online_price .price .tax_in {
  font-size: 66%;
}

@media (max-width: 767px) {
  #school_online #online_price .price {
    font-size: 190%;
    padding-left: 0.4em;
  }
}

#school_online .cv_area a {
  display: inline-block;
}

#school_online .cv_area .cv_btn {
  -webkit-filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.15));
          filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.15));
  margin-bottom: 2px;
  position: relative;
  z-index: 2;
}

#school_online .cv_area .cv_btn:hover {
  -webkit-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
  -webkit-filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.15));
          filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.15));
  margin-top: 2px;
  margin-bottom: 0;
  opacity: 0.8;
}

#school_online .note {
  border: rgba(0, 0, 0, 0.2) 1px solid;
  padding: 1.5em 2.5em;
}

#school_online .note dt {
  font-size: 130%;
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  margin-bottom: 0.8em;
}

#school_online .note dd {
  line-height: 1.65;
  text-indent: -1em;
  padding-left: 1em;
}

@media (max-width: 767px) {
  #school_online .note {
    padding: 1em;
  }
}

/*---- childcare ----*/
#childcare #page_title::before {
  background-image: url("../images/pages/h1_childcare_img.jpg");
}

#childcare .bridge {
  padding-top: 28rem;
  background: url(../images/pages/childcare_img01.jpg) no-repeat center/cover;
}

@media (max-width: 767px) {
  #childcare .bridge {
    padding-top: 20rem;
  }
}

#childcare #area02 .f-img {
  width: 50rem;
}

@media (max-width: 999px) {
  #childcare #area02 .f-img {
    width: 40%;
  }
}

@media (max-width: 767px) {
  #childcare #area02 .f-img {
    width: 100%;
  }
}

#childcare #area02 .f-txt {
  width: calc(100% - 600px);
}

@media (max-width: 999px) {
  #childcare #area02 .f-txt {
    width: 53%;
  }
}

@media (max-width: 767px) {
  #childcare #area02 .f-txt {
    width: 100%;
  }
}

#childcare #area02 li {
  font-size: 117.5%;
  line-height: 1.8;
  text-indent: -1.15em;
  padding-left: 1.15em;
}

@media (max-width: 767px) {
  #childcare #area02 li {
    font-size: 110%;
  }
}

#childcare #area03 .left_area {
  width: 40%;
}

#childcare #area03 .right_area {
  width: 55%;
}

@media (max-width: 999px) {
  #childcare #area03 .left_area, #childcare #area03 .right_area {
    width: 100%;
  }
}

#childcare #area03 li {
  font-size: 106%;
  line-height: 1.4;
  padding: 0.8em 0;
  border-bottom: #b6b0a9 1px solid;
}

#childcare #area04 .container {
  background: #fff;
  padding: 4.8rem;
}

#childcare #area04 .container p, #childcare #area04 .container dt, #childcare #area04 .container dd {
  line-height: 1.75;
}

@media (max-width: 999px) {
  #childcare #area04 .container {
    padding: 5%;
  }
}

#childcare #area04 dt {
  font-size: 115%;
  font-weight: bold;
}

/*---- facetype ----*/
#facetype #page_title::before {
  background-image: url("../images/pages/h1_facetype_img.jpg");
}

@media (max-width: 999px) {
  #facetype #page_title::before {
    background-position: 70% 50%;
  }
}

@media (max-width: 767px) {
  #facetype #page_title::before {
    background-position: 20% 50%;
  }
}

#facetype .f-txt {
  width: 55.522%;
}

@media (max-width: 767px) {
  #facetype .f-txt {
    width: 100%;
  }
}

#facetype .f-img {
  width: 37.61%;
}

@media (max-width: 767px) {
  #facetype .f-img {
    width: 100%;
  }
  #facetype .f-img img {
    width: 80%;
  }
}

/*---- herb ----*/
#herb #page_title::before {
  background-image: url("../images/pages/h1_herb_img.jpg");
}

#herb .f-txt {
  width: 61.674%;
}

@media (max-width: 767px) {
  #herb .f-txt {
    width: 100%;
  }
}

#herb .f-img {
  width: 34.141%;
}

@media (max-width: 767px) {
  #herb .f-img {
    width: 100%;
  }
  #herb .f-img img {
    width: 80%;
  }
}

/*---- aroma ----*/
#aroma #page_title::before {
  background-image: url("../images/pages/h1_aroma_img.jpg");
}

#aroma .f-txt {
  width: 57.2687%;
}

@media (max-width: 767px) {
  #aroma .f-txt {
    width: 100%;
  }
}

#aroma .f-img {
  width: 35.242%;
}

@media (max-width: 767px) {
  #aroma .f-img {
    width: 100%;
  }
  #aroma .f-img img {
    width: 80%;
  }
}

/*---- skincare ----*/
#skincare #page_title::before {
  background-image: url("../images/pages/h1_skincare_img.jpg");
}

#skincare .f-txt {
  width: 53.9647%;
}

@media (max-width: 767px) {
  #skincare .f-txt {
    width: 100%;
  }
}

#skincare .f-img {
  width: 39.64758%;
}

@media (max-width: 767px) {
  #skincare .f-img {
    width: 100%;
  }
  #skincare .f-img img {
    width: 80%;
  }
}

/*---- tamatebako ----*/
#tamatebako #tamatebako_title .tamatebako_title_left {
  background: linear-gradient(50deg, #fddfe5 0%, #fffbfc 51%);
  width: 50%;
  padding: 0 5%;
}

@media (max-width: 767px) {
  #tamatebako #tamatebako_title .tamatebako_title_left {
    width: 100%;
    padding: 6vw 15%;
  }
}

#tamatebako #tamatebako_title .tamatebako_title_left .inner {
  margin: 0 auto;
}

#tamatebako #tamatebako_title .tamatebako_title_left img {
  max-width: 39rem;
}

#tamatebako #tamatebako_title .tamatebako_title_left .icon_online {
  border: rgba(227, 64, 114, 0.7) 1px solid;
  color: #e34072;
  font-size: 95%;
  padding: 0.2em 0.6em;
}

#tamatebako #tamatebako_title .tamatebako_title_left .icon_online i {
  margin-right: 0.4em;
}

#tamatebako #tamatebako_title .tamatebako_title_right {
  width: 50%;
}

@media (max-width: 767px) {
  #tamatebako #tamatebako_title .tamatebako_title_right {
    width: 100%;
  }
}

#tamatebako #tamatebako_title .tamatebako_img {
  position: relative;
  z-index: 2;
  margin-top: -18rem;
}

@media (max-width: 999px) {
  #tamatebako #tamatebako_title .tamatebako_img {
    margin-top: -16vw;
  }
}

#tamatebako #tamatebako_title .tamatebako_img img {
  width: 70%;
}

@media (max-width: 767px) {
  #tamatebako #tamatebako_title .tamatebako_img img {
    width: 100%;
  }
}

#tamatebako .f-img {
  width: 42%;
}

@media (max-width: 767px) {
  #tamatebako .f-img {
    width: 100%;
  }
  #tamatebako .f-img img {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

#tamatebako .f-txt {
  width: 47%;
}

@media (max-width: 767px) {
  #tamatebako .f-txt {
    margin-top: 3rem;
    margin-bottom: 6rem;
    width: 100%;
  }
}

#tamatebako h2 {
  color: #3d001a;
  font-size: 170%;
  font-weight: 400;
  line-height: 1.8;
}

@media (max-width: 999px) {
  #tamatebako h2 {
    font-size: 140%;
  }
}

@media (max-width: 767px) {
  #tamatebako h2 {
    font-size: 123%;
  }
}

/*------------------------------------------------
  /////  others  /////
------------------------------------------------*/
#message404 .wrapper {
  background: url("../images/common/bg_404.jpg") no-repeat bottom center/100% auto;
  max-width: 80rem;
}

#message404 .error_ttl {
  color: #bbb;
  font-size: 140%;
  font-weight: bold;
}

#message404 .store_name > strong {
  font-size: 130%;
  font-weight: normal;
}

@media (max-width: 767px) {
  #message404 .store_name > strong {
    font-size: 110%;
  }
}

#message404 .btn_L {
  display: inline-block;
  width: auto;
  min-width: 40%;
  padding: 1.2em 1em 1.1em;
}

@media (max-width: 767px) {
  #message404 .btn_L {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 1.1em 0.5em 1em;
    font-size: 1.7rem;
  }
}

/* style end */
/* CSS Document */
/*--------  Media Queries --------*/
/*--------  var --------*/
/*------------------------------------------------
  /////  header_navi  /////
------------------------------------------------*/
/*-------- navi_space --------*/
main {
  padding-top: 11rem;
}

@media (max-width: 999px) {
  main {
    padding-top: 10rem;
  }
}

@media (max-width: 767px) {
  main {
    padding-top: 7rem;
  }
}

/*-------- g-nav_pc --------*/
#g-nav_pc {
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  padding: 1rem;
  position: fixed;
  z-index: 980;
  top: 0;
  left: 0;
}

#g-nav_pc img {
  max-width: 23rem;
  height: auto;
}

#g-nav_pc .tag_line {
  color: #3d001a;
  font-size: 1.8rem;
  line-height: 1.33;
  width: 20rem;
  margin-left: 1.5rem;
  margin-right: auto;
  letter-spacing: -0.04em;
}

@media (max-width: 1099px) {
  #g-nav_pc .tag_line {
    font-size: 1.6rem;
  }
}

@media (max-width: 767px) {
  #g-nav_pc .tag_line {
    font-size: 1.2rem;
    letter-spacing: -0.05em;
    width: 14rem;
    margin-left: 0.5rem;
  }
}

#g-nav_pc .tag_line strong {
  font-weight: normal;
}

#g-nav_pc .navi_area {
  width: calc(100% - 480px);
}

@media (max-width: 999px) {
  #g-nav_pc img {
    max-height: 8rem;
    width: auto;
  }
}

@media (max-width: 767px) {
  #g-nav_pc {
    padding: 0.5rem 0 0.5rem 0.3rem;
  }
  #g-nav_pc img {
    max-height: 6rem;
    width: auto;
  }
}

#g-nav_pc li {
  font-size: 1.4rem;
  display: inline-block;
  margin-left: 2.5%;
  margin-right: 2.5%;
  text-align: center;
}

@media (max-width: 999px) {
  #g-nav_pc li {
    font-size: 1.3rem;
  }
}

#g-nav_pc li:hover {
  color: #80b556;
}

#g-nav_pc .nav_aes::before, #g-nav_pc .nav_sch::before, #g-nav_pc .nav_pro::before, #g-nav_pc .nav_acc::before, #g-nav_pc .nav_con::before {
  font-size: 2.2rem;
  display: block;
  line-height: 1.1;
}

@media (max-width: 1099px) {
  #g-nav_pc .nav_aes::before, #g-nav_pc .nav_sch::before, #g-nav_pc .nav_pro::before, #g-nav_pc .nav_acc::before, #g-nav_pc .nav_con::before {
    font-size: 2rem;
  }
}

#g-nav_pc .nav_aes::before {
  content: "Aesthetic";
}

#g-nav_pc .nav_sch::before {
  content: "School";
}

#g-nav_pc .nav_sch::after {
  content: "";
  display: block;
  line-height: 1;
  margin: -4px auto 0;
  width: 2rem;
  height: 1.5rem;
  background: url("../images/common/nav_arrow_down.png") no-repeat bottom center/auto;
}

#g-nav_pc .nav_pro::before {
  content: "Profile";
}

#g-nav_pc .nav_acc::before {
  content: "Access";
}

#g-nav_pc .nav_con::before {
  content: "Contact";
}

/*-------- school_menu --------*/
#g-nav_pc ul li:hover .sch_menu {
  max-height: 100vh;
  opacity: 1;
}

#g-nav_pc .sch_menu {
  width: 100%;
  background: rgba(252, 252, 252, 0.95);
  position: absolute;
  top: 11rem;
  left: 0;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 9999;
}

#g-nav_pc .sch_menu ul {
  padding: 4rem 2rem;
}

#g-nav_pc .sch_menu li {
  font-size: 1.6rem;
  margin-left: 1.5%;
  margin-right: 1.5%;
  color: #999;
}

#g-nav_pc .sch_menu li:hover {
  color: #444;
}

/*-------- g-nav_sp --------*/
#nav-toggle {
  position: fixed;
  top: 10px;
  right: 20px;
  height: 46px;
  cursor: pointer;
}

#nav-toggle > div {
  position: relative;
  width: 26px;
}

#nav-toggle span {
  width: 100%;
  height: 1px;
  left: 0;
  display: block;
  background: #444;
  position: absolute;
  -webkit-transition: top .5s ease, -webkit-transform .6s ease-in-out;
  transition: top .5s ease, -webkit-transform .6s ease-in-out;
  transition: transform .6s ease-in-out, top .5s ease;
  transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
}

#nav-toggle span:nth-child(1) {
  top: 12px;
}

#nav-toggle span:nth-child(2) {
  top: 22px;
}

#nav-toggle span:nth-child(3) {
  top: 32px;
}

#nav-toggle:hover span:nth-child(1) {
  top: 12px;
}

#nav-toggle:hover span:nth-child(3) {
  top: 32px;
}

.open #nav-toggle span {
  background: #444;
}

.open #nav-toggle span:nth-child(1) {
  top: 20px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.open #nav-toggle span:nth-child(2) {
  top: 20px;
  width: 0;
  left: 50%;
}

.open #nav-toggle span:nth-child(3) {
  top: 20px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

/* z-index */
#nav-toggle {
  z-index: 1000;
}

#container {
  z-index: 900;
}

#gloval-nav {
  background: rgba(255, 255, 255, 0.95);
  color: #444;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 20% 10% 20% 25%;
  opacity: 0;
  -webkit-transition: opacity .6s ease, visibility .6s ease;
  transition: opacity .6s ease, visibility .6s ease;
}

#gloval-nav .sp_sch_menu {
  border-left: #eee 1px solid;
  font-size: 1.5rem;
  padding-left: 2em;
}

#gloval-nav .sp_sch_menu li {
  color: #999;
}

#gloval-nav .sp_sch_menu a {
  color: #444;
  padding: 1%;
}

#gloval-nav a {
  display: block;
  color: #444;
  text-decoration: none;
  padding: 3% 0;
  -webkit-transition: color .6s ease;
  transition: color .6s ease;
}

#gloval-nav a:hover {
  color: #80b556;
}

#gloval-nav ul {
  list-style: none;
}

#gloval-nav ul li {
  font-size: 2rem;
  opacity: 0;
  -webkit-transform: translateX(30px);
          transform: translateX(30px);
  -webkit-transition: opacity .2s ease, -webkit-transform .6s ease;
  transition: opacity .2s ease, -webkit-transform .6s ease;
  transition: transform .6s ease, opacity .2s ease;
  transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
}

@media (max-width: 767px) {
  #gloval-nav ul li {
    font-size: 1.6rem;
  }
}

/* open */
.open {
  overflow: hidden;
}

.open #gloval-nav {
  visibility: visible;
  opacity: 1;
}

.open #gloval-nav li {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: opacity .9s ease, -webkit-transform 1s ease;
  transition: opacity .9s ease, -webkit-transform 1s ease;
  transition: transform 1s ease, opacity .9s ease;
  transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
}

/*------------------------------------------------
  /////  footer  /////
------------------------------------------------*/
footer {
  background: #fff url("../images/common/contact_bg.jpg") no-repeat;
  background-position: top right;
  background-size: auto;
}

@media (max-width: 999px) {
  footer {
    background-size: auto 66%;
  }
}

@media (max-width: 767px) {
  footer {
    background-size: auto 50%;
  }
}

footer.no_contact {
  background: none;
}

#footer_area, #contact {
  background: rgba(255, 255, 255, 0.5);
}

#contact {
  position: relative;
}

#contact::after {
  content: "";
  max-width: 140rem;
  width: 96%;
  height: 1px;
  background: rgba(112, 99, 83, 0.3);
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

#footer_area p, #footer_area dt, #footer_area dd {
  line-height: 1.75;
}

#footer_area i {
  margin-right: 0.5em;
}

#footer_area address {
  padding-left: 11rem;
  position: relative;
  z-index: 10;
}

#footer_area address dt {
  color: #3d001a;
  font-size: 106%;
}

#footer_area address dd {
  color: #3d001a;
  font-size: 90%;
}

#footer_area address dd a {
  font-size: 106%;
}

@media (max-width: 767px) {
  #footer_area address {
    padding-left: 0;
  }
}

#footer_area address::before {
  content: "";
  width: 8rem;
  height: 8rem;
  background: url("../images/common/logo_mark_mono.png") no-repeat center/contain;
  position: absolute;
  top: 4px;
  left: 0;
  z-index: 11;
}

@media (max-width: 767px) {
  #footer_area address::before {
    background: none;
  }
}

@media (min-width: 767px) {
  #footer_area a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

#footer_area .sns_area li {
  display: inline-block;
  margin-left: 2em;
}

@media (max-width: 767px) {
  #footer_area .sns_area li {
    margin-left: 0;
    margin-right: 2em;
  }
}

#footer_area .copyright {
  color: #666;
  font-size: 88%;
}

/*------------------------------------------------
  /////  margin and padding  /////
------------------------------------------------*/
/*-------- PC margin & padding --------*/
.mt05 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mt40 {
  margin-top: 40px;
}

.mt50 {
  margin-top: 50px;
}

.mt60 {
  margin-top: 60px;
}

.mt70 {
  margin-top: 70px;
}

.mt80 {
  margin-top: 80px;
}

.mt90 {
  margin-top: 90px;
}

.mt100 {
  margin-top: 100px;
}

.mt110 {
  margin-top: 110px;
}

.mt120 {
  margin-top: 120px;
}

.mt130 {
  margin-top: 130px;
}

.mt140 {
  margin-top: 140px;
}

.mt150 {
  margin-top: 150px;
}

.pt30 {
  padding-top: 30px;
}

.pt40 {
  padding-top: 40px;
}

.pt50 {
  padding-top: 50px;
}

.pt60 {
  padding-top: 60px;
}

.pt70 {
  padding-top: 70px;
}

.pt80 {
  padding-top: 80px;
}

.pt90 {
  padding-top: 90px;
}

.pt100 {
  padding-top: 100px;
}

.pt110 {
  padding-top: 110px;
}

.pt120 {
  padding-top: 120px;
}

.pt130 {
  padding-top: 130px;
}

.pt140 {
  padding-top: 140px;
}

.pt150 {
  padding-top: 150px;
}

.pt160 {
  padding-top: 160px;
}

.pt170 {
  padding-top: 170px;
}

.pt180 {
  padding-top: 180px;
}

.pt190 {
  padding-top: 190px;
}

.pt200 {
  padding-top: 200px;
}

.pb30 {
  padding-bottom: 30px;
}

.pb40 {
  padding-bottom: 40px;
}

.pb50 {
  padding-bottom: 50px;
}

.pb60 {
  padding-bottom: 60px;
}

.pb70 {
  padding-bottom: 70px;
}

.pb80 {
  padding-bottom: 80px;
}

.pb90 {
  padding-bottom: 90px;
}

.pb100 {
  padding-bottom: 100px;
}

.pb110 {
  padding-bottom: 110px;
}

.pb120 {
  padding-bottom: 120px;
}

.pb130 {
  padding-bottom: 130px;
}

.pb140 {
  padding-bottom: 140px;
}

.pb150 {
  padding-bottom: 150px;
}

.pb160 {
  padding-bottom: 160px;
}

.pb170 {
  padding-bottom: 170px;
}

.pb180 {
  padding-bottom: 180px;
}

.pb190 {
  padding-bottom: 190px;
}

.pb200 {
  padding-bottom: 200px;
}

/*-------- tablet margin & padding --------*/
@media screen and (max-width: 999px) {
  .mt05 {
    margin-top: 4px;
  }
  .mt10 {
    margin-top: 7px;
  }
  .mt20 {
    margin-top: 14px;
  }
  .mt30 {
    margin-top: 21px;
  }
  .mt40 {
    margin-top: 28px;
  }
  .mt50 {
    margin-top: 35px;
  }
  .mt60 {
    margin-top: 42px;
  }
  .mt70 {
    margin-top: 48px;
  }
  .mt80 {
    margin-top: 56px;
  }
  .mt90 {
    margin-top: 63px;
  }
  .mt100 {
    margin-top: 70px;
  }
  .mt110 {
    margin-top: 77px;
  }
  .mt120 {
    margin-top: 84px;
  }
  .mt130 {
    margin-top: 91px;
  }
  .mt140 {
    margin-top: 98px;
  }
  .mt150 {
    margin-top: 105px;
  }
  .pt30 {
    padding-top: 21px;
  }
  .pt40 {
    padding-top: 28px;
  }
  .pt50 {
    padding-top: 35px;
  }
  .pt60 {
    padding-top: 48px;
  }
  .pt70 {
    padding-top: 49px;
  }
  .pt80 {
    padding-top: 56px;
  }
  .pt90 {
    padding-top: 63px;
  }
  .pt100 {
    padding-top: 70px;
  }
  .pt110 {
    padding-top: 77px;
  }
  .pt120 {
    padding-top: 84px;
  }
  .pt130 {
    padding-top: 91px;
  }
  .pt140 {
    padding-top: 98px;
  }
  .pt150 {
    padding-top: 105px;
  }
  .pt160 {
    padding-top: 112px;
  }
  .pt170 {
    padding-top: 119px;
  }
  .pt180 {
    padding-top: 126px;
  }
  .pt190 {
    padding-top: 133px;
  }
  .pt200 {
    padding-top: 140px;
  }
  .pb30 {
    padding-bottom: 21px;
  }
  .pb40 {
    padding-bottom: 28px;
  }
  .pb50 {
    padding-bottom: 35px;
  }
  .pb60 {
    padding-bottom: 42px;
  }
  .pb70 {
    padding-bottom: 49px;
  }
  .pb80 {
    padding-bottom: 56px;
  }
  .pb90 {
    padding-bottom: 63px;
  }
  .pb100 {
    padding-bottom: 70px;
  }
  .pb110 {
    padding-bottom: 77px;
  }
  .pb120 {
    padding-bottom: 84px;
  }
  .pb130 {
    padding-bottom: 91px;
  }
  .pb140 {
    padding-bottom: 98px;
  }
  .pb150 {
    padding-bottom: 105px;
  }
  .pb160 {
    padding-bottom: 112px;
  }
  .pb170 {
    padding-bottom: 119px;
  }
  .pb180 {
    padding-bottom: 126px;
  }
  .pb190 {
    padding-bottom: 133px;
  }
  .pb200 {
    padding-bottom: 140px;
  }
}

/*-------- SP margin & padding --------*/
@media screen and (max-width: 767px) {
  .spmt20 {
    margin-top: 10px;
  }
  .spmt30 {
    margin-top: 15px;
  }
  .spmt40 {
    margin-top: 20px;
  }
  .spmt50 {
    margin-top: 25px;
  }
  .spmt60 {
    margin-top: 30px;
  }
  .mt05 {
    margin-top: 3px;
  }
  .mt10 {
    margin-top: 5px;
  }
  .mt20 {
    margin-top: 10px;
  }
  .mt30 {
    margin-top: 15px;
  }
  .mt40 {
    margin-top: 20px;
  }
  .mt50 {
    margin-top: 25px;
  }
  .mt60 {
    margin-top: 30px;
  }
  .mt70 {
    margin-top: 35px;
  }
  .mt80 {
    margin-top: 40px;
  }
  .mt90 {
    margin-top: 45px;
  }
  .mt100 {
    margin-top: 50px;
  }
  .mt110 {
    margin-top: 55px;
  }
  .mt120 {
    margin-top: 60px;
  }
  .mt130 {
    margin-top: 65px;
  }
  .mt140 {
    margin-top: 70px;
  }
  .mt150 {
    margin-top: 75px;
  }
  .pt30 {
    padding-top: 15px;
  }
  .pt40 {
    padding-top: 20px;
  }
  .pt50 {
    padding-top: 25px;
  }
  .pt60 {
    padding-top: 30px;
  }
  .pt70 {
    padding-top: 35px;
  }
  .pt80 {
    padding-top: 40px;
  }
  .pt90 {
    padding-top: 45px;
  }
  .pt100 {
    padding-top: 50px;
  }
  .pt110 {
    padding-top: 55px;
  }
  .pt120 {
    padding-top: 60px;
  }
  .pt130 {
    padding-top: 65px;
  }
  .pt140 {
    padding-top: 70px;
  }
  .pt150 {
    padding-top: 75px;
  }
  .pb30 {
    padding-bottom: 15px;
  }
  .pb40 {
    padding-bottom: 20px;
  }
  .pb50 {
    padding-bottom: 25px;
  }
  .pb60 {
    padding-bottom: 30px;
  }
  .pb70 {
    padding-bottom: 35px;
  }
  .pb80 {
    padding-bottom: 40px;
  }
  .pb90 {
    padding-bottom: 45px;
  }
  .pb100 {
    padding-bottom: 50px;
  }
  .pb110 {
    padding-bottom: 55px;
  }
  .pb120 {
    padding-bottom: 60px;
  }
  .pb130 {
    padding-bottom: 65px;
  }
  .pb140 {
    padding-bottom: 70px;
  }
  .pb150 {
    padding-bottom: 75px;
  }
}