@charset "UTF-8";

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

   サイトジャック・CK用 CSS

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

/* HEADER
============================================================= */

.header_sso_logo {
  border-bottom-color: #d5e4f0;
}

.header_sso_logo img {
  opacity: 0;
}

.header_sso_logo a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../img/logo.svg);
  background-size: 14rem auto;
}

.header_logo img {
  opacity: 0;
}

.header_logo a {
  display: block;
  width: 100%;
  height: 100%;
  background: none;
  mask-image: url(../../../../../Contents/ImagesPkg/sso/logo_ck.svg);
  background-image: none;
  background-color: var(--color-sightjack-main);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: 92%;
}

/* PC用*/
@media (min-width: 769px) {

  #header.sp_open .header_sso_logo a {
    background-position: center center;
  }
}

/* SP用*/
@media (max-width: 768px) {

  .header_sso_logo a {
    background-size: calc(103* (100vw / 390)) auto;
    background-position: center calc(2* (100vw / 390));
  }

  #header.sp_open .header_logo a {
    -webkit-mask-position: center calc(2* (100vw / 390));
  }

  #header .header_inner {
    background-color: var(--color-sightjack-bg_header) !important;
  }

}


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

#Wrap {
  position: relative;
}

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

/* -- セクション色付け化 -- */
#shopTop_CK .top_subBanner_section,
.top_search_section {
  background-color: var(--color-sightjack-bg_header);
}

#shopTop_CK .top_mainVisual_section .swiper-pagination-bullet::before {
  background: transparent;
  border: solid 1px #888e93;
  opacity: 1;
}

#shopTop_CK .top_mainVisual_section .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  border: solid 1px #f9f8f5;
  background: #f9f8f5;
}

/* メインビジュアル￥
---------------------------------- */
#shopTop_CK .top_mainVisual_section {
  background-color: var(--color-sightjack-main_visual);
}

#shopTop_CK .top_mainVisual_section .feature_list_common li .feature_cont {
  color: #f9f8f5;
}

#shopTop_CK .top_subBanner_section .btn_viewmore a {
  background: var(--color-sightjack-sub);
  border-color: var(--color-sightjack-sub);
  color: #f9f8f5;
}

#shopTop_CK .top_subBanner_section .btn_viewmore a::before {
  border-color: #f9f8f5;
}

#shopTop_CK .top_subBanner_section .btn_viewmore a:hover {
  background-color: #fefcf4 !important;
  border-color: #666 !important;
  color: #666;
}

#shopTop_CK .top_subBanner_section .btn_viewmore a:hover::before {
  border-top-color: #666 !important;
  border-right-color: #666 !important;
}


/* 人気キーワード
---------------------------------- */
#shopTop_CK .top_search_section {
  background-color: #f3f7fa;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

#shopTop_CK .top_search_section .top_section__inner {
  background-color: #ddedf9;
  border: solid 1px transparent;
}

#shopTop_CK .top_keyword_section .section_ttl {
  color: #3d3d3d;
}

#shopTop_CK .top_keyword_section .accordion_btn {}

#shopTop_CK .top_keyword_section .accordion_btn::before {}

#shopTop_CK .top_keyword_section .accordion_btn span::before,
#shopTop_CK .top_keyword_section .accordion_btn span::after {}

#shopTop_CK .top_section .txt_wrap .star {
  position: absolute;
  width: 3.5rem;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

#shopTop_CK .top_section .txt_wrap .star_1 {
  margin-top: -3rem;
  margin-left: -45rem;
}

#shopTop_CK .top_section .txt_wrap .star_2 {
  margin-top: 7rem;
  margin-left: -52rem;
}

#shopTop_CK .top_section .txt_wrap .star_3 {
  margin-top: -5.5rem;
  margin-left: 49rem;
}

#shopTop_CK .top_section .txt_wrap .star_4 {
  margin-top: 11rem;
  margin-left: 60rem;
}

#shopTop_CK .top_search_section .searchType_list li a {
  background: #bad2ea;
  border: solid 1px #a8bed2 !important;
}

#shopTop_CK .top_search_section .search_box {
  box-shadow: unset;
  background: #fff;
}

