@charset "UTF-8";
/* =====
 * /index レイアウト
============================================================================= */
/* -----
 * KeyVisual
----------------------------------------------------------------------------- */
#KeyVisual .cover {
  width: 100%;
  height: 676px;
  overflow: hidden;
  background: url(../images/index/key-visual.jpg) 50% 50% no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
}

#KeyVisual .cover img {
  visibility: hidden;
}

/* -----
 * ConceptCont
----------------------------------------------------------------------------- */
#ConceptCont {
  text-align: center;
  padding: 115px 0 150px;
}

#ConceptCont .inner-box {
  background: url(../images/common/icon-rabit.png) 50% 0 no-repeat;
  -webkit-background-size: 23px 36px;
          background-size: 23px 36px;
  padding-top: 63px;
}

#ConceptCont .inner-box .copy {
  width: 255px;
  margin: 0 auto;
}

#ConceptCont .inner-box h2 {
  width: 351px;
  margin: 0 auto 20px;
}

#ConceptCont .inner-box .notes {
  font-size: 10px;
  line-height: 1.5em;
  margin: 10px 0 30px;
}

/* -----
 * LineupCont
----------------------------------------------------------------------------- */
#LineupCont {
  border-top: #f4f4f6 3px solid;
}

#LineupCont .content {
  width: 100%;
}

#LineupCont .content .pict-box,
#LineupCont .content .txt-box {
  width: 50%;
  height: 469px;
  overflow: hidden;
}

#LineupCont .content .pict-box img {
  width: 100%;
  visibility: hidden;
}

#LineupCont .content .txt-box {
  display: table;
  text-align: center;
}

#LineupCont .content .txt-box .box-inner {
  display: table-cell;
  vertical-align: middle;
  min-width: 230px;
}

#LineupCont .content .txt-box .box-inner .mark,
#LineupCont .content .txt-box .box-inner .title,
#LineupCont .content .txt-box .box-inner .copy {
  margin: 0 auto 30px;
  width: auto;
}

#LineupCont .content .txt-box .box-inner .mark {
  max-width: 92px;
  margin-bottom: 20px;
}

#LineupCont .content.wash-cont .pict-box {
  float: right;
  background: url(../images/index/lineup-washing-pht01.png) 50% 50% no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
}

#LineupCont .content.wash-cont .txt-box .title {
  width: 205px;
}

#LineupCont .content.wash-cont .txt-box .copy {
  width: 264px;
}

#LineupCont .content.cleansing-cont .pict-box {
  float: left;
  background: url(../images/index/lineup-cleansing-pht01.png) 50% 50% no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
}

#LineupCont .content.cleansing-cont .txt-box .title {
  width: 221px;
}

#LineupCont .content.cleansing-cont .txt-box .copy {
  width: 215px;
}

/* -----
 * responsive
----------------------------------------------------------------------------- */
@media screen and (min-width: 944px) {
  /* PC */
}

@media screen and (min-width: 768px) and (max-width: 943px) {
  /* tablet */
}

@media screen and (max-width: 767px) {
  /* smart phone */
  /* -----
   * KeyVisual
  ----------------------------------------------------------------------------- */
  #KeyVisual .cover {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 117.3%;
    background: url(../images/index/key-visual-sp.jpg) 50% 0 no-repeat;
    -webkit-background-size: cover;
            background-size: cover;
  }
  #KeyVisual .cover img {
    display: none;
  }
  /* -----
   * ConceptCont
  ----------------------------------------------------------------------------- */
  #ConceptCont {
    padding: 82px 0 85px;
  }
  #ConceptCont .inner-box {
    -webkit-background-size: 19px 29px;
            background-size: 19px 29px;
    padding-top: 50px;
  }
  #ConceptCont .inner-box .copy {
    width: auto;
    max-width: 203px;
  }
  #ConceptCont .inner-box h2 {
    width: auto;
    max-width: 280px;
  }
  #ConceptCont .inner-box .notes {
    width: 280px;
    text-align: justify;
    margin: 10px auto 30px;
  }
  /* -----
   * LineupCont
  ----------------------------------------------------------------------------- */
  #LineupCont {
    border-top: #f4f4f6 2px solid;
  }
  #LineupCont .content .pict-box,
  #LineupCont .content .txt-box {
    width: auto;
    height: auto !important;
  }
  #LineupCont .content .pict-box {
    float: none !important;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 70.9%;
    overflow: hidden;
  }
  #LineupCont .content .pict-box img {
    display: none;
  }
  #LineupCont .content .txt-box {
    display: block;
    padding: 37px 0 47px;
  }
  #LineupCont .content .txt-box .box-inner {
    display: inline-block;
    margin: 0 auto;
  }
  #LineupCont .content .txt-box .box-inner .mark,
  #LineupCont .content .txt-box .box-inner .title,
  #LineupCont .content .txt-box .box-inner .copy {
    margin-bottom: 25px;
  }
  #LineupCont .content.wash-cont .pict-box {
    background-image: url(../images/index/lineup-washing-pht01-sp.png);
    -webkit-background-size: 100% 100%;
            background-size: 100%;
  }
  #LineupCont .content.wash-cont .txt-box .title {
    width: auto;
    max-width: 162px;
  }
  #LineupCont .content.wash-cont .txt-box .copy {
    width: auto;
    max-width: 231px;
  }
  #LineupCont .content.cleansing-cont .pict-box {
    background-image: url(../images/index/lineup-cleansing-pht01-sp.png);
    -webkit-background-size: 100% 100%;
            background-size: 100%;
  }
  #LineupCont .content.cleansing-cont .txt-box .title {
    width: auto;
    max-width: 174px;
  }
  #LineupCont .content.cleansing-cont .txt-box .copy {
    width: auto;
    max-width: 187px;
  }
}