@charset "UTF-8";

/*----------------------------
  concept
----------------------------*/
/* headline */

/* intro */
#intro {
  padding: 5rem 0 10rem;
  background: url(../img/concept_bg.jpg) no-repeat top center / cover;
  position: relative;
}
#intro .intro_ttl { font-size: 4rem; text-align: center; line-height: 1.4; font-weight: bold;}
#intro .intro_txt { font-size: 2rem; text-align: center; line-height: 1.8; }
#intro .txt_area { margin-top: 3rem; padding: 3rem 0 1rem; background: url(../img/concept_bg_line.jpg) repeat-y top center; position: relative; }
#intro .concept_logo { max-width: 309px; margin: 6rem auto 0; }
#intro .img { max-width: 28vw; height: auto; position: absolute; }
#intro .img01 { top: 0; left: 0; }
#intro .img02 { bottom: 0; right: 0; transform: translateY(50%); }
#intro .img03 { bottom: 0; left: 0; transform: translateY(50%); }

/* skincare */
#skincare {
  margin-bottom: 16rem;
  padding: 20rem 0 10rem;
  background: #f0f3f6 url(../img/skincare_bg.jpg) no-repeat top center / 100%;
}
#skincare .skincare_ttl { font-size: 4rem; text-align: center; line-height: 1.4; font-weight: bold;}
#skincare .skincare_txt { font-size: 1.8rem; line-height: 1.8; margin-top: .5rem; }
#skincare .skincare_ttl_low { color: #456097; font-size: 2rem; margin-top: 4rem; font-weight: bold; line-height: 1.6;}
#skincare .skincare_ttl_sub { color: #455268; font-size: 2.2rem; font-weight: bold; line-height: 1.6;}
#skincare .skincare_ttl_sub span { display: inline-block; padding-left: 2.5em; position: relative; }
#skincare .skincare_ttl_sub span::before { content: ''; width: 2.2em; height: 1px; background-color: #455268; position: absolute; top: 50%; left: 0; }
#skincare .skincare_catch { color: #456097; font-size: 2.2rem; font-weight: bold; margin-top: 4rem; }
#skincare .skincare_img { max-width: 657px; margin: 5rem auto 4rem; }
#skincare .skincare_wrap { margin-top: 7rem; padding: 2.5rem 3rem; background-color: #fff; border: 1px solid #e8ebed; display: flex; justify-content: space-between; align-items: center; }
#skincare .skincare_wrap .img { width: 45%; }
#skincare .skincare_wrap .txt_area { width: 50%; }
#skincare .skincare_wrap .txt_area .skincare_txt { text-align: left; line-height: 1.6; margin-top: 3rem; }


@media screen and (min-width: 768px) and (max-width: 1200px) {
  #intro .intro_ttl { font-size: 3.3vw; }
  #intro .intro_txt { font-size: 1.6vw; }
  #intro .concept_logo { max-width: 25.75vw; }
  #skincare .skincare_ttl { font-size: 3.3vw; }
  #skincare .skincare_img { max-width: 54.75vw; }
  #skincare .skincare_txt { font-size: 1.5vw; }
  #skincare .skincare_ttl_sub { font-size: 1.8vw; }
  #skincare .skincare_ttl_low { font-size: 1.6vw; }
  #skincare .skincare_catch { font-size: 1.8vw; }
}



@media screen and (max-width: 767px) {
  
  /* headline */

  /* intro */
  #intro { padding: 5rem 0 3rem; background-image: url(../img/concept_bg_sp.jpg); }
  #intro .intro_ttl { font-size: 2rem; }
  #intro .intro_txt { font-size: 1.4rem; line-height: 1.6; }
  #intro .txt_area { margin-top: 2rem; padding: 2rem 0 1rem; background-image: url(../img/concept_bg_line_sp.jpg); background-size: 26.5px auto; }
  #intro .concept_logo { max-width: 154.5px; margin-top: 3rem; position: relative; }
  #intro .img01 { top: 17%; left: -4%; max-width: 30vw; }
  #intro .img02 { right: -6%; max-width: 40vw; transform: translateY(55%); }
  #intro .img03 { left: -10%; max-width: 50vw; }

  /* skincare */
  #skincare { margin-bottom: 0; padding: 10rem 0 8rem; background-image: url(../img/skincare_bg_sp.jpg); }
  #skincare .skincare_ttl { font-size: 2rem; }
  #skincare .skincare_txt { font-size: 1.4rem; text-align: left; line-height: 1.8; }
  #skincare .skincare_ttl_low { font-size: 1.6rem; }
  #skincare .skincare_ttl_sub { font-size: 1.5rem; }
  #skincare .skincare_ttl_sub span { display: inline-block; padding-left: 2.5em; position: relative; }
  #skincare .skincare_ttl_sub span::before { content: ''; width: 2.2em; height: 1px; background-color: #455268; position: absolute; top: 50%; left: 0; }
  #skincare .skincare_catch { font-size: 1.5rem; text-align: left; }
  #skincare .skincare_img { margin-top: 2rem; }
  #skincare .skincare_wrap { margin-top: 6rem; padding: 2rem; display: block; }
  #skincare .skincare_wrap .img { width: 100%; }
  #skincare .skincare_wrap .txt_area { width: 100%; margin-top: 2rem; }
  #skincare .skincare_wrap .txt_area .skincare_txt { margin-top: 1rem; }

}



/*----------------------------
  animation
----------------------------*/