@charset "UTF-8";
@font-face {
  font-family: 'icomoon';
  src: url("fonts/icomoon.eot?dlnjoj");
  src: url("fonts/icomoon.eot?dlnjoj#iefix") format("embedded-opentype"), url("fonts/icomoon.ttf?dlnjoj") format("truetype"), url("fonts/icomoon.woff?dlnjoj") format("woff"), url("fonts/icomoon.svg?dlnjoj#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* @media screen and (max-width: 768px) {
  .h2 {
    margin-top: 80px;
  }
} */

.series {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 768px) {
  .series {
    display: block;
  }
}

.series__txt {
  -ms-flex-preferred-size: 70%;
      flex-basis: 70%;
}

.series__txt a {
  text-decoration: none;
}

.series img {
  width: 380px;
}

@media screen and (max-width: 768px) {
  .series img {
    width: 100%;
  }
}

.howToUse, .howToUse--oneLine {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -40px 0 0;
}

@media screen and (max-width: 768px) {
  .howToUse, .howToUse--oneLine {
    display: block;
    margin: 0;
  }
}

.howToUse__item, .howToUse__item--col2 {
  position: relative;
  width: calc(25% - 41px);
  margin: 40px 40px 0 0;
  padding: 20px;
  border: 1px solid #5c5a5a;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .howToUse__item, .howToUse__item--col2 {
    width: 100%;
    margin: 20px 0 0;
  }
}

.howToUse__item--col2 {
  width: calc(50% - 41px);
}

@media screen and (max-width: 768px) {
  .howToUse__item--col2 {
    width: 100%;
  }
}

.howToUse__item:after, .howToUse__item--col2:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: -25px;
  width: 0;
  height: 0;
  border-bottom: 10px solid #e0e0e0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  -webkit-transform: rotate(90deg) translateY(-50%);
          transform: rotate(90deg) translateY(-50%);
}

@media screen and (max-width: 768px) {
  .howToUse__item:after, .howToUse__item--col2:after {
    top: auto;
    bottom: -16px;
    left: 50%;
    border-top: 10px solid #e0e0e0;
    border-bottom: none;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

.howToUse__item:last-child:after, .howToUse__item--col2:last-child:after {
  display: none;
}

.howToUse .howToUse__num, .howToUse--oneLine .howToUse__num {
  line-height: 1;
  margin: 0;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .howToUse .howToUse__num, .howToUse--oneLine .howToUse__num {
    float: left;
    display: inline-block;
  }
}

.howToUse .howToUse__num span, .howToUse--oneLine .howToUse__num span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: #5c5a5a;
  border-radius: 90%;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .howToUse .howToUse__num + p, .howToUse--oneLine .howToUse__num + p {
    margin: -6px 0 0 50px;
  }
}

.howToUse .howToUse__enclosure, .howToUse--oneLine .howToUse__enclosure {
  margin-bottom: 0;
  padding: 10px;
  border: 1px solid #e0e0e0;
  font-size: 12px;
}

.howToUse--oneLine {
  margin-right: -40px;
}

@media screen and (max-width: 768px) {
  .howToUse--oneLine {
    margin-right: 0;
  }
}

.skincareStep {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -20px;
}

.skincareStep__item {
  position: relative;
  width: 33.33%;
}

.skincareStep__item p {
  margin: 0 20px;
  padding: 20px 10px;
  border: 1px solid #e0e0e0;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.skincareStep__item p span {
  display: inline-block;
  margin-right: 20px;
  font-size: 12px;
}

@media screen and (max-width: 768px) {
  .skincareStep__item p span {
    display: block;
    margin: 0;
  }
}

.skincareStep__item.is-active p {
  border: 2px solid #5c5a5a;
}

.skincareStep__item:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: -5px;
  width: 0;
  height: 0;
  margin-top: -3px;
  border-bottom: 10px solid #e0e0e0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  -webkit-transform: rotate(90deg) translateY(-50%);
          transform: rotate(90deg) translateY(-50%);
}

.skincareStep__item:last-child:after {
  display: none;
}

