@charset "UTF-8";

/* ==================================
shadefinder.css
================================== */
#diorBrandname a {
  display: block;
  background-color: #000000;
  text-align: center;
}

#diorBsShadefinder {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 150px;
  overflow: visible;
  color: #000;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  font-family: 'メイリオ', Meiryo, 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}
#diorBsShadefinder * {
  box-sizing: border-box;
  background-repeat: no-repeat;
}
#diorBsShadefinder *::before,
#diorBsShadefinder *::after {
  background-repeat: no-repeat;
}
#diorBsShadefinder a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s linear;
}
#diorBsShadefinder a:hover {
  opacity: 0.7;
  color: inherit;
  text-decoration: none;
}
#diorBsShadefinder a.anchor {
  position: absolute;
  margin-top: -20px;
  padding-top: 20px;
}
#diorBsShadefinder img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

#diorBsShadefinder .content {
  padding: 25px 0;
}
#diorBsShadefinder .content_inner {
  width: 1000px;
  margin: 0 auto;
  padding: 0 30px;
}

/* MV */
#diorBsShadefinder #mv {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  text-align: center;
}
#diorBsShadefinder #mv h2 {
  position: relative;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  text-align: center;
}
#diorBsShadefinder #mv h2 > span {
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 0;
  left: 0;
  z-index: 10;
  font-size: 0;
}
#diorBsShadefinder #mv h2 img {
  position: relative;
  z-index: 10;
}

/* ttl */
#diorBsShadefinder .ttl {
  margin-bottom: 10px;
}
#diorBsShadefinder .ttl h3 {
  font-size: 24px;
  line-height: 1.5;
  text-align: center;
}

/* lead */
#diorBsShadefinder .lead_text {
  font-size: 18px;
  text-align: center;
}


/*-------------------------
 intro
-------------------------*/
#diorBsShadefinder .intro .copy {
  margin-bottom: 25px;
}
#diorBsShadefinder .intro .copy p {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  text-align: center;
}

/*-------------------------
 flow
-------------------------*/
#diorBsShadefinder .flow .step + .step {
  margin-top: 50px;
}

/* step2 */
#diorBsShadefinder .flow .step2 .item_heading {
  padding: 10px 0;
}
#diorBsShadefinder .flow .step2 .item_heading p {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}
#diorBsShadefinder .flow .step2 .item_list {
  display: flex;
  justify-content: center;
}
#diorBsShadefinder .flow .step2 .item {
  align-items: center;
  width: calc(100% / 3);
}
#diorBsShadefinder .flow .step2 .item:nth-child(n+2) {
  margin-left: 10px;
}
#diorBsShadefinder .flow .step2 .item:nth-child(1) .item_heading {
  background-color: #f5c68e;
}
#diorBsShadefinder .flow .step2 .item:nth-child(2) .item_heading {
  background-color: #f0be99;
}
#diorBsShadefinder .flow .step2 .item:nth-child(3) .item_heading {
  background-color: #f4b498;
}
#diorBsShadefinder .flow .step2 .text_area {
  padding-top: 10px;
  text-align: center;
}
#diorBsShadefinder .flow .step2 .item .text_area .cap {
  margin-top: 30px;
  font-weight: 700;
}

/* step3 */
#diorBsShadefinder .flow .step3 .tone .sttl {
  margin-bottom: 20px;
}
#diorBsShadefinder .flow .step3 .tone .sttl p {
  font-weight: 700;
  font-size: 24px;
  text-align: center;
}
#diorBsShadefinder .flow .step3 .slide_area {
  width: 940px;
  margin: 0 auto;
}
#diorBsShadefinder .flow .step3 .tone + .tone {
  margin-top: 40px;
}
#diorBsShadefinder .flow .step3 .lead {
  margin-bottom: 20px;
}
#diorBsShadefinder .flow .step3 .slide_area ul.item_list {
  display: flex;
  justify-content: center;
  width: 940px;
  margin: 0 auto;
  padding-top: 0;
}
#diorBsShadefinder .flow .step3 .slide_area li.item {
  padding: 0 5px;
}
#diorBsShadefinder .flow .step3 .slide_area li.item > a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}
#diorBsShadefinder .flow .step3 .slide_area li.item .bg {
  margin-top: 10px;
  padding: 5px 0;
}
#diorBsShadefinder .flow .step3 .slide_area li.item .name {
  font-size: 16px;
  text-align: center;
}