#shopTop_CK .top_search_section .search_box .icn_search::before {
  mask-image: url(../../../../../Contents/ImagesPkg/sso/icn_search.svg);
  mask-position: center center;
  mask-position: 100% auto;
  mask-repeat: no-repeat;
  -webkit-mask-image: url(../../../../../Contents/ImagesPkg/sso/icn_search.svg);
  -webkit-mask-position: center center;
  -webkit-mask-position: 100% auto;
  -webkit-mask-repeat: no-repeat;
  background: var(--color-sightjack-sub);
}

#shopTop_CK .top_keyword_section {
  background: #f4f9fd;
}

#shopTop_CK .top_keyword_section .tag_list ul li a {
  background-color: #fff;
  border-color: #cacaca;
  color: var(--color-sightjack-main);
}

#shopTop_CK .top_keyword_section .tag_list ul li a:hover {
  background-color: #fffde1;
}

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

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

#shopTop_CK .special_section {
  z-index: 1;
}

#shopTop_CK .special_section .btn_viewmore a:hover {
  background-color: #fefcf4;
  border-color: #666 !important;
  color: #666;
}

#shopTop_CK .special_section .btn_viewmore a:hover::before {
  border-top-color: #666;
  border-right-color: #666;
}

#shopTop_CK #SecondLineup {
  background: var(--color_bg_01);
}

#shopTop_CK .top_lineup_section>section:not(.top_3rdLineup_section):nth-of-type(n+2) .top_section__inner {
  border-top: none;
}

#shopTop_CK .special_section .btn_viewmore a {
  background: var(--color-sightjack-sub);
  border-color: var(--color-sightjack-sub);
  color: #fff;
}

#shopTop_CK .special_section .btn_viewmore a::before {
  border-top: solid .15rem #fff;
  border-right: solid .15rem #fff;
}

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


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

　　　　　　　　　　PC ONLY SETTING

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

@media (min-width: 769px) {
  #shopTop_CK .special_section .section_ttl .txt_L.txt_eng {
    font-size: 3.4rem;
  }

  .special_section .top_section__inner::after {
    bottom: -12rem;
  }
}


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

　　　　　　　　　　SP ONLY SETTING

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

@media (max-width: 768px) {
  #shopTop_CK .top_lineup_section {
    margin-top: 0;
  }

  #shopTop_CK .top_lineup_section {
    padding-top: 0;
  }

  #shopTop_CK .top_mainVisual_section {
    padding-bottom: 4rem;
  }

  #shopTop_CK .top_subBanner_section {
    padding-top: 4rem;
  }

  #shopTop_CK .top_keyword_section {
    background: #ddedf9;
  }

  #shopTop_CK .top_search_section {
    background-color: #f3f7fa;
    padding-top: 4rem;
    padding-bottom: 0;
  }

  #shopTop_CK .top_search_section .top_section__inner {
    background-color: transparent;
    padding-top: 0;
  }

  #shopTop_CK .top_lineup_section section:nth-of-type(n+2):not(.top_3rdLineup_section) {
    padding-top: 5rem;
  }

  #shopTop_CK .special_section .section_ttl .txt_L.txt_eng {
    font-size: 2.8rem;
    line-height: 1.1;
  }

  #shopTop_CK .special_section .top_section__inner {
    padding-bottom: 5.5rem;
  }

  #shopTop_CK .top_section .txt_wrap .star_1 {
    margin-top: -3rem;
    margin-left: -8rem;
  }

  #shopTop_CK .top_section .txt_wrap .star_2 {
    margin-top: 2rem;
    margin-left: -13rem;
  }

  #shopTop_CK .top_section .txt_wrap .star_3 {
    margin-top: -2rem;
    margin-left: 8rem;
  }

  #shopTop_CK .top_section .txt_wrap .star_4 {
    margin-top: 3rem;
    margin-left: 12rem;
  }

  #shopTop_CK .top_section__inner::after {
    bottom: -12rem;
  }

  #shopTop_CK .special_section .special_caption {
    bottom: -5.5rem;
  }

  /*
  #shopTop_CK .top_lineup_section > section:not(.top_3rdLineup_section) {
    padding-top: 1.5rem;
  }
  #shopTop_CK .top_lineup_section .section_ttl {
    padding-top: 2.5rem;
  }*/
}