@charset "Shift_JIS";
/* --------------------------------------------------------------------
ビューティー ブランド一覧CSS（SP）
--------------------------------------------------------------------- */
/* ページ内リンクのスクロール用 */
html {
  scroll-behavior: smooth;
}

/* 重要なトピックス（#pickup_topic）
================================================== */
#pickup_topic {
  margin: 0 0 20px 0;
}

#pickup_topic ul {
  padding: 0 10px;
  margin: 0 auto;
}

#pickup_topic ul li:not(:last-of-type) {
  margin-bottom: 5px;
}

#pickup_topic ul li a {
  display: block;
  font-weight: bold;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.2;
  padding: 15px 0;
  border: 1px solid #a7a7a7;
  background: #fff;
}

/* ナビ（#brand_list_navi）
================================================== */
#brand_list_navi {
  padding: 20px 0;
  margin: 20px 0;
  background: #eee;
}

#brand_list_navi > .title {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
  padding: 0 4% 6px 4%;
}

#brand_list_navi > ul.list {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.6rem;
  line-height: 1;
  height: 100%;
  padding: 0 3%;
}

#brand_list_navi > ul.list li {
  position: relative;
  width: calc(100% / 5);
  height: 60px;
  padding: 1%;
}

#brand_list_navi > ul.list li a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
}

/* 該当ブランドがない時の表示 */
#brand_list_navi > ul.list li.no_btn::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

#brand_list_navi > ul.list li.no_btn a {
  color: #777;
  background: #ccc;
}

/* 回遊ボタン（#around_button_wrap)
================================================== */
.wrapper_ #around_button_wrap {
  margin-bottom: 50px;
  margin-top: 50px;
}

/* カテゴリ（ビューティー用） */
.wrapper_ #around_button_wrap .m-title01_ {
  border: none;
  background: none;
  text-align: center;
  margin: 0;
  font-size: 2.4rem;
}

.wrapper_ #around_button_wrap ul.btn_list {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  margin: 0 auto 10px auto;
}

.wrapper_ #around_button_wrap ul.btn_list li {
  width: calc(100% / 2);
}

.wrapper_ #around_button_wrap ul.btn_list li > a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 70px;
  background: #fff;
  font-size: 1.4rem;
  line-height: 1.4;
  text-align: center;
  border-bottom: 1px solid #a7a7a7;
}
.wrapper_ #around_button_wrap ul.btn_list li:nth-of-type(-n+2) > a { border-top: 1px solid #a7a7a7; }
.wrapper_ #around_button_wrap ul.btn_list li:nth-of-type(2n) > a { border-left: 1px solid #a7a7a7; }

/* ボタン三角矢印 */
.wrapper_ #around_button_wrap ul.btn_list li > a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "";
  display: block;
  border-style: solid;
  border-width: 5px;
  border-color:transparent #8c8c8c #8c8c8c transparent;
}

/* --------------------------------------------------------------------
イベント出力コンテンツ
--------------------------------------------------------------------- */
/* 見出しタイトル（.event_brand_list_title）
================================================== */
.event_ > .event_brand_list_title {
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  background: #666;
  padding: 8px 4%;
}

/* ボタン：ブランドロゴ（.event_thumb_box）
================================================== */
/* サムネイル表示 */
.event_ > .event_thumb_box {
  font-size: 1.4rem;
  line-height: 1.4;
  border-top: 1px solid #ccc;
}
.event_ > .event_brand_list_title + .event_thumb_box { border-top: none; }
.event_ > .event_thumb_box:last-child { border-bottom: 1px solid #ccc; }
.event_ > .event_thumb_box:not(:has(> a)) { padding: 8px 4%; } /* テキストのみ（該当なし表示） */

.event_ > .event_thumb_box a {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: 100%;
  height: 80px;
  padding: 8px 4%;
}

.event_ > .event_thumb_box a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 8px;
  height: 8px;
  border-right: solid 1px #333;
  border-bottom: solid 1px #333;
  transform: translateY(-50%) rotate(-45deg);
}

.event_ > .event_thumb_box a img {
  width: auto;
  height: 100%;
  padding: 0 10px;
}

.event_ > .event_thumb_box a p.rubi {
  display: block;
  color: #000;
  width: 100%;
}

/* ページごとのリンク変更用CSS（ビューティー用） */
.event_ > .event_thumb_box { display: none; }/* 全てのBOXを初期非表示 */
.event_ > .event_thumb_box:has(a.beauty) { display: block; }/* 該当linkが存在する場合は、BOXを表示 */
.event_ > .event_thumb_box:not(:has(a.beauty)):has(a.default) { display: block; }/* 該当linkがなく、デフォルトlinkがある場合は、BOXを表示 */

.event_ > .event_thumb_box a { display: none;}/* 全てのリンクを初期非表示 */
.event_ > .event_thumb_box:has(a.beauty) a.beauty { display: flex; }/* 該当linkが存在する場合は、該当linkを表示 */
.event_ > .event_thumb_box:not(:has(a.beauty)) a.default { display: flex; }/* 該当linkがない場合は、デフォルトlinkを表示 */

/* テキストのみ（該当なし表示）表示 */
.event_ > .event_thumb_box.output_in_js { display: block; }

/* 画像・ルビ以外は非表示 */
.event_ > .event_thumb_box a > *:not(img):not(.rubi) { display: none; }