@charset "UTF-8";

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

   サイトジャック用 CSS

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

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

#Wrap {
  position: relative;
}

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

/* -- セクション色付け化 -- */
.top_brand_logo_section,
.top_mainvisual_section,
.special_section,
.top_hotword_section {
  background-color: var(--color-sightjack-bg_header);
}

/* サイトジャックコンテンツエリア
---------------------------------- */
.special_section {
  padding: 2rem 0 4rem;
}

.special_section .special_banner_area {
  position: relative;
  width: 67rem;
  margin: auto;
  text-align: center;
}

.special_section .special_banner_area::before,
.special_section .special_banner_area::after {
  position: absolute;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
  content: "";
}

.special_section .special_banner_area::before {
  left: -1.5rem;
  bottom: -5.3rem;
  width: 14.5rem;
  height: 9.8rem;
  background-image: url(../../../Contents/ImagesPkg/sightjack/260423/img_01_pc.png);
}

.special_section .special_banner_area::after {
  right: -1.5rem;
  bottom: -6rem;
  width: 14rem;
  height: 10.5rem;
  background-image: url(../../../Contents/ImagesPkg/sightjack/260423/img_02_pc.png);
}

.special_section .special_banner_area .special_img {
  width: 100%;
  margin: auto;
}

.special_section .special_banner_area .special_img img {
  width: 100%;
  background-color: #fff;
}

