@charset "UTF-8";

.concept section { padding: 80px 0 40px; }
.concept__title { margin-bottom: 30px; text-align: center; }
.concept__title .title{margin-bottom: 30px;}
.concept__title li {
  margin: 0 3rem;
  position: relative;
  letter-spacing: .2rem;
  text-align: center;
}
.concept__title li a::after {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  left: calc(50% - 5px);
  bottom: -8px;
  display: block;
  border-left: 1px solid var(--color-third);
  border-bottom: 1px solid var(--color-third);
  transform: rotate(-45deg);
  transition: .2s;
}
.concept__title li:nth-child(1) { transition: 1.2s; transition-delay: .2s; }
.concept__title li:nth-child(2) { transition: 1.2s; transition-delay: .4s; }
.concept__title li:nth-child(3) { transition: 1.2s; transition-delay: .6s; }
.concept__title li:nth-child(4) { transition: 1.2s; transition-delay: .8s; }

.concept__lead h2 { margin-bottom: 20px; font-size: 1.8rem; line-height: 3.2rem; }
.concept__lead h3 { margin-bottom: 15px; font-size: 1.6rem; line-height: 3rem; }
.concept__lead figure { width: 45%; }
.concept__lead-txt { width: 48%; }
.concept__lead-txt p { margin-bottom: 2rem; }
.concept__btn a { padding: 15px 0; display: block; line-height: 1.4rem; text-align: center; }

.concept__sec-title { margin-bottom: 60px; text-align: center; }
.concept__sec-title h3 { margin-bottom: 20px; font-size: 1.8rem; line-height: 3.4rem; }

@media screen and (min-width: 801px) {
  .concept__title li a:hover::after { bottom: -11px; }
}

