@charset "UTF-8";

/* =============================================================

   サイトジャック用 CSS

============================================================= */

/* コンテンツ
============================================================= */

#Wrap {
  position: relative;
}

#Wrap::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24rem;
  background-color: var(--color-sightjack-bg_header);
  /* content: ""; */
}

.top_brand_logo_section {
  position: relative;
  border-top: solid #dedddb 1px;
  border-bottom: solid #dedddb 1px;
  background-color: var(--color-sightjack-bg_header);
}

/* -- メインビジュアル
---------------------------------- */

.top_mainvisual_section {
  padding: 5rem 0 4rem;
  background: var(--color-sightjack-main_visual);
}

.top_mainvisual_section .feature_list_common .feature_ttl {
  color: #f9f8f5;
}

.top_mainvisual_section .swiper-pagination-bullet {
  background: transparent;
  border: solid #888e93 1px;
}

.top_mainvisual_section .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #f9f8f5;
  border-color: #f9f8f5;
}

/* 人気キーワード
---------------------------------- */
.top_hotword_section {
  padding-top: 6rem;
  padding-bottom: 6rem;
  background: var(--color-sightjack-bg_search);
}

.top_hotword_section .ttl_section {
  color: #3d3d3d;
}

.top_hotword_section .top_section__inner {
  background-color: var(--color-sightjack-bg_special);
  border: none;
}

.top_hotword_section .product_tag_btn span {
  color: ar(--color-sightjack-main);
  border-bottom: 1px solid ar(--color-sightjack-main);
}

.top_hotword_section .product_tag_btn span::before,
.top_hotword_section .product_tag_btn span::after {
  background-color: var(--color-sightjack-main);
}

.top_hotword_section .tag_list a {
  border-color: #fff;
  border-color: #cacaca;
  color: var(--color-sightjack-main);
}

.top_hotword_section .tag_list a:hover {
  background-color: #fffde1;
}

/* サイトジャックコンテンツエリア
---------------------------------- */
.special_section {
  z-index: 6;
  background: var(--color-sightjack-bg_special);
}

.special_section.top_1stLineup_section .item_list__item {
  width: 20.5rem !important;
  height: auto;
  margin-left: .8rem !important;
  margin-right: .8rem !important;
  margin-bottom: 0;
  padding: 0 0 1.8rem;
}

.special_section.top_1stLineup_section .item_list__item a {
  /* padding-bottom: 0; */
}

.special_section.top_1stLineup_section .item_list__item .item_list__cat {
  background: #f5f5f5;
}

.special_section .feature_img {
  border: solid 2px #f9f8f5;
}

.special_section .feature_img img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}


/*//////////////////////////////////////////////////

　　　　　　　　　　PC ONLY SETTING

//////////////////////////////////////////////////*/

@media (min-width: 769px) {

  .feature_section {
    padding-top: 8rem;
  }


}


/*//////////////////////////////////////////////////

　　　　　　　　　　SP ONLY SETTING

//////////////////////////////////////////////////*/

@media (max-width: 768px) {

  /* サイトジャックコンテンツエリア
---------------------------------- */
  /* -- メインビジュアル
---------------------------------- */

  .top_mainvisual_section {
    padding: calc(20 * (100vw / 390)) 0 calc(20 * (100vw / 390));
  }

  /* 人気キーワード
---------------------------------- */
  .top_hotword_section {
    padding-top: calc(50 * (100vw / 390));
    padding-bottom: calc(50 * (100vw / 390));
  }



  /* サイトジャックコンテンツエリア
---------------------------------- */
  .special_section.top_1stLineup_section .item_list__item {
    height: auto;
    width: 16.2rem !important;
    margin-left: calc(6 * (100vw / 390)) !important;
    margin-right: calc(6 * (100vw / 390)) !important;
    margin-bottom: 0;
    padding: 0 0 calc(17 * (100vw / 390));
  }

}