.skincareStep__item a {
  text-decoration: none;
  -webkit-transition: opacity .4s ease;
  transition: opacity .4s ease;
  margin: -20px -10px;
  padding: 20px 10px;
  display: block;
}

.skincareStep__item a:hover {
  opacity: 0.65;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .skincareStep__item a:hover {
    opacity: 1;
  }
}

.skincareStep__item a:hover span {
  text-decoration: none;
}

.skincareStep__item a span {
  text-decoration: none;
}

.seriesList {
  margin: 60px 0 40px;
}

.seriesList__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 -10px;
}

@media screen and (max-width: 768px) {
  .seriesList__row {
    display: block;
  }
}

.seriesList__col {
  margin: 0 10px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 20%;
}

@media screen and (max-width: 768px) {
  .seriesList__col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 20px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: calc(100% - 20px);
  }
}

.seriesList__img {
  margin-bottom: 10px;
}

.seriesList__img img {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .seriesList__img {
    margin-right: 2%;
    width: 48%;
  }
}

@media screen and (max-width: 768px) {
  .seriesList__content {
    width: 50%;
  }
}

.seriesList__title {
  font-size: 14px;
}

.seriesList__title a {
  text-decoration: none;
}

.seriesList p {
  font-size: 12px;
  margin: 10px 0;
}

.seriesList__comment {
  clear: both;
  font-size: 10px !important;
}

.simpleStep {
  text-align: center;
}

.simpleStep h3 {
  font-size: 20px;
  margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .simpleStep h3 {
    font-size: 14px;
    margin-right: -10px;
    margin-left: -10px;
    letter-spacing: -0.025em;
  }
}

.simpleStep h3 br {
  display: none;
}

@media screen and (max-width: 374px) {
  .simpleStep h3 {
    letter-spacing: normal;
  }
  .simpleStep h3 br {
    display: inherit;
  }
}

.simpleStep__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.simpleStep__col {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #9ba29d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 10px;
  height: 190px;
  width: 190px;
}

@media screen and (max-width: 768px) {
  .simpleStep__col {
    margin: 0 6px;
    height: auto;
    position: relative;
  }
}

@media screen and (max-width: 768px) {
  .simpleStep__txt {
    text-align: left;
  }
}

.simpleStep__procedure {
  text-align: center;
  margin: 0 auto;
}

.simpleStep ul li {
  display: inline-block;
  margin: 0 20px;
}

@media screen and (max-width: 768px) {
  .simpleStep ul li {
    margin: 0 10px;
  }
}

ul.skincareBnr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 -20px -10px;
}

@media screen and (max-width: 768px) {
  ul.skincareBnr {
    margin: 0 auto;
    display: inline-block;
    width: 100%;
  }
}

ul.skincareBnr li {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
  padding: 0 20px;
}

@media screen and (max-width: 768px) {
  ul.skincareBnr li {
    padding: 0;
    margin-bottom: 20px;
    max-width: 100%;
    width: 100%;
  }
}

ul.skincareBnr li a {
  display: inline-block;
  position: relative;
  border: 1px solid #e0e0e0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 30px;
  height: 118px;
  text-decoration: none;
  width: 100%;
}

@media screen and (max-width: 768px) {
  ul.skincareBnr li a {
    font-size: 12px;
    height: 90px;
    padding: 20px 10px;
  }
}

ul.skincareBnr li:first-child a {
  background: url(/contents/common/images/mid/img-bnr-01.jpg) no-repeat right center;
}

@media screen and (max-width: 768px) {
  ul.skincareBnr li:first-child a {
    background-image: url(/contents/common/images/mid/img-bnr-01-sp.jpg);
    background-size: cover;
  }
}

ul.skincareBnr li:last-child a {
  background: url(/contents/common/images/mid/img-bnr-02.jpg) no-repeat right center;
}

@media screen and (max-width: 768px) {
  ul.skincareBnr li:last-child a {
    background-image: url(/contents/common/images/mid/img-bnr-02-sp.jpg);
    background-size: cover;
  }
}