/* slider */
#diorBsShadefinder .flow .step3 .slide_area .slick-dots {
  display: flex;
  bottom: 0;
  /*width: 940px;*/
  width: 100%;
  height: 5px;
  background-color: #e7e6e6;
}
#diorBsShadefinder .flow .step3 .slide_area .slick-dots li,
#diorBsShadefinder .flow .step3 .slide_area .slick-dots li button {
  width: 100%;
  height: 5px;
  margin: 0;
  background-color: #e7e6e6;
}
#diorBsShadefinder .flow .step3 .slide_area .slick-dots li.slick-active,
#diorBsShadefinder .flow .step3 .slide_area .slick-dots li.slick-active button {
  background-color: #dcae85;
}

/* step3 - tone01 */
#diorBsShadefinder .flow .step3 .tone01 .slide_area .item_0W .bg {
  background-color: #fadbc6;
}
#diorBsShadefinder .flow .step3 .tone01 .slide_area .item_1W .bg {
  background-color: #ffe7cd;
}
#diorBsShadefinder .flow .step3 .tone01 .slide_area .item_0N .bg {
  background-color: #ffedd9;
}
#diorBsShadefinder .flow .step3 .tone01 .slide_area .item_1N .bg {
  background-color: #ffe9d4;
}
#diorBsShadefinder .flow .step3 .tone01 .slide_area .item_0CR .bg {
  background-color: #fbf0e4;
}
#diorBsShadefinder .flow .step3 .tone01 .slide_area .item_1C .bg {
  background-color: #fde6d6;
}
#diorBsShadefinder .flow .step3 .tone01 .slide_area .item_1CR .bg {
  background-color: #ffe1cc;
}


/* step3 - tone02 */
#diorBsShadefinder .flow .step3 .tone02 .slide_area .item_15N .bg {
  background-color: #ffe1cc;
}
#diorBsShadefinder .flow .step3 .tone02 .slide_area .item_2N .bg {
  background-color: #fee0c8;
}
#diorBsShadefinder .flow .step3 .tone02 .slide_area .item_2CR .bg {
  background-color: #fedbc5;
}
#diorBsShadefinder .flow .step3 .tone02 .slide_area .item_2W .bg {
  background-color: #ffdebb;
}
#diorBsShadefinder .flow .step3 .tone02 .slide_area .item_2WO .bg {
  background-color: #f5ddb9;
}
#diorBsShadefinder .flow .step3 .tone02 .slide_area .item_25N .bg {
  background-color: #fed4ac;
}

/* step3 - tone03 */
#diorBsShadefinder .flow .step3 .tone03 .slide_area .item_3N .bg {
  background-color: #f8caaa;
}
#diorBsShadefinder .flow .step3 .tone03 .slide_area .item_3W .bg {
  background-color: #f6ca9d;
}
#diorBsShadefinder .flow .step3 .tone03 .slide_area .item_35N .bg {
  background-color: #ecbc94;
}
#diorBsShadefinder .flow .step3 .tone03 .slide_area .item_4N .bg {
  background-color: #e0a36c;
}
#diorBsShadefinder .flow .step3 .tone03 .slide_area .item_5N .bg {
  background-color: #c68863;
}

/* step3 - tone04 */
#diorBsShadefinder .flow .step3 .tone04 .slide_area ul.item_list {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
#diorBsShadefinder .flow .step3 .tone04 .slide_area ul.item_list .item {
  width: 235px;
}
#diorBsShadefinder .flow .step3 .tone04 .slide_area .item_6N .bg {
  background-color: #c48156;
}


/* btn-brand */
#diorBsShadefinder .btn-brand {
  width: 680px;
  height: 60px;
  margin: 35px auto 0;
}
#diorBsShadefinder .btn-brand a {
  display: block;
  width: 100%;
  height: 100%;
}
#diorBsShadefinder .btn-brand span {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 3px;
  padding-left: 15px;
  background-color: #000;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
}
#diorBsShadefinder .btn-brand span::after {
  display: inline-block;
  position: absolute;
  right: 15px;
  transform: rotate(45deg);;
  width: 8px;
  height: 8px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  content: '';
}