@charset "UTF-8";
/* フリースペース5【非表示】 */
.wrapper_ > .free_space5 {
  display: none;
}

/* --------------------------------------------------------------------
コスメデコルテ「TOP」CSS（SP） / .wrapper_
--------------------------------------------------------------------- */
/* トピックス表示(お知らせテキストバナー)
================================================== */
.txtbnr_brand_notice {
  margin: 10px 1%;
}

.txtbnr_brand_notice a {
  display: block;
  color: #000;
  font-size: 1.5rem;
  line-height: 1.4;
  text-align: center;
  padding: 10px 0;
  border: 2px solid #ccc;
  background: #fff;
}

.txtbnr_brand_notice .icon {
  display: inline-block;
  background: #fe0e11;
  border-radius: 30px;
  color: #fff;
  padding: 2px 20px;
  margin: 0 0 5px 0;
}

.txtbnr_brand_notice .txt {
  display: inline-block;
}

/* MV
================================================== */
.decorte-b--mv {
  position: relative;
  margin-bottom: 13.6vw;
}

.decorte-b--mv .decorte-b--mv-swiper-pagination {
  position: absolute;
  bottom: auto;
  /*top: calc(100% + 5.3333vw);*/
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.decorte-b--mv .decorte-b--mv-swiper-pagination .swiper-pagination-bullet {
  position: relative;
  display: inline-block;
  width: 2.8vw;
  height: 2.8vw;
  margin: 0 3.3333vw;
  padding: 0!important;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  display: block;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  color: transparent;
  border: 0;
  outline: none;
  background: #ccc;
  opacity: 1;
}

.decorte-b--mv .decorte-b--mv-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #333333;
}

/* テキストエリア */
.decorte-b--mv .txt {
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 10px;
}

.decorte-b--mv .txt .day {
  display: inline-block;
  background: #F0F0F0;
  font-size: 1.4rem;
  padding: 5px 10px;
  margin: 0 0 5px 0;
}

/* 共通：タイトル（h3）
================================================== */
.decorte-b--stit{
  font-family: Adobe Garamond Pro;
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.025em;
  padding: 50px 0 20px 0;
  margin: 70px 0 0px 0;
  border-top: 1px solid #F2F2F2;
}

.decorte-b--stit span{
  font-size: 1.4rem;
  line-height: 1;
}

.event_ .decorte-b--stit:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* 新着イベント（#cosmedecorte_new_title・#cosmedecorte_new)
================================================== */
#cosmedecorte_new ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0 2%;
}

#cosmedecorte_new ul li {
  width: calc(100% / 2);
}

#cosmedecorte_new ul li a {
  display: block;
  margin: 2%;
  text-align: center;
}

#cosmedecorte_new ul li img {
  width: 100%;
  height: auto;
}

#cosmedecorte_new ul li .tit {
  font-size: 1.4rem;
  line-height: 1.4;
  padding: 10px 0 0 0;
}

/* プロモーション（#cosmedecorte_campaign_title・#cosmedecorte_campaign)
================================================== */
#cosmedecorte_campaign ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0 2%;
}

#cosmedecorte_campaign ul li {
  width: calc(100% / 2);
}

#cosmedecorte_campaign ul li a {
  display: block;
  margin: 2%;
  text-align: center;
  border: 1px solid #ccc;
}

#cosmedecorte_campaign ul li img {
  width: 100%;
  height: auto;
}

#cosmedecorte_campaign .pc_only {
  display: none;
}

#cosmedecorte_campaign .sp_only {
  display: block;
}

/* ランキング（#cosmedecorte_ranking_title) ※商品リストは、間接セレクタで指定
================================================== */
#cosmedecorte_ranking_title ~ .goods_ ul {
  counter-reset: number 0;
  flex-wrap: nowrap; /*リセット*/
}

#cosmedecorte_ranking_title ~ .goods_ ul li {
  position: relative;
  width: auto;
  padding: 0 20px;
}

#cosmedecorte_ranking_title ~ .goods_ ul li a {
  display: block;
}

#cosmedecorte_ranking_title ~ .goods_ ul li a::before {
    counter-increment: number 1;
    content: counter(number);
    position: absolute;
    z-index: 1;
    top: 0;
    left: 30px;
    font-family: Adobe Garamond Pro;
    font-size: 18px;
}

#cosmedecorte_ranking_title ~ .goods_ .name_ {
  font-size: 13px;
}

/* スライダー ナビアイコン */
#cosmedecorte_ranking_title ~ .goods_ .goods_k_swiper-next,
#cosmedecorte_ranking_title ~ .goods_ .goods_k_swiper-prev {
    border-top: 1px solid #383C3B;
    border-right: 1px solid #383C3B;
    display: inline-block;
    height: 5.3333vw;
    width: 5.3333vw;
    position: absolute;
    top: 22%;
    z-index: 99;
}
#cosmedecorte_ranking_title ~ .goods_ .goods_k_swiper-next { right: 2%; transform: rotate(45deg); }
#cosmedecorte_ranking_title ~ .goods_ .goods_k_swiper-prev { left: 2%; transform: rotate(225deg); }

