@charset "utf-8";



/* ジェネラル

------------------------------------------------------------------ */

img {

  width: auto;

  max-width: 100%;

}

.contents .group {

  max-width: 1400px;

  margin: 0 auto;

	background-color: #000;

  box-shadow: 0 0 20px rgba(155,155,155,.6);

}

/* メインビジュアル

------------------------------------------------------------------ */

.tp-Mainvisual {

  padding-bottom: 28px;

}

.tp-Mainvisual_Inner {

  background-color: #fde6e3;

}

.tp-Mainvisual_Slides_Item .for_sp_mini {

  display: none !important;

}

@media screen and (max-width: 640px) {

  .tp-Mainvisual_Slides_Item .for_sp_mini {

    display: block !important;

  }

}

@media screen and (max-width: 640px) {

  .tp-Mainvisual_Slides_Item .image {

  	display: none;

  }

}

.tp-Mainvisual .slick-dotted.slick-slider {

  margin-bottom: 0;

}

.tp-Mainvisual .slick-dots {

  bottom: -28px;

  background-color: #070707;

}

.tp-Mainvisual .slick-dots li {

  margin: 0;

}

.tp-Mainvisual .slick-dots li button:before {

  color: #3b3b3b;

  opacity: 1;

}

.tp-Mainvisual .slick-dots .slick-active button:before {

  color: #cacaca;

}

.tp-Mainvisual .swiper-container-horizontal > .swiper-pagination-bullets,

.tp-Mainvisual .swiper-pagination-custom,

.tp-Mainvisual .swiper-pagination-fraction {

  bottom: 0;

}

.tp-Mainvisual .swiper-pagination-bullet {

  width: 6px;

  height: 6px;

}

.tp-Mainvisual .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {

  background-color: #3b3b3b;

  opacity: 1;

}

.tp-Mainvisual .swiper-pagination-bullet-active {

  background-color: #cacaca;

}



/* 新着トピックス

------------------------------------------------------------------ */

.tp-Topics {

  padding: 50px 0;

  background:url(../images/home/bg_tp-contents_01.png) center center no-repeat;

}

.tp-Topics_Title {

  margin-bottom: 30px;

  text-align: center;

}



/* 限定品メッセージ */



.tp-Topics .limited_msg{

  max-width: 920px;

  width:90%;

  margin: 10px auto 80px;

  color: #CCC;

  font-size: 12px;

  border: 1px solid #CCC;

}

.tp-Topics .limited_msg p{

  padding : 10px 10px 0;

  text-align: center;

  line-height: 1.4;

}





.tp-Topics .limited_msg p strong{

  font-size: 15px;

}



.tp-Topics .limited_msg p a{

  width: 8.5em;

  font-size: 14px;

  margin: 0 auto 10px;

  padding: 5px;

  background-color: #b2767b;

  color: #ffffff;

  text-decoration: none;

  display: block;

  text-align: center;

}

.tp-Topics .limited_msg p.finish {

  padding: 0 0 10px;

  text-align: center;

  color: #e68293;

}





@media screen and (max-width: 767px) {

  .tp-Topics {

    padding: 25px 0;

    background-size: 150%;

  }

  .tp-Topics_Title {

    margin-bottom: 12px;

  }

  .tp-Topics_Title img {

    width: 113px;

  }

/* 限定品メッセージ */



.tp-Topics .limited_msg p strong{

  font-size: 13px;

}

.tp-Topics .limited_msg{

  max-width: 90%;

  margin: 10px auto 40px;

 }

.tp-Topics .limited_msg p{

  text-align: left;

}

 

}

.tp-Topics_Slides {

  position: relative;

  max-width: 930px;

  margin: 0 auto;

}

.tp-Topics_Slides a:hover img {

  opacity: .7;

}

.tp-Topics_Slides.tp-Topics_Slides--destroy .tp-Topics_Slides_Pagination {

  display: none;

}

@media screen and (max-width:1024px) {

  .tp-Topics_Slides {

    max-width: 85%;

  }

}