@media screen and (max-width: 800px) {
  .concept section { padding: 50px 0; }
  .concept__title .title { padding: 120px 0; color: #fff; margin-bottom: 0;}
  .concept__title ul { display: block; }
  .concept__title li { border-bottom: 1px solid var(--color-secondary); }
  .concept__title li a { padding: 8px 0; display: block; }
  .concept__title li a::after { width: 6px; height: 6px; right: 5px; left: auto; bottom: 18px; }
  .concept__lead h2 { font-size: 1.6rem; line-height: 3rem; text-align: center; }
  .concept__lead figure, .concept__lead-txt { width: 100%; }
  .concept__lead figure { height: 200px; overflow: hidden; }
  .basemake.concept__lead .inner,
  .pointmake.concept__lead .inner { width: 100%; display: block; }
  .basemake .concept__lead-txt,
  .pointmake .concept__lead-txt { padding: 30px 5% 0; }
  .concept__sec-title { margin-bottom: 40px; }
  .concept__sec-title h3 { font-size: 1.6rem; line-height: 2.8rem; }
  .concept__sec-title p { text-align: left; }
}

/*----------*/

.step__head { text-align: center; }
.step__head h1 { margin-bottom: 30px; font-size: 1.6rem; letter-spacing: .2rem; line-height: 1.6rem; }
.step__head ul { border: 1px solid #707070; border-left: none; }
.step__head li {
  padding: 20px 20px 50px;
  position: relative;
  border-left: 1px solid #707070;
  transition: .3s;
}
.step__head li::after {
  content: '';
  width: 0;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: block;
  border-top: 10px solid #b9b9b9;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}
.step__head li h2 { margin-bottom: 15px; font-size: 1.6rem; letter-spacing: .2rem; line-height: 1.6rem; }
.step__head li figure { width: 90%; margin: 0 auto 15px; }
.step__head li dd p { font-size: 1.2rem; line-height: 2rem; }
.step__head-lead { margin-bottom: 40px; }
.step__head-label { margin-bottom: 10px; padding: 10px 0; background: #eee; line-height: 1.4rem; text-align: center; }
.step__head-links {margin-bottom: 50px;text-align: center;}
.step__head-links .btn { max-width: 500px; margin: 0 auto 30px; }
.step__head-links a { position: relative; display: block; }
.step__head-links a::after {
  content: '';
  position: absolute;
  top: calc(50% - 4px);
  display: inline-block;
  border-left: 6px solid #707070;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.step__head-links .btn a {
  padding: 15px 0;
  position: relative;
  display: block;
  background: #f6f7f7;
  border: 1px solid;
  line-height: 2rem;
}
.step__head-links .btn a span { font-size: 1rem; line-height: 1rem; }
.step__head-links .btn a::after { right: 15px; }
.step__head-links .link a { padding-left: 15px; display: inline-block; border-bottom: 1px solid; line-height: 2rem; }
.step__head-links .link a::after { left: 0; }

#special .step__toggle h3,
.gentling .step__toggle h3 {
  margin-bottom: 50px;
  padding-bottom: 10px;
  border-bottom: 1px solid;
  font-size: 1.8rem;
  letter-spacing: .2rem;
  line-height: 1.8rem;
}
.step__container { display: none; }
.movie-btn { order: 2; margin: 0 0 30px;text-align: center; }
.movie-btn a { display: inline-block; padding: 0 0 0 10px; position: relative; }
.movie-btn a::after { display: block; content: ""; position: absolute; top: 50%; left: 0; transform: translate(0,-50%); border-left: solid 5px; border-top: solid 4px transparent; border-bottom: solid 4px transparent; }
@media screen and (min-width: 768px) { .movie-btn {margin: 0 0 80px;}}

@media screen and (min-width: 801px) {
  .step__head li[data-tgt="balancing"]:hover,
  .step__head li[data-tgt="balancing"].is-open { background-color: #f3eae8; }
  .step__head li[data-tgt="aiming"]:hover,
  .step__head li[data-tgt="aiming"].is-open { background-color: #fff7f7; }
  .step__head li[data-tgt="special"]:hover,
  .step__head li[data-tgt="special"].is-open { background-color: #fffef5; }
  .step__head li[data-tgt="stem"]:hover,
  .step__head li[data-tgt="stem"].is-open { background-color: #e5e6dc; }
  .haircare .step__head li:nth-child(2):hover,
  .haircare .step__head li:nth-child(2).is-open { background-color: #f3f2f0; }
  .haircare .step__head li:nth-child(3):hover,
  .haircare .step__head li:nth-child(3).is-open { background-color: #efebea; }
  .bmakeup-step .step__head li:nth-child(1):hover,
  .bmakeup-step .step__head li:nth-child(1).is-open,
  .bmakeup-step .step__head li:nth-child(2):hover,
  .bmakeup-step .step__head li:nth-child(2).is-open,
  .bmakeup-step .step__head li:nth-child(3):hover,
  .bmakeup-step .step__head li:nth-child(3).is-open,
  .bmakeup-step .step__head li:nth-child(4):hover,
  .bmakeup-step .step__head li:nth-child(4).is-open,
  .bmakeup-step .step__head li:nth-child(5):hover,
  .bmakeup-step .step__head li:nth-child(5).is-open { background-color: #f9f7f1; }
  .bmakeup-step .step__head li:nth-child(6):hover,
  .bmakeup-step .step__head li:nth-child(6).is-open { background-color: #f9f7f1; }
  .gentling .step__head li:hover { background-color: #f9f7f1; }
  .gentling .step__head li.is-open { background-color: transparent; }
  .step__head-links .link a:hover { border: none; }
  .step__list, .step-close { display: none; }
}

@media screen and (max-width: 800px) {
  .step__head { margin-bottom: 40px; }
  .step__head ul { display: none; }
  .step__head-lead { margin-bottom: 0; text-align: left; }
  .step__head-links { margin-bottom: 30px; }

  .step__toggle {
    width: 94%;
    margin: 0 auto;
    display: none;
    border-top: 1px solid #707070;
  }
  #special .step__toggle h3,
  .gentling .step__toggle h3 { display: none; }

  .step__list { position: relative; }
  .step__list::after {
    content: '';
    position: absolute;
    top: calc(50% - 6px);
    right: 5%;
    display: block;
    border-top: 8px solid #707070;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    transition: transform .4s;
  }
  .step__list dt { width: 28%; padding: 12px 30px; }
  .step__list dd { width: 62%; }
  .step__list h2 { margin-bottom: 8px; font-size: 1.6rem; letter-spacing: .2rem; line-height: 1.6rem; }
  .step__list p { font-size: 1.2rem; line-height: 2rem; }
  .is-open .step__list::after { transform: rotate(180deg); }
  .step__container { margin-bottom: 15px; display: block; border: 1px solid #707070; }

  .step-close { padding: 20px 0; font-size: 1.2rem; line-height: 1.2rem; text-align: center; }
  .step-close a { text-decoration: none !important; }
  .step-close span { padding-left: 15px; position: relative; }
  .step-close span::before,
  .step-close span::after {
    content: '';
    width: 8px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    background: #707070;
  }
  .step-close span::before { transform: rotate(45deg); }
  .step-close span::after  { transform: rotate(-45deg); }
}



/* ABOUT
--------------------------------------------------*/
.concept.about { margin-bottom: 40px; }
.about section { padding: 80px 0; }
.about .title { display: none; }
.about h2 { margin-bottom: 50px; font-size: 1.6rem; line-height: 3rem; text-align: center; }

.about .mv {
  margin-bottom: 50px;
  position: relative;
}

.about .iframewrap {
  margin-bottom: 50px;
  padding-top: 50%;
  position: relative;
  background: url(../../img/usr/about/mv.jpg) center/cover no-repeat;
  z-index: 1;
}
.about iframe {
  width: calc(100% + 2px) !important;
  height: calc(100% + 2px) !important;
  position: absolute;
  top: -1px;
  left: -1px;
}

@media screen and (max-width: 800px) {
  .about section { padding: 50px 0; }
  .about h2 { margin-bottom: 30px; font-size: 1.4rem; line-height: 2.4rem; }
  .about__mv { width: 100%; }
  .about .iframewrap { margin-bottom: 30px; }
  .about iframe { width: 100% !important; height: 100% !important; top: 0; left: 0; }
}

/*----------*/

.about__lead { text-align: center;}
.about__lead h2 { margin-bottom: 3rem; }
.about__lead__second { text-align: center; margin-top: -80px; }
.about__lead__second h2 { margin-bottom: 3rem; }
.about__lead__second .inner  {border-top: 1px solid #CCCCCC;padding: 80px 0 0 0;}
.about__concept { padding: 100px 0 !important; background: #ededed; } 
.about__concept .inner { width: 720px; }
.about__concept dl { margin-bottom: 70px; }
.about__concept dl:last-child { margin-bottom: 0; }
.about__concept dt { width: 35%; font-size: 2.4rem; line-height: 2.4rem; }
.about__concept dd { width: 65%; }

.about__message { text-align: center; }
.about__message h3 { margin-bottom: 50px; font-size: 1.8rem; line-height: 1.8rem; }

.about__products { text-align: center; }
.about__products ul {margin-top: 40px; margin-bottom: 60px; }
.about__products li { text-align: center; }
.about__products li .pc { display: block;}
.about__products li .sp { display: none;}
.about__products li:nth-child(1) { width: 48%; transition: 1.2s; transition-delay: .2s; }
.about__products li:nth-child(2) { width: 48%; transition: 1.2s; transition-delay: .4s; }
/*--.about__products li { width: 30%; text-align: center; }
.about__products li:nth-child(1) { transition: 1.2s; transition-delay: .2s; }
.about__products li:nth-child(2) { transition: 1.2s; transition-delay: .4s; }
.about__products li:nth-child(3) { transition: 1.2s; transition-delay: .3s; }--*/
.about__products dd { padding-top: 20px; }
.about__products dd h3 { margin-bottom: 20px; font-size: 1.8rem; line-height: 1.8rem; }
.about__products dd p { margin-bottom: 20px; }
.about__products-more a {
  width: 240px;/*width: 80%;*/
  padding: 15px 0;
  position: relative;
  display: inline-block;
  border: 1px solid;
  line-height: 1.4rem;
}
.about__products-more a::after {
  content: '';
  position: absolute;
  top: calc(50% - 3px);
  right: 15px;
  display: inline-block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid;
  transition: .3s;
}
.about__catalog-btn { width: 30%; margin: 0 auto; }
.about__catalog-btn a {
  padding: 30px 0;
  display: block;
  background: #ededed;
  font-size: 1.8rem;
  line-height: 1.8rem;
  text-align: center;
}
.about__ecology-bnr { width: 850px; margin: 0 auto; position: relative; border: 1px solid #999; transition: .3s; }
.about__ecology-bnr h2 { margin-bottom: 15px; font-size: 1.8rem; line-height: 1.8rem; text-align: left; }
.about__ecology-bnr dt { width: 35%; line-height: 0; }
.about__ecology-bnr dd { width: 65%; padding: 0 10%; line-height: 2.4rem; }

.about__holi-bnr { width: 540px; margin: 20px auto; position: relative; border: 1px solid #999; transition: .3s; }
.about__holi-bnr h2 { margin-bottom: 15px; font-size: 1.6rem; line-height: 1.8rem; text-align: left; }
.about__holi-bnr dt { width: 35%; line-height: 0; }
.about__holi-bnr dd { width: 65%; padding: 0 6%; line-height: 2.4rem; }
.about__holi-bnr dd p{ text-align: left;font-size: 1.4rem;}

@media screen and (min-width: 801px) {
  .about__products-more a:hover { background-color: #f4f4f4; }
  .about__products-more a:hover::after { right: 12px; }
  .about__ecology-bnr:hover { opacity: .6; }
  .about__holi-bnr:hover { opacity: .6; }
}

@media screen and (max-width: 800px) {
  .about__lead__second { text-align: left;margin-top: -30px;}
  .about__lead p { text-align: left; }
  .about__concept { padding: 60px 0 !important; }
  .about__concept .inner { width: 90%; }
  .about__concept dl { margin-bottom: 50px; display: block; }
  .about__concept dt { width: 100%; font-size: 2rem; line-height: 2rem; text-align: center; }
  .about__concept dd { width: 100%; padding-top: 20px; }
  .about__message h3 { margin-bottom: 30px; font-size: 1.6rem; line-height: 1.6rem; }
  .about__products { /*padding: 0 !important;*/ text-align: left; }
  .about__products ul { margin-bottom: 30px; display: block; }
  .about__products li { width: 100%; margin-bottom: 15px; text-align: left; }
  .about__products li .pc { display: none;}
  .about__products li .sp { display: block;}
  .about__products dd { padding: 10% 5%; position: relative;}
  .about__products li:nth-child(1) .about__products-more { margin-top: 20px;}
  .about__products li:nth-child(1) { width: 100%;}
  /*.about__products li:nth-child(1) dd {
    padding-left: 45%;
    background: url(../../img/usr/about/products_01@sp.jpg) center/cover no-repeat;
  }*/
  .about__products li:nth-child(2) .about__products-more { margin-top: 20px;}
  .about__products li:nth-child(2) { width: 100%;}
  /*.about__products li:nth-child(2) dd {
	width: 100%; 
    background: url(../../img/usr/about/products_02@sp.jpg) center/cover no-repeat;
  }*/
  .about__products li:nth-child(3) dd {
    padding: 7% 0 7% 45%;
    background: url(../../img/usr/about/products_03@sp.jpg) center/cover no-repeat;
    color: #fff;
  }
  /*.about__products dt img { display: none; }*/
  .about__products dd p { margin-bottom: 0; font-size: 1.2rem; line-height: 2rem; }
  .about__products-txt { position: relative; }
  .about__products-more a {
    width: 100%;
    height: 100%;
    text-align: center;
  }
  /*.about__products-more a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border: none;
    font-size: 0;
    line-height: 0;
    z-index: 1;
  }*/
  .about__products dd h3 { margin-bottom: 10px; font-size: 1.4rem; line-height: 1.4rem; }
  .about__catalog-btn { width: 100%; }
  .about__catalog-btn a { padding: 20px 0; font-size: 1.4rem; line-height: 1.4rem; }
  .about__ecology { padding-bottom: 30px !important; }
  .about__ecology-bnr { width: 90%; border: none; }
  .about__ecology-bnr h2 { font-size: 1.6rem; line-height: 1.6rem; text-align: center; }
  .about__ecology-bnr dt { width: 0; }
  .about__ecology-bnr dt img { display: none; }
  .about__ecology-bnr dd {
    width: 100%;
    padding: 10%;
    background: url(../../img/usr/about/ecology@sp.jpg) center/cover no-repeat;
    font-size: 1.2rem;
    color: #fff;
    line-height: 2rem;
  }
  .about__holi-bnr { width: 90%; border: none; }
  .about__holi-bnr h2 { font-size: 1.6rem; line-height: 1.6rem; text-align: center; }
  .about__holi-bnr dt { width: 0; }
  .about__holi-bnr dt img { display: none; }
  .about__holi-bnr dd {
    width: 100%;
    padding: 10%;
    background: url(../../img/usr/about/holistic@sp.jpg) center/cover no-repeat;
    font-size: 1.2rem;
    color: #fff;
    line-height: 2rem;
  }
}



/* HOLSTIC CARE CONCEPT
--------------------------------------------------*/
.hc-concept .concept__btn a { background: #ededed; }
.hc-concept .concept__lead-txt.is-show p:nth-child(2) { transition-delay: .55s; }
.hc-concept .concept__lead-txt.is-show p:nth-child(3) { transition-delay: .7s; }
.hc-concept .concept__lead-txt.is-show p:nth-child(4) { transition-delay: .85s; }
.hc-concept .concept__lead-txt.is-show p:nth-child(5) { transition-delay: .9s; }
.hc-concept .concept__lead-txt.is-show p:nth-child(6) { transition-delay: 1.05s; }
.hc-concept .concept__lead-txt.is-show p:nth-child(7) { transition-delay: 1.2s; }

@media screen and (max-width: 800px) {
  .hc-concept .title { background: url(/cms/img/usr/holistic-care/mv.jpg) center/cover no-repeat; }
  .hc-concept .concept__lead figure { display: none; }
  .hc-concept .concept__btn a { font-size: 1.3rem; line-height: 1.3rem; }
}

/*----------*/

.hc-concept__lineup { position: relative; }
.hc-concept__lineup-item { width: 23%; margin-bottom: 6%; transition: 1.2s !important; transition-delay: .2s; }
.hc-concept__lineup-item h4 { margin-bottom: 30px; font-size: 1.6rem; line-height: 1.6rem; }
.hc-concept__lineup-item dd { padding: 20px 5% 0; text-align: center; }
.hc-concept__lineup .concept__btn { margin-bottom: 10px; }

@media screen and (max-width: 800px) {
  .hc-concept__lineup::before {
    content: '';
    width: 90%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 5%;
    background: #999;
  }
  .hc-concept__lineup-item { width: 48%; }
  .hc-concept__lineup-item h4 { margin-bottom: 15px; font-size: 1.3rem; line-height: 2.3rem; }
  .hc-concept__lineup-item dd { padding: 10px 2% 0; }
  .hc-concept__lineup-item .hc-concept__btn a { padding: 10px 0; }
  .hc-concept__lineup .concept__btn { margin-bottom: 5px; }
}

/*----------*/

.hc-concept__development { padding: 100px 0 60px !important; background: #ededed; }
.hc-concept__development li {
  width: 30%;
  margin: 0 1.5% 3%;
  padding: 30px;
  background: #fff;
  font-size: 1.2rem;
  line-height: 2.2rem;
}
.hc-concept__development h4 { margin-bottom: 10px; font-size: 1.4rem; line-height: 2.6rem; }

@media screen and (max-width: 800px) {
  .hc-concept__development { padding-top: 60px !important; }
  .hc-concept__development li { width: 100%; margin: 0 0 10px; padding: 6%; }
}

/*----------*/

.hc-concept__essential {
  /*padding: 0 !important;*/
  position: relative;
  background: url(/cms/img/usr/holistic-care/essential02.jpg) left center/45% auto no-repeat;
  background-position: left 200px;
}
/*.hc-concept__essential::after {
  content: '';
  width: 70%;
  height: 1px;
  position: absolute;
  left: 15%;
  bottom: 0;
  background: #999;
}*/
.hc-concept__essential .inner_box { width: 100%; max-width: 100%; /*padding: 45% 15% 10% 50%;*/ }
.hc-concept__essential-txt {padding: 10% 15% 10% 50%;}
.hc-concept__essential .concept__sec-title { /*margin-bottom: 20px; text-align: left;*/ }
.hc-concept__essential .concept__btn a { width: 300px; margin-top: 30px; display: inline-block; }

@media screen and (max-width: 1080px) {
  .hc-concept__essential .inner_box { padding: 8% 3% 8% 50%; }
  /*.hc-concept__essential::after { width: 94%; left: 3%; }*/
}

@media screen and (max-width: 800px) {
  .hc-concept__essential { padding: 50px 0 !important; background: none; }
  /*.hc-concept__essential::after { width: 90%; left: 5%; }*/
  .hc-concept__essential .inner_box { padding: 0; }
  .hc-concept__essential .concept__sec-title h3 {
    padding-bottom: 72%;
    background: url(/cms/img/usr/holistic-care/essential.jpg) center 5rem/contain no-repeat;
    text-align: center;
  }
  .hc-concept__essential .concept__sec-title p,
  .hc-concept__essential-txt { padding: 0 5%; }
  .hc-concept__essential .concept__btn a { width: 100%; display: block; }
}
/*----------*/

.hc-concept__inhouse {
  /*padding: 0 !important;*/
  position: relative;
  height: 60vw; 
  max-height: 600px;
  background: url(/cms/img/usr/holistic-care/garden_pc.jpg) no-repeat;
  background-size: 100% auto;
  background-position: left top;
  margin:0 0 200px;
}
.hc-concept__inhouse .concept__sec-title { color: #fff;}
.hc-concept__inhouse .inner_box { width: 100%; color: #fff; max-width: 100%; padding: 0 15% 5% 15%; }
.hc-concept__inhouse .concept__sec-title { /*margin-bottom: 20px; text-align: left;*/ }
.hc-concept__inhouse .concept__btn a { width: 300px; margin-top: 30px; display: inline-block; }
.hc-concept__inhouse li {
    width: 30%;
	text-align: center;
    margin: 0 1.5% 3%;
    background: #fff;
    font-size: 1.2rem;
    line-height: 2.2rem;
}
.hc-concept__inhouse li h4 {margin-bottom: 10px;font-size: 1.4rem;line-height: 2.6rem; margin: 0 0 2% 0;}
.hc-concept__inhouse li p.bt { width: 80%; margin:3% auto 0 auto; padding: 1.5%; border: 1px solid #A8A8A8;}
@media screen and (max-width: 1080px) {
  .hc-concept__inhouse {}
  .hc-concept__inhouse .inner_box { padding: 8% 3% 8% 50%; }
  .hc-concept__inhouse::after { width: 94%; left: 3%; }
}

@media screen and (max-width: 800px) {
.hc-concept__inhouse { height:auto !important; max-height:100% !important; position: relative;background: url(/cms/img/usr/holistic-care/garden_sp.jpg) no-repeat;background-size: 100% auto; background-position: left top;margin: 0;}
  .hc-concept__inhouse .inner { width: 100%;}
  .hc-concept__inhouse::after { width: 90%; left: 5%; }
  .hc-concept__inhouse .inner_box {margin:0;padding: 0 0 15% 0; }

  .hc-concept__inhouse .concept__sec-title p,
  .hc-concept__inhouse-txt { padding: 0 5%; }
  .hc-concept__inhouse .concept__btn a { width: 100%; display: block; }
  .hc-concept__inhouse li { width: 100%; margin: 0 0 10px; padding: 6%; }
}
/*----------*/
.hc-concept__process { position: relative; }
.hc-concept__process-item { width: 18%; margin-bottom: 6%; transition: 1.2s !important; transition-delay: .2s; }
.hc-concept__process .concept__btn { margin-bottom: 10px; }
.hc-concept__process-comment { justify-content: center;align-items: center; }
.hc-concept__process-comment div { width: 50%; font-size: 1.2rem;line-height: 2.3rem; transition: 1.2s !important; transition-delay: .2s; padding: 0 3% 0 3%; }
/*.hc-concept__process-comment div:first-child { border-right: 1px solid #000;}*/
.hc-concept__process-comment div dl { margin: 1% 0 1% 0;}
.hc-concept__process-comment div dl dt {width: 25%;display: inline-block; vertical-align: top;}
.hc-concept__process-comment div dl dd {width: 74%;display: inline-block; vertical-align: top; border-left: 1px solid #000; padding: 0 0 0 2%;}
.hc-concept__process-comment .d-pc { display: block;}
@media screen and (max-width: 800px) {
  .hc-concept__process::before {
    content: '';
    width: 90%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 5%;
    background: #999;
  }
.hc-concept__process-comment div { width:100%;padding: 0;}
.hc-concept__process-comment div dl dt {width: 100%;display:block; background-color: #e9e9e9; padding: 1%;}
.hc-concept__process-comment div dl dd {width: 100%;display:block; border-left:none; padding: 0%;}
.hc-concept__process-comment .d-pc { display: none;}
}

/*----------*/

.hc-concept__research { position: relative; background: #f4f4f4; }
.hc-concept__research-comment {text-align: center;font-size: 1.2rem; margin: -30px 0 60px;}
.hc-concept__research-box-title {text-align: center; line-height: 3;/*background-color: #D9D9D9;*/ margin: 0 0 10px;}
.hc-concept__research-box { padding: 20px; border: 1px solid #D9D9D9;background-color: #fff;}
.hc-concept__research-box .toptext { text-align: center; margin: 0 0 15px;}
.hc-concept__research-box-top {width: 50%; margin:0 auto 2%;align-items: center;}
.hc-concept__research-box-topleft {width: 45%; display: inline-block;}
.hc-concept__research-box-topright {width: 54%; display: inline-block; padding: 0 0 0 5%;}
.hc-concept__research-items {column-gap: 20px;}
.hc-concept__research-item { width: 32%; font-size: 1.2rem; transition: 1.2s !important; transition-delay: .2s;background-color: #F9F9F9; padding: 1% 2% 2% 2%; }
.research-item-subtitleleft {width: 28%;display: inline-block; border-right: 1px solid #C0C0C0; margin: 0 0 3% 0; padding: 0 4% 0 0;}
.research-item-subtitleright {width: 70%;display: inline-block; margin: 0 0 3% 0; padding: 0 0 0 4%;}
.hc-concept__research-box dl dt {width: 34%; padding: 0 2% 0 0;}
.hc-concept__research-box dl dd {width: 65%;}
.hc-concept__research-box-topright .research-item-tip {text-align: center; color: #fff; background-color: #939393; margin: 0 1% 6% 1%;
  padding: 4% 8% 4% 8%; display: inline-block;}
.hc-concept__research-box dl dt .research-item-tip {text-align: center; color: #fff; background-color: #939393; margin: 0 0 6% 0;padding: 8% 0 8% 0; }

.hc-concept__research-comment div { width: 50%; font-size: 1.2rem;line-height: 2.3rem; transition: 1.2s !important; transition-delay: .2s; padding: 0 3% 0 3%; }
/*.hc-concept__process-comment div:first-child { border-right: 1px solid #000;}*/
.hc-concept__research-comment div dl { margin: 1% 0 1% 0;}
.hc-concept__research-comment div dl dt {width: 25%;display: inline-block; vertical-align: top;}
.hc-concept__research-comment div dl dd {width: 74%;display: inline-block; vertical-align: top; border-left: 1px solid #000; padding: 0 0 0 2%;}

@media screen and (max-width: 800px) {
  .hc-concept__research::before {
    content: '';
    width: 90%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 5%;
    background: #999;
  }
.hc-concept__research-comment {text-align: left;margin: -30px 0 30px;}
.hc-concept__research-box-title {font-size: 1.3rem;}
.hc-concept__research-box { padding: 2%;}
.hc-concept__research-box-top {width:100%; margin:0 auto 2%;align-items: center;}
.hc-concept__research-box-topleft {width: 60%;}
.hc-concept__research-box-topright {width: 39%; padding: 0 0 0 5%;}
.hc-concept__research-items {column-gap:0;}
.hc-concept__research-item { width: 100%;padding: 2% 2% 2% 2%;margin: 0 0 2%;}
.hc-concept__process-research { width: 48%; }
.hc-concept__process-research dd { padding: 10px 2% 0; }
}

/*----------*/

.hc-concept__specialist .inner {
    width: 800px;
    padding: 3% 460px 3% 0;
    background: url(/cms/img/usr/holistic-care/specialist.jpg) right center/400px auto no-repeat;
}
.hc-concept__specialist .concept__sec-title { margin-bottom: 20px; text-align: left; }
.hc-concept__specialist .concept__btn a { width: 300px; margin-top: 30px; display: inline-block; }

@media screen and (max-width: 1080px) {
  .hc-concept__specialist .inner {
    width: 94%;
    padding-right: 50%;
    background-size: 45% auto;
  }
}

@media screen and (max-width: 800px) {
  .hc-concept__specialist  { padding-bottom: 20px !important; }
  .hc-concept__specialist .inner { padding: 0; background: none; }
  .hc-concept__specialist .concept__sec-title h3 {
    padding-bottom: 68%;
    background: url(/cms/img/usr/holistic-care/specialist.jpg) center 5rem/contain no-repeat;
    text-align: center;
  }
  .hc-concept__specialist .concept__btn a { width: 100%; display: block; }
}



/* SKINCARE STEP & HAIR CARE STEP
--------------------------------------------------*/
.hc-step { max-width: 980px; margin: 0 auto 50px; }
.hc-step section { padding: 50px 0 0 !important; }
#balancing.step__container,
#special.step__container,
#orderange.step__container { display: block; }

.hc-step__lead { margin-bottom: 50px; }
.hc-step__lead-bnr { margin-bottom: 30px; position: relative; }
.hc-step__lead-bnr picture {
  width: 100%;
  position: absolute;
  top: -26px;
  left: -20px;
  z-index: -1;
}
.hc-step__lead-bnr h3 { margin-bottom: 15px; font-size: 1.8rem; letter-spacing: .2rem; line-height: 1.8rem; }
.hc-step__lead-bnr h4 { margin-bottom: 20px; font-size: 1.6rem; line-height: 2.8rem; }
.hc-step__lead-bg { background: none; }
.hc-step__lead-bg p { margin-bottom: 20px; font-size: 1.3rem; line-height: 2.4rem; }
.hc-step__lead-bg p a { text-decoration: underline; }
.hc-step__lead-step h5 { margin-bottom: 20px; font-size: 1.2rem; line-height: 1.2rem; text-align: center; }
.hc-step__lead-step li {
  width: calc((100% - 96px) / 5);
  padding: 15px 0;
  position: relative;
  background: #f2f2f2;
  font-size: 1.3rem;
  line-height: 1.3rem;
  text-align: center;
}
.hc-step__lead-step li + li::before {
  content: '';
  width: 6px;
  height: 6px;
  position: absolute;
  left: -1.6rem;
  top: calc(50% - 3px);
  display: block;
  border-top: 1px solid var(--color-third);
  border-right: 1px solid var(--color-third);
  transform: rotate(45deg);
}

@media screen and (min-width: 801px) {
  .hc-step__lead-bg p a:hover { text-decoration: none; }
}

@media screen and (max-width: 800px) {
  .hc-step section { margin-bottom: 15px !important; padding-top: 0 !important; }
  .hc-step__lead { margin-bottom: 30px; }
  .hc-step__lead-bnr { margin-bottom: 30px; padding-top: 30px; text-align: center; }
  .hc-step__lead-bnr h4 { font-size: 1.4rem; line-height: 2.6rem; }
  .hc-step__lead-bnr picture { position: relative; top: auto; left: auto; }
  .hc-step__lead-bnr picture img { width: 60%; }
  .hc-step__lead-bg { margin-top: 20px; padding: 20px 20px 2px; background: #f8f8f8; text-align: left; }
  .hc-step__lead-step { display: none; }
}

@media screen and (max-width: 640px) {
  .hc-step__lead-bnr picture img { width: 100%; }
  .hc-step__lead-bg { margin-top: 0; }
}

/*----------*/

.hc-step__label { margin-bottom: 30px; padding: 20px; background: #f2f2f2; }
.hc-step__label h4 { margin-right: 2rem; font-size: 1.6rem; line-height: 1.4rem; }
.hc-step__label p { line-height: 1.4rem; }

.hc-step__items .tag {
  margin-bottom: 10px;
  padding: 6px 2rem;
  display: inline-block;
  border: 1px solid #707070;
  font-size: 1.2rem;
  line-height: 1.2rem;
}
.hc-step__items-list {
  width: 40%;
  margin-bottom: 60px;
  position: relative; 
  transition: .3s;
}
.hc-step__items-list dt { padding: 0 50px; }
.hc-step__items-list dd { padding-top: 10px; text-align: center; }
.hc-step__items-list h5 { margin-bottom: 15px; line-height: 2.4rem; }
.hc-step__items-list .more { font-size: 1.1rem; line-height: 1.1rem; text-decoration: underline; }

#special .hc-step__items-list { width: 30%; }
#special .hc-step__items-list { margin-right: 5%; }
#special .hc-step__items-list:nth-child(3n) { margin-right: 0; }
#special .hc-step__items-list dt { padding: 0 10px; }

@media screen and (min-width: 801px) {
  .hc-step__items-list:hover { opacity: .6; }
}

@media screen and (max-width: 800px) {
  .hc-step__label { margin-bottom: 20px; padding: 20px 15px 15px; display: block; text-align: center; }
  .hc-step__label h4 { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.5rem; }
  .hc-step__label p { font-size: 1.2rem; line-height: 2rem; }

  .hc-step__items .d-flex { display: block; }
  .hc-step__items-list { width: 50%; margin: 0 auto 40px !important; }
  #special .hc-step__contents { padding-top: 30px; }
  #special .hc-step__items-list { width: 100%; margin: 0 0 60px; }
  #special .hc-step__items-list dt { padding: 0 60px; }
}

@media screen and (max-width: 640px) {
  .hc-step__items-list { width: 90%; }
}



/* MAKEUP CONCEPT
--------------------------------------------------*/
.makeup { margin-bottom: 40px; }
.makeup .concept__lead ul { margin-top: 40px; }
.makeup .concept__lead .concept__btn { margin-bottom: 10px; }
.makeup .concept__btn a { width: 300px; background: var(--color-primary); color: #fff; }
.pointmake { padding-bottom: 100px !important; }

.basemake .concept__lead-txt.is-show p:nth-child(1),
.pointmake .concept__lead-txt.is-show p:nth-child(1) { transition-delay: .5s; }
.basemake .concept__lead-txt.is-show p:nth-child(2),
.pointmake .concept__lead-txt.is-show p:nth-child(2) { transition-delay: .65s; }
.basemake .concept__lead-txt.is-show p:nth-child(3),
.pointmake .concept__lead-txt.is-show p:nth-child(3) { transition-delay: .8s; }
.basemake .concept__lead-txt.is-show p:nth-child(4),
.pointmake .concept__lead-txt.is-show p:nth-child(4) { transition-delay: .95s; }
.basemake .concept__lead-txt.is-show p:nth-child(5),
.pointmake .concept__lead-txt.is-show p:nth-child(5) { transition-delay: 1.1s; }
.basemake .concept__lead-txt.is-show p:nth-child(6),
.pointmake .concept__lead-txt.is-show p:nth-child(6) { transition-delay: 1.25s; }
.basemake .concept__lead-txt.is-show p:nth-child(7),
.pointmake .concept__lead-txt.is-show p:nth-child(7) { transition-delay: 1.4s; }
.basemake .concept__lead-txt.is-show p:nth-child(8),
.pointmake .concept__lead-txt.is-show p:nth-child(8) { transition-delay: 1.55s; }

@media screen and (max-width: 800px) {
  .makeup { margin-bottom: 20px; }
  .makeup .title { background: url(/cms/img/usr/makeup/mv.jpg) center/cover no-repeat; }
  .makeup .concept__btn a { width: 100%; display: block; }
  .basemake { padding-bottom: 0 !important; }
  .pointmake { padding-bottom: 50px !important; }
}

/*----------*/

.makeup__director { padding-bottom: 80px !important; background: #ededed; }
.makeup__director .inner {
  width: 800px;
  padding: 100px 0 100px 360px;
  background: url(/cms/img/usr/makeup/rieomoto.jpg) left center/300px auto no-repeat;
}
.makeup__director .concept__sec-title { margin-bottom: 20px; text-align: left; }
.makeup__director-position { margin-bottom: 5px; font-size: 1.2rem; letter-spacing: .2rem; line-height: 1.2rem; }
.makeup__director .concept__btn { margin-top: 40px; }

@media screen and (max-width: 1080px) {
  .makeup__director .inner { width: 94%; padding: 80px 0 80px 360px; }
  .makeup__director .d-pc { display: none; }
}

@media screen and (max-width: 800px) {
  .makeup__director { padding: 60px 0 !important; }
  .makeup__director .inner { width: 90%; padding: 0; background: none; }
  .makeup__director .concept__sec-title {
    padding-bottom: 80%;
    background: url(/cms/img/usr/makeup/rieomoto.jpg) center 7rem/70% auto no-repeat;
    text-align: center;
  }
  .makeup__director .concept__sec-title p { text-align: center; }
}

/*----------*/

.makeup__artist .inner {
  width: 800px;
  padding: 3% 460px 3% 0;
  background: url(/cms/img/usr/makeup/artist.jpg) right center/400px auto no-repeat;
}
.makeup__artist .concept__sec-title { margin-bottom: 20px; text-align: left; }
.makeup__artist .concept__btn { margin-top: 40px; }

@media screen and (max-width: 1080px) {
  .makeup__artist .inner { width: 94%; }
  .makeup__artist .d-pc { display: none; }
}

@media screen and (max-width: 800px) {
  .makeup__artist .inner { width: 90%; padding: 0; background: none; }
  .makeup__artist .concept__sec-title {
    padding-bottom: 63%;
    background: url(/cms/img/usr/makeup/artist.jpg) center 8rem/contain no-repeat !important;
    text-align: center;
  }
}



/* BASE MAKEUP STEP
--------------------------------------------------*/
#type1.step__container { display: block; }
.bmakeup-type-label { margin-bottom: 15px; padding: 10px 0; background: #eee; line-height: 1.4rem; text-align: center; }
.bmakeup-step .step__head { margin-bottom: 40px; }
.bmakeup-step .step__head li { width: 25%; padding: 20px 5px 40px; }
.bmakeup-step .step__head li h2 { margin-bottom: 5px; font-size: 1.2rem; letter-spacing: 0; line-height: 2.2rem; }

@media screen and (max-width: 800px) {
  .bmakeup-step { margin-bottom: 60px; }
  .bmakeup .step__list dl { display: block; }
  .bmakeup .step__list dt, .bmakeup .step__list dd { width: 100%; }
  .bmakeup .step__list dt { padding: 12px 20% 0; }
  .bmakeup .step__list dd { padding-bottom: 12px; text-align: center; }
  .bmakeup .step__list h2 { margin-bottom: 5px; font-size: 1.4rem; line-height: 1.4rem; }
}

/*----------*/

.bmakeup__contents { margin-bottom: 60px; }
.bmakeup__contents-label { margin-bottom: 1%; }
.bmakeup__contents-label li { padding: 15px 3%; background: #eee; line-height: 2.4rem; text-align: center; }
.bmakeup__contents-label li:first-child { width: 17%; }
.bmakeup__contents-label li:last-child { width: 82%; }

.bmakeup__contents dt { width: 17%; padding: 0 3%; position: relative; background: #eee; line-height: 2.2rem; text-align: center; }
.bmakeup__contents dd { width: 82%; padding: 0 3% 30px; position: relative; background: #f9f9f9; }
.bmakeup__contents.chart dt::after,
.bmakeup__contents.chart dd::after {
  content: '';
  width: 0;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -33px;
  display: block;
  border-top: 12px solid #b4b4b5;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}
.bmakeup__items:last-child { border-top: 1px solid #ccc; }
.bmakeup__items-list { width: 50%; padding: 30px 0; position: relative; text-align: center; }
.bmakeup__items-list figure { padding: 0 24%; }
.bmakeup__items-list h3 { margin-bottom: 6px; line-height: 2rem; }
.bmakeup__items-list p { margin-bottom: 8px; font-size: 1.2rem; line-height: 2rem; }
.bmakeup__items-btn a {
  padding: 12px 60px;
  display: inline-block;
  background: #595757;
  font-size: 1.4rem;
  color: #fff;
  line-height: 1.4rem;
  text-align: center;
}
.bmakeup__items-info { width: 50%; padding-top: 60px; }

.chart_wrap { width: 275px; position: absolute; top: 30px; right: 10%; }
.chart_wrap .svg_wrapper {
  width: 53.5%;
  position: absolute;
  top: 17.5%;
  left: 17%;
  transform: scale(0);
  transition: transform 1s;
}
.chart_wrap.is-show .svg_wrapper { transform: none; }

@media screen and (max-width: 800px) {
  .bmakeup__contents-label,
  .bmakeup__contents.chart dt::after { display: none; }
  .bmakeup__contents { margin-bottom: 0; padding: 30px 0 10px; }
  .bmakeup__contents dl,
  .bmakeup__items { display: block; }
  .bmakeup__contents dt { width: 100%; padding: 10px 3%; }
  .bmakeup__contents dd { width: 100%; padding: 0 3%; background: none; }
  .bmakeup__items-list { width: 50%; margin: 0 auto; padding: 0; }
  .bmakeup__items-list figure { padding: 0 30px; }
  .bmakeup__items-info { width: 100%; padding: 10px 0 20px; font-size: 1.2rem; line-height: 2.2rem; }
  .chart_wrap { margin-bottom: 30px; position: relative; top: 20px; left: 30%; right: 0; }
}

@media screen and (max-width: 640px) {
  .bmakeup__items-list { width: 100%; }
  .chart_wrap { width: 82%; left: 14%; }
}



/* FOR MEN GENTLING
--------------------------------------------------*/
.gentling .step__head { width: 70%; margin: 0 auto 40px; }
.gentling .step__head li { width: 50%; /*padding: 20px 5px 40px;*/ }
.gentling .step__container { display: block !important; } 
.gentling .hc-step__items-list { width: 30%; }
.gentling .hc-step__items-list { margin-right: 5%; }
.gentling .hc-step__items-list:nth-child(3n) { margin-right: 0; }
.gentling .hc-step__items-list dt { padding: 0 10px; }

@media screen and (max-width: 800px) {
  .gentling .hc-step__contents { padding-top: 30px; }
  .gentling .hc-step__items-list { width: 100%; margin: 0 0 60px; }
  .gentling .hc-step__items-list dt { padding: 0 60px; }
}



/* RIE OMOTO
--------------------------------------------------*/
#rieomoto .inner { max-width: 960px; }
#rieomoto section { margin-bottom: 80px; }
#rieomoto figure { width: 40%; }
#rieomoto .container { width: 52%; }
.rieomoto__name { margin-bottom: 30px; }
.rieomoto__name h1 { font-size: 2.2rem; letter-spacing: .2rem; line-height: 2.2rem; }
.rieomoto__name-position { margin-bottom: 12px; font-size: 1.2rem; letter-spacing: .2rem; line-height: 1.2rem; }
.rieomoto-sign { padding: 50px 50px 0 0; text-align: right; }
.rieomoto-sign img { width: 25%; }

@media screen and (max-width: 800px) {
  #rieomoto section { margin-bottom: 50px; display: block; }
  #rieomoto figure, #rieomoto .container { width: 100%; }
  #rieomoto figure { margin-bottom: 30px; }
  .rieomoto__name h1 { font-size: 2rem; line-height: 2rem; }
  .rieomoto-sign { padding: 40px 10px 0 0; }
  .rieomoto-sign img { width: 30%; }
}

/*----------*/

#pageFooterNav { margin-bottom: 120px; }
#pageFooterNav .archiveTtl.ex { margin-bottom: 30px; font-size: 1.6rem; line-height: 1.6rem; }
#workshop_bnr { margin-bottom: 60px; display: flex; justify-content: space-between; }
.post.workshop_bnr_post { width: 23%; }
.post.workshop_bnr_post h2 { font-size: 1.2rem; line-height: 2.1rem; }
.post.workshop_bnr_post img { border: 1px solid #ccc; }

@media screen and (max-width: 800px) {
  #pageFooterNav { margin-bottom: 40px; }
  #pageFooterNav .archiveTtl.ex { padding-top: 30px; font-size: 1.4rem; line-height: 1.4rem; border-top: 1px solid #ccc; }
  #workshop_bnr { margin-bottom: 30px; flex-wrap: wrap; }
  .post.workshop_bnr_post { width: 48%; margin-bottom: 30px; }
  .post.workshop_bnr_post .ws_vol { font-size: 1.3rem; line-height: 1.3rem; }
}



/* OFFICIAL ARTISTS & SPECIALIST
--------------------------------------------------*/
#official .title { display: none; }
#official .inner { max-width: 960px; }
#official .container { margin-bottom: 40px; }

.official__profile { margin-bottom: 80px; }
.official__profile figure { width: 20%; }
.official__profile-info { width: 75%; }
.official__profile.dx figure { width: 40%; }
.official__profile.dx .official__profile-info { width: 55%; }
.official__profile-position { font-size: 1.2rem; line-height: 2rem; }
.official__profile-info h2 { margin: 10px 0 30px; font-size: 2.2rem; letter-spacing: .2rem; line-height: 4.4rem; }
.official__profile-info h2 em { display: block; font-size: 1.2rem; line-height: 1.2rem; }
.official__profile-link { margin-top: 30px; font-size: 1.2rem; line-height: 2rem; text-align: right; }
.official__profile-link a { padding-left: 12px; position: relative; display: inline-block; text-decoration: underline; }
.official__profile-link a::after {
  content: '';
  position: absolute;
  top: calc(50% - 4px);
  left: 0;
  display: block;
  border-top: 4px solid transparent;
  border-left: 6px solid var(--color-primary);
  border-bottom: 4px solid transparent;
}
.specialist .official__profile { width: 47%; }
.specialist .official__profile figure { width: 35%; }
.specialist .official__profile-info { width: 57%; }
.specialist .official__profile-commt { margin-top: 20px; }

@media screen and (min-width: 801px) {
  .official__profile-link a:hover { text-decoration: none; }
}

@media screen and (max-width: 800px) {
  .official__profile { margin-bottom: 60px; display: block; }
  .official__profile figure { width: 60% !important; margin: 0 auto 20px; }
  .official__profile-info { width: 100% !important; }
  .official__profile.dx figure { width: 100% !important; }
  .official__profile-position, .official__profile-info h2 { text-align: center; }
  .official__profile-info h2 { font-size: 1.8rem; line-height: 4rem; }
  .official__profile-link { text-align: left; }
  .official__profile-link a::after { top: 5px; }
  .specialist .official__profile { width: 100%; }
  .specialist, .specialist .official__profile .d-flex { display: block; }
}
.note {font-size:11px;color:#595757;}