/* 下部コンテンツ（#decorte-b--top-bottom）
================================================== */
#decorte-b--top-bottom {
  margin: 0 0 60px 0;
}

/* カテゴリー開閉ボタン（#decorte-b--top-bottom .decorte-b--bottom_nav_wrap .decorte-b--bottom_nav_area）
================================================== */
#decorte-b--top-bottom .decorte-b--bottom_nav_area > ul {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #c3c3c3;
}

#decorte-b--top-bottom .decorte-b--bottom_nav_area > ul > li {
  width: 100%;
  border-top: 1px solid #c3c3c3;
}

#decorte-b--top-bottom .decorte-b--bottom_nav_area > ul > li > div.toggle {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 80px;
  cursor: pointer;
  background-color: #fff;
}

#decorte-b--top-bottom .decorte-b--bottom_nav_area > ul > li > div.toggle span {
  display: inline-block;
  font-size: 16px;
  margin: 0 0 0 10px;
}

#decorte-b--top-bottom .decorte-b--bottom_nav_area > ul > li > div.toggle::before {
  content: '';
  display: block;
  width: auto;
  height: 100%;
  aspect-ratio: 400 / 250;
}
#decorte-b--top-bottom .decorte-b--bottom_nav_area > ul > li:nth-of-type(1) > div.toggle::before { background: url("/contents/proper/beauty/cosmedecorte/img/top/category_01.jpg") no-repeat center / auto 100%; }
#decorte-b--top-bottom .decorte-b--bottom_nav_area > ul > li:nth-of-type(2) > div.toggle::before { background: url("/contents/proper/beauty/cosmedecorte/img/top/category_02.jpg") no-repeat center / auto 100%; }
#decorte-b--top-bottom .decorte-b--bottom_nav_area > ul > li:nth-of-type(3) > div.toggle::before { background: url("/contents/proper/beauty/cosmedecorte/img/top/category_03.jpg") no-repeat center / auto 100%; }
#decorte-b--top-bottom .decorte-b--bottom_nav_area > ul > li:nth-of-type(4) > div.toggle::before { background: url("/contents/proper/beauty/cosmedecorte/img/top/category_04.jpg") no-repeat center / auto 100%; }
#decorte-b--top-bottom .decorte-b--bottom_nav_area > ul > li:nth-of-type(5) > div.toggle::before { background: url("/contents/proper/beauty/cosmedecorte/img/top/category_05.jpg") no-repeat center / auto 100%; }
#decorte-b--top-bottom .decorte-b--bottom_nav_area > ul > li:nth-of-type(6) > div.toggle::before { background: url("/contents/proper/beauty/cosmedecorte/img/top/category_06.jpg") no-repeat center / auto 100%; }

#decorte-b--top-bottom .decorte-b--bottom_nav_area > ul > li > div.toggle::after {
  content: '';
  position: absolute;
  right: 20px;
  z-index: 2;
  display: block;
  height: 26px;
  width: 26px;
  background: url("/contents/proper/beauty/cosmedecorte/img/top/icon_accordion_plus.png") no-repeat center / 10px ,#000;
}

#decorte-b--top-bottom .decorte-b--bottom_nav_area > ul > li[data-toggle="active"] > div.toggle::after {
  background: url("/contents/proper/beauty/cosmedecorte/img/top/icon_accordion_minus.png") no-repeat center / 10px ,#000;
}

/* 中身 */
#decorte-b--top-bottom .decorte-b--bottom_nav_area li .nav_child {
  display: none;
  width: 100%;
  padding: 2%;
  background: #c3c3c3;
}

#decorte-b--top-bottom .decorte-b--bottom_nav_area li .nav_child > ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

#decorte-b--top-bottom .decorte-b--bottom_nav_area li .nav_child > ul li {
  width: calc((100% / 2) - 2%);
  margin: 1%;
}

#decorte-b--top-bottom .decorte-b--bottom_nav_area li .nav_child > ul li a {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  height: 70px;
  padding: 0 0 0 10px;
  font-size: 1.4rem;
  background: #fff;
  color: #111;
}

/* カウンセリング（#decorte-b--top-bottom .decorte-b--counseling）
================================================== */
#decorte-b--top-bottom .decorte-b--counseling {
  margin: 40px 2% 0 2%;
}

#decorte-b--top-bottom .decorte-b--counseling a {
  display: block;
}

#decorte-b--top-bottom .decorte-b--counseling img {
  width: 100%;
  height: auto;
}

/* ブランドについて（.decorte-b--ourstory）
================================================== */
#decorte-b--top-bottom .decorte-b--ourstory {
  margin: 40px 2% 0 2%;
}

#decorte-b--top-bottom .decorte-b--ourstory a {
  display: block;
}

#decorte-b--top-bottom .decorte-b--ourstory img {
  width: 100%;
  height: auto;
}