@media screen and (max-width: 767px) {

  .tp-Topics_Slides .slick-list::before,

  .tp-Topics_Slides .slick-list::after {

    content: "";

    display: block;

    position: absolute;

    top: 0;

    width: 80px;

    height: 100%;

  }

  .tp-Topics_Slides .slick-list::before {

    left: 0;

    z-index: 1;

    background: linear-gradient(to left, transparent, #363636);

  }

  .tp-Topics_Slides .slick-list::after {

    right: 0;

    background: linear-gradient(to right, transparent, #363636);

  }

}

.tp-Topics_Slides_Item {

  margin: 0 7.5px;

}

.tp-Topics_Slides_Item:not(.slick-active) {

  position: relative;

}

@media screen and (max-width: 767px) {

  .tp-Topics_Slides_Item {

    margin: 0 3.25px;

  }

}

.tp-Topics_Slides_Item a {

  display: block;

  background-color: #fff;

}

.tp-Topics_Slides_Pagination {

  position: absolute;

  top: 50%;

  z-index: 2;

  width: 100%;

}

@media screen and (max-width: 767px) {

  .tp-Topics_Slides_Pagination img {

    width: 8px;

  }

}

.tp-Topics_Slides_Pagination_Prev,

.tp-Topics_Slides_Pagination_Next {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

}

.tp-Topics_Slides_Pagination_Prev {

  left: -30px;

}

@media screen and (max-width: 767px) {

  .tp-Topics_Slides_Pagination_Prev {

    left: -17px;

  }

}

.tp-Topics_Slides_Pagination_Next {

  right: -30px;

}

@media screen and (max-width: 767px) {

  .tp-Topics_Slides_Pagination_Next {

    right: -17px;

  }

}



/* 商品紹介

------------------------------------------------------------------ */

.tp-Products {

  padding: 50px 0 0;

  background-color: #000;

}

.tp-Products_Title {

  margin-bottom: 30px;

  text-align: center;

}

@media screen and (max-width: 767px) {

  .tp-Products {

    padding: 25px 0 0;

  }

  .tp-Products_Title {

    margin-bottom: 12px;

  }

  .tp-Products_Title img {

    width: 114.5px;

  }

}

.tp-Products_Inner {

  -js-display: flex;

  display: flex;

  height: 800px;

}

@media screen and (min-width: 767px) and (max-width: 1024px) {

  .tp-Products_Inner {

    height: 70vw;

  }

}

@media screen and (max-width: 767px) {

  .tp-Products_Inner {

    display: block;

    height: auto;

  }

}

.tp-Products_PointMake,

.tp-Products_BaseMake {

  -js-display: flex;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  width: 50%;

  height: 100%;

}

@media screen and (max-width: 767px) {

  .tp-Products_PointMake,

  .tp-Products_BaseMake {

    width: 100%;

    height: 110vw;

  }

}

.tp-Products_PointMake img[src*="_mb"],

.tp-Products_BaseMake img[src*="_mb"] {

  display: none;

}

@media screen and (min-width: 767px) and (max-width: 1024px) {

  .tp-Products_PointMake_Btn,

  .tp-Products_BaseMake_Btn {

    width: 90%;

    margin-bottom: 20px;

  }

}

@media screen and (max-width: 767px) {

  .tp-Products_PointMake img:not([src*="_mb"]),

  .tp-Products_BaseMake img:not([src*="_mb"]) {

    display: none;

  }

  .tp-Products_PointMake img[src*="_mb"],

  .tp-Products_BaseMake img[src*="_mb"] {

    display: block;

    max-width: 285px;

    margin-bottom: 20px;

  }

}

.tp-Products_PointMake {

  background: url(../images/home/bg_tp-products--pointmake.jpg) center 0 no-repeat;

  background-size: 100%;

}

.tp-Products_BaseMake {

  background: url(../images/home/bg_tp-products--basemake.jpg) center 0 no-repeat;

  background-size: 100%;

}

@media screen and (max-width: 767px) {

  .tp-Products_PointMake {

    background: url(../images/home/bg_tp-products--pointmake_mb.jpg) center 0 no-repeat;

    background-size: cover;

  }

  .tp-Products_BaseMake {

    background: url(../images/home/bg_tp-products--basemake_mb.jpg) center 0 no-repeat;

    background-size: cover;

  }

}



/* アド ギャラリー

------------------------------------------------------------------ */

.tp-AdGallery {

  padding: 100px 0;

  background: url(../images/home/bg_tp-contents_01.png) center center no-repeat;

}

@media screen and (max-width: 767px) {

  .tp-AdGallery {

    padding: 45px 0;

    background-size: 150%;

  }

}

.tp-AdGallery_Title {

  margin-bottom: 50px;

  text-align: center;

}

@media screen and (max-width: 767px) {

  .tp-AdGallery_Title {

    margin-bottom: 20px;

  }

}

.tp-AdGallery_comingSoon {

  margin-bottom: 153px;

  text-align: center;

}

@media screen and (max-width: 767px) {

  .tp-AdGallery_comingSoon {

    margin-bottom: 62px;

  }

}

@media screen and (max-width: 767px) {

  .tp-AdGallery_comingSoon img {

    width: 190px;

  }

}

/*  special CM    */



.tp-AdGallery_specialCM {

  margin-bottom: 100px;

  text-align: center;

}

@media screen and (max-width: 767px) {

  .tp-AdGallery_specialCM {

    margin-bottom: 62px;

  }

}

@media screen and (max-width: 767px) {

  .tp-AdGallery_specialCM img {

    width: 70%;

	max-width: 400px;

  }

}



@media screen and (max-width: 767px) {

  .tp-AdGallery_Title img {

    width: 171.5px;

  }

}

.tp-AdGallery_Slides {

  position: relative;

  max-width: 800px;

  margin: 0 auto;

}

.tp-AdGallery_Slides_Inner a:hover img {

  opacity: .7;

}

@media screen and (max-width: 1024px) {

  .tp-AdGallery_Slides {

    width: 85%;

  }

}

.tp-AdGallery_Slides .slick-track {

  margin-top: 45px;

}

.tp-AdGallery_Slides_Inner {

  margin-bottom: 50px;

}

.tp-AdGallery_Slides_Video {

  position: relative;

}

.tp-AdGallery_Slides_Video--new::before {

  content: "";

  position: absolute;

  top: -45px;

  left: 0;

  display: block;

  width: 97px;

  height: 45px;

	background: url(../images/home/ad_icon_new.png) top left no-repeat;

}

@media screen and (max-width: 767px) {

  .tp-AdGallery_Slides_Video--new::before {

    top: -25px;

    width: 40px;

    height: 19px;

    background-size: contain;

  }

  .tp-AdGallery_Slides_Pagination img {

    width: 8px;

  }

}

.tp-AdGallery_Slides_Video {

  margin: 0 20px;

}

@media screen and (max-width: 767px) {

  .tp-AdGallery_Slides_Video {

      margin: 0 3.25px;

  }

}

.tp-AdGallery_Slides_Pagination_Prev,

.tp-AdGallery_Slides_Pagination_Next {

  position: absolute;

  top: calc(50% - 45px);

}

.tp-AdGallery_Slides_Pagination_Prev {

  left: -30px;

}

@media screen and (max-width: 767px) {

  .tp-AdGallery_Slides_Pagination_Prev {

    left: -15px;

  }

}

.tp-AdGallery_Slides_Pagination_Next {

  right: -30px;

}

@media screen and (max-width: 767px) {

  .tp-AdGallery_Slides_Pagination_Next {

    right: -15px;

  }

}

.tp-AdGallery_Slides .slick-list::before,

.tp-AdGallery_Slides .slick-list::after {

  content: "";

  display: block;

  position: absolute;

  top: 45px;

  width: 220px;

  height: calc(100% - 45px);

}

@media screen and (max-width: 767px) {

  .tp-AdGallery_Slides .slick-list::before,

  .tp-AdGallery_Slides .slick-list::after {

    width: 80px;

  }

}

.tp-AdGallery_Slides .slick-list::before {

  left: 0;

  z-index: 1;

  background: linear-gradient(to left, transparent, rgba(35, 35, 35, 1));

}

.tp-AdGallery_Slides .slick-list::after {

  right: 0;

  background: linear-gradient(to right, transparent, rgba(35, 35, 35, 1));

}

.tp-AdGallery_MoreBtn {

  text-align: center;

}

@media screen and (max-width: 767px) {

  .tp-AdGallery_MoreBtn {

    max-width: 164px;

    margin: 0 auto;

  }

}



/* ベストコスメ受賞情報

------------------------------------------------------------------ */

.tp-BestCosme {

  text-align: center;

}

@media screen and (max-width: 1024px) {

  .tp-BestCosme {

    padding: 0 10px;

    background-color: #000;

  }

}

.tp-BestCosme a {

  display: inline-block;

  background-color: #fff;

}

.tp-BestCosme a:hover img {

  opacity: .7;

}



/* SNS

------------------------------------------------------------------ */

.tp-Sns * {

  box-sizing: border-box;

}

.tp-Sns {

  padding: 50px 0 0;

  text-align: center;

  background-color: #000;

}

.tp-Sns_List {

  line-height: 1;

}

.tp-Sns_List > li {

  display: inline-block;

}

/*.tp-Sns_List > li:first-child {

  margin-right: 50px;

}*/

@media screen and (max-width: 767px) {

  .tp-Sns {

    padding: 25px 0 0;

  }

  .tp-Sns_List {

    font-size: 0;

  }

  .tp-Sns_List > li {

    display: inline-block;

    width: 50%;

    padding: 0 5%;

    line-height: 1.25;

  }

  .tp-Sns_List > li:first-child {

    margin-right: 0;

  }

}



/* フッターエリア

------------------------------------------------------------------ */

.tp-Footer {

  padding: 50px 0 70px;

  text-align: center;

  background: url(../images/home/bg_tp-contents_01.png) center 0 no-repeat;

}

@media screen and (max-width: 767px) {

  .tp-Footer {

    padding: 30px 0 40px;

    background-position: center 200px;

    background-size: 150%;

  }

}



/* フッターバナーエリア

------------------------------------------------------------------ */

.tp-Footer_Banner {

  font-size: 0;

}

.tp-Footer_Banner img {

  width: auto;

}

@media screen and (min-width: 767px) and (max-width: 1024px) {

  .tp-Footer_Banner_List {

    /*display: flex;*/

    margin: 0 auto;

    /*width: 490px;*/

  }

}

.tp-Footer_Banner_List > li {

  display: inline-block;

  /*max-width: 490px;*/

}

.tp-Footer_Banner_List > li:first-child {

  margin-right: 20px;

}

.tp-Footer_Banner_List a {

  display: block;

  background-color: #fff;

}

.tp-Footer_Banner_List a:hover img {

  opacity: .7;

}

@media screen and (max-width: 767px) {

  .tp-Footer_Banner {

    padding: 0 10px;

  }

  .tp-Footer_Banner_List {

    margin: 0 auto;

    /*width: 490px;*/

  }

  .tp-Footer_Banner_List > li {

    display: list-item;

  }

  .tp-Footer_Banner_List > li:first-child {

    margin-right: 0;

  }

  .tp-Footer_Banner_List > li + li {

    margin-top: 10px;

  }

  .tp-Footer_Banner_List > li img {

    width: 100%;

  }

}



/* ページトップ

------------------------------------------------------------------ */

.tp-Footer_Pagetop {

  margin-top: 80px;

  text-align: center;

}

.tp-Footer_Pagetop .pagetop {

  padding: 0;

}

@media screen and (max-width: 767px) {

  .tp-Footer_Pagetop {

    margin-top: 35px;

  }

  .tp-Footer_Pagetop_Btn img {

    width: 65px;

  }

}