.special_section .special_banner_area .special_catch {
  padding: 1rem 0 1.5rem;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.special_section .special_btn_check a {
  width: 29rem;
  height: 5rem;
  background-color: var(--color-sightjack-main);
  border-color: var(--color-sightjack-main);
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226.111%22%20height%3D%2210%22%20viewBox%3D%220%200%206.111%2010%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_8933%22%20data-name%3D%22%E3%83%91%E3%82%B9%208933%22%20d%3D%22M12.111%2C10.637%2C8.222%2C6.748%2C9.333%2C5.637l5%2C5-5%2C5L8.222%2C14.526Z%22%20transform%3D%22translate(-8.222%20-5.637)%22%20fill%3D%22%23fff%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  color: #fff;
  box-shadow: 0 0.5rem 0 #000;
  font-size: 1.5rem;
}

.special_section .special_btn_check a:hover {
  background-color: #3c8b24 !important;
  border-color: #3c8b24;
}

.special_section .special_links {
  padding: 3rem 0 0;
}

.special_section .special_links ul {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.special_section .special_links ul li {
  width: 26rem;
}

.special_section .special_links a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.6rem;
  width: 100%;
  height: 6.8rem;
  border-radius: 0.4rem;
  background: #e288b1;
  box-shadow: 0px 4px 0 #902255;
  text-align: center;
  color: #fff;
}

.special_section .special_links a span {
  display: block;
}

.special_section .special_links a .txt_lg {
  font-size: 1.6rem;
  font-weight: 600;
}

.special_section .special_links a .txt_sm {
  margin-bottom: -0.4rem;
  transform: scale(0.85);
  font-size: 1rem;
  line-height: 1;
}

.special_section .special_links a:hover {
  background: #d1719d;
}

/* 人気キーワード
---------------------------------- */
.top_hotword_section .top_section__inner {
  background-color: #fdfac8;
  border-color: #fdfac8;
}

.top_hotword_section .tag_list a {
  background: #ffffff;
  border-color: #dbd78d;
}

/* GGFピックアップアイテム
---------------------------------- */

.special_section02 {
  background-color: var(--color-sightjack-main);
  color: #fff;
}

.special_section02 .ttl_section {
  position: relative;
}

.special_section02 .ttl_section::before {
  position: absolute;
  top: -9rem;
  left: 3rem;
  width: 30rem;
  height: 14rem;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
  background-image: url(../../../Contents/ImagesPkg/sightjack/260423/img_03_pc.png);
  content: "";
}

.special_section02 .btn_viewmore {
  position: relative;
}

.special_section02 .btn_viewmore::before {
  position: absolute;
  bottom: -6.5rem;
  right: -5rem;
  width: 25rem;
  height: 12rem;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
  background-image: url(../../../Contents/ImagesPkg/sightjack/260423/img_04_pc.png);
  content: "";
}

.special_section02 .btn_viewmore a {
  background-color: #fff;
  border-color: #212121;
  color: #212121;
}

.special_section02 .btn_viewmore a:hover {
  background-color: #212121;
  border-color: #212121;
  color: #fff;
}

.special_section02 .item_list_common .swiper-scrollbar-drag {
  background-color: #fff;
}

.special_section02 .item_list_common .swiper-scrollbar {
  background-color: #438231;
}

.special_section02 .item_list_common .swiper-button-next {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210.854%22%20height%3D%2220.707%22%20viewBox%3D%220%200%2010.854%2020.707%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_9070%22%20data-name%3D%22%E3%83%91%E3%82%B9%209070%22%20d%3D%22M18%2C4%2C8%2C14%2C18%2C24%22%20transform%3D%22translate(18.354%2024.354)%20rotate(180)%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}

.special_section02 .item_list_common .swiper-button-prev {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210.854%22%20height%3D%2220.707%22%20viewBox%3D%220%200%2010.854%2020.707%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_9069%22%20data-name%3D%22%E3%83%91%E3%82%B9%209069%22%20d%3D%22M18%2C4%2C8%2C14%2C18%2C24%22%20transform%3D%22translate(-7.5%20-3.646)%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}

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

　　　　　　　　　　PC ONLY SETTING

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

@media (min-width: 769px) {

  .feature_section {
    padding-top: 8rem;
  }

  /* GGFピックアップアイテム
  ---------------------------------- */


}


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

　　　　　　　　　　SP ONLY SETTING

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

@media (max-width: 768px) {

  .top_hotword_section {
    padding-bottom: calc(50 * (100vw / 390));
  }

  .feature_section {
    padding-top: calc(50 * (100vw / 390));
  }

  /* サイトジャックコンテンツエリア
  ---------------------------------- */
  .special_section {
    border-bottom: calc(6 * (100vw / 390)) solid #eceacc;
    padding: calc(20 * (100vw / 390)) 0 calc(30 * (100vw / 390));
  }

  .special_section .special_banner_area {
    width: auto;
    margin: auto;
    padding: 0 calc(20 * (100vw / 390));
  }

  .special_section .special_banner_area::before {
    left: calc(-5 * (100vw / 390));
    bottom: calc(-62 * (100vw / 390));
    width: calc(73 * (100vw / 390));
    height: calc(101 * (100vw / 390));
    background-image: url(
    ../../../Contents/ImagesPkg/sightjack/260423/img_01_sp.png);
  }

  .special_section .special_banner_area::after {
    right: calc(-30 * (100vw / 390));
    bottom: calc(-67 * (100vw / 390));
    width: calc(96 * (100vw / 390));
    height: calc(117 * (100vw / 390));
    background-image: url(
    ../../../Contents/ImagesPkg/sightjack/260423/img_02_sp.png);
  }

  .special_section .special_banner_area .special_img {
    width: 100%;
  }

  .special_section .special_banner_area .special_catch {
    padding: calc(8 * (100vw / 390)) 0 calc(15 * (100vw / 390));
    font-size: calc(15 * (100vw / 390));
  }

  .special_section .special_btn_check a {
    width: calc(233 * (100vw / 390));
    height: calc(42 * (100vw / 390));
    box-shadow: 0 calc(5 * (100vw / 390)) 0 #000;
    font-size: calc(15 * (100vw / 390));
  }

  .special_section .special_links {
    padding-top: calc(30 * (100vw / 390));
  }

  .special_section .special_links ul {
    gap: calc(5 * (100vw / 390));
  }

  .special_section .special_links ul li {
    width: calc(113 * (100vw / 390));
  }

  .special_section .special_links a {
    gap: calc(2 * (100vw / 390));
    height: calc(80 * (100vw / 390));
    border-radius: calc(4 * (100vw / 390));
  }

  .special_section .special_links a .txt_lg {
    font-size: calc(13 * (100vw / 390));
    line-height: 1.3;
  }

  .special_section .special_links a .txt_sm {
    margin-bottom: calc(-5 * (100vw / 390));
    font-size: calc(10 * (100vw / 390));
    line-height: 1.3;
    transform: scale(0.8);
  }

  .top_mainvisual_section {
    padding-top: calc(30 * (100vw / 390));
  }

  /* GGFピックアップアイテム
  ---------------------------------- */

  .special_section02 {
  }

  .special_section02 .ttl_section::before {
    top: calc(-77 * (100vw / 390));
    left: calc(-47 * (100vw / 390));
    width: calc(111 * (100vw / 390));
    height: calc(161 * (100vw / 390));
    background-image: url(
    ../../../Contents/ImagesPkg/sightjack/260423/img_03_sp.png);
  }

  .special_section02 .btn_viewmore::before {
    bottom: calc(-84 * (100vw / 390));
    right: calc(-19 * (100vw / 390));
    width: calc(94 * (100vw / 390));
    height: calc(137 * (100vw / 390));
    background-image: url(../../../Contents/ImagesPkg/sightjack/260423/img_04_sp.png);
  }



}