ul.skincareBnr li span {
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  ul.skincareBnr li span {
    font-size: 14px;
  }
}

.slideMenuList__txt {
  position: relative;
  padding-left: 20px;
}

.slideMenuList__txt:before {
  position: absolute;
  content: "Q. ";
  top: 0;
  left: 0;
}

.slideMenuList__inner {
  position: relative;
  padding-left: 30px;
}

.slideMenuList__inner:before {
  position: absolute;
  content: "A.";
  top: 20px;
  left: 10px;
}

@media screen and (max-width: 768px) {
  .slideMenuList__inner {
    padding-left: 40px;
  }
  .slideMenuList__inner:before {
    position: absolute;
    content: "A.";
    top: 10px;
    left: 20px;
  }
}

.tabLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.tabLink li {
  margin: 0 15px;
}

@media screen and (max-width: 768px) {
  .tabLink li {
    margin: 0 5px;
  }
}

.tabLink li a {
  display: table-cell;
  vertical-align: middle;
  width: 320px;
  height: 64px;
  padding: 0 20px;
  margin-right: 5px;
  background: #fff;
  border: 1px solid #5c5a5a;
  color: #231815;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: border .4s ease;
  transition: border .4s ease;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .tabLink li a {
    border: 1px solid #e5e3e5;
    padding: 0;
    position: relative;
    text-align: center;
    height: 110px;
  }
  .tabLink li a:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -16px;
    width: 0;
    height: 0;
    border-bottom: 10px solid #e0e0e0;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    -webkit-transform: rotate(180deg) translateX(-50%);
            transform: rotate(180deg) translateX(-50%);
  }
}

.tabLink li a span {
  display: inline-block;
  padding-right: 0;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .tabLink li a .link--bottom {
    background: none;
  }
}

.enclosure {
  text-align: center;
  background: #fafafa;
}

.productList__use {
  background: #fafafa;
  text-align: center;
  width: 100%;
}

.productList__use img {
  max-width: 320px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .productList__use img {
    max-width: none;
  }
}

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

.productList__comments {
  font-size: 10px;
}

.productList__tag {
  border: 1px solid #5c5a5a;
  padding: 2px 4px;
  margin-left: 6px;
  line-height: 1;
  font-size: 12px;
  display: inline-block;
}

.faceWash__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -20px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 768px) {
  .faceWash__row {
    display: block;
  }
}

.faceWash__col {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
  padding: 0 20px;
}

@media screen and (max-width: 768px) {
  .faceWash__col {
    max-width: none;
  }
}

.faceWash__col h3 {
  font-weight: bold;
  font-size: 18px;
}

.faceWash__movie {
  text-align: center;
  margin: 0 0 80px;
}

.faceWash__list li {
  border: 1px solid #5c5a5a;
  padding: 18px 46px;
  margin-bottom: 30px;
  position: relative;
}

.faceWash__list li:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 0;
  height: 0;
  border-bottom: 10px solid #5c5a5a;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  margin-left: -10px;
  -webkit-transform: rotate(180deg) translateX(-50%);
          transform: rotate(180deg) translateX(-50%);
}

.faceWash__list li:first-child {
  background: url(/contents/common/images/mid/img-number-01.png) no-repeat 14px center;
  background-size: 14px 19px;
}

@media screen and (max-width: 768px) {
  .faceWash__list li:first-child {
    background-position-y: 22px;
  }
}

.faceWash__list li:nth-child(2) {
  background: url(/contents/common/images/mid/img-number-02.png) no-repeat 16px center;
  background-size: 14px 19px;
}

@media screen and (max-width: 768px) {
  .faceWash__list li:nth-child(2) {
    background-position-y: 22px;
  }
}

.faceWash__list li:nth-child(3) {
  background: url(/contents/common/images/mid/img-number-03.png) no-repeat 16px center;
  background-size: 14px 19px;
}

@media screen and (max-width: 768px) {
  .faceWash__list li:nth-child(3) {
    background-position-y: 22px;
  }
}

.faceWash__list li:nth-child(4) {
  background: url(/contents/common/images/mid/img-number-04.png) no-repeat 16px center;
  background-size: 14px 19px;
}

@media screen and (max-width: 768px) {
  .faceWash__list li:nth-child(4) {
    background-position-y: 22px;
  }
}

.faceWash__list li:nth-child(4):after {
  content: none;
}

.productList--col3 .productList__orderWrap {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .productList--col3 .productList__orderWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media screen and (max-width: 768px) {
  .productList--col3 .productList__cartBtn {
    margin-top: 0;
    margin-left: 10px;
  }
}

.faceFaq {
  margin-bottom: 80px;
}

.tagWrap {
  margin-top: 10px;
  margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
  .tagWrap {
    padding-bottom: 16px;
  }
}

.tagWrap .tag {
  font-weight: normal;
}

#section2 .enclosure img {
  height: auto;
  max-width: 1120px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  #section2 .enclosure img {
    max-width: none;
  }
}

.js-arrangeHeightTarget {
  padding-bottom: 10px;
}

/*
* 動画部分
*/
.movie-contents__container {
  text-align: center;
  margin-top: 37px;
}

.movie-contents__container .movie-contents__modal {
  visibility: hidden;
  opacity: 0;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(230, 230, 229, 0.82);
  -webkit-transition: .4s ease-out;
  transition: .4s ease-out;
  -webkit-transition-property: visibility, opacity;
  transition-property: visibility, opacity;
  cursor: pointer;
}

.movie-contents__container .movie-contents__modal .movie-contents__modalInner {
  position: relative;
  width: 100%;
  max-width: 920px;
}

.movie-contents__container .movie-contents__modal .movie-contents__modalInner .movie-contents__movieWrap {
  position: relative;
  margin: 0 0 26px;
  padding: calc(315 / 560 * 100%) 0 0;
}

.movie-contents__container .movie-contents__modal .movie-contents__modalInner:before, .movie-contents__container .movie-contents__modal .movie-contents__modalInner:after {
  content: "";
  position: absolute;
  top: -70px;
  right: -14px;
  width: 100px;
  height: 2px;
  background-color: #808080;
  pointer-events: none;
}

.movie-contents__container .movie-contents__modal .movie-contents__modalInner:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.movie-contents__container .movie-contents__modal .movie-contents__modalInner:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.movie-contents__container .movie-contents__modal .movie-contents__modalInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
  border: 0;
}

.movie-contents__container .movie-contents__modal.is-show {
  visibility: visible;
  opacity: 1;
  z-index: 2000;
}

.movie-contents__container .movie-contents__modal .movie-contents__modalInner--sp {
  margin: 10%;
}

.movie-contents__container .movie-contents__modal .movie-contents__modalInner--sp .movie-contents__movieWrap {
  padding: 0;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.5%;
  margin: 0 auto;
}

.personal-color #appColorMovie-sp {
  width: 100%;
  margin: auto;
  bottom: 0;
  right: 0;
}

@media screen and (max-width: 768px) {
  .movie-contents__container .movie-contents__modal .movie-contents__modalInner:before, .movie-contents__container .movie-contents__modal .movie-contents__modalInner:after {
    top: -35px;
    right: 0px;
    width: 50px;
    height: 1px;
  }
}

.series__tag {
  border: 1px solid #5c5a5a;
  padding: 2px 4px;
  margin-left: 6px;
  line-height: 1;
  font-size: 12px;
  display: inline-block;
}

.margin_b_Small {
  margin-bottom: 20px;
}

.nayami_icon td {
  padding: 5px;
}

.nayami_icon span {
  line-height: 1.2;
  padding: 3px 2px 4px;
  background: #fff;
  font-size: 11px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #b2b2b2;
  margin: 2px 0px;
  display: inline-flex;
}

.nayami_icon span {
  line-height: 1.2;
  padding: 3px 2px 4px;
  background: #fff;
  font-size: 11px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #b2b2b2;
  margin: 2px 0px;
  display: inline-flex;
}

.mid_125 .nayami_icon span,
.mid_128 .nayami_icon span {
  border: none;
  background-color: #efefef;
  display: block;
}