@charset "UTF-8";

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

   GGSサイトジャック用 CSS

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

:root {
   --color-sightjack-black: #000;
   --color-sightjack-orange: #eb6100;
   --color-sightjack-green: #15722c;
   --color-sightjack-yellow: #fdcd00;
   --color-sightjack-white: #f8f6ed;
   --color-sightjack-blue: #004d97;
   --color-sightjack-gray: #736f62;
}

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

.special_section a {
   width: 100%;
   height: 100%;
   display: inline-block;
}


/* HEADER
============================================================= */
#header .header_logo {
   height: auto;
}

#header .header_logo a,
#header .header_sso_logo a {
   display: block;
   width: 100%;
   height: 100%;
   mask-image: url(../../../../../Contents/ImagesPkg/sso/logo.svg);
   mask-position: center center;
   mask-size: 100% 100%;
   mask-repeat: no-repeat;
   -webkit-mask-image: url(../../../../../Contents/ImagesPkg/sso/logo.svg);
   -webkit-mask-position: center center;
   -webkit-mask-size: 100% 100%;
   -webkit-mask-repeat: no-repeat;
   background: var(--color-sightjack-white);
}

#header .header_logo a img,
.header_sso_logo img {
   display: block;
   width: 100%;
   height: auto;
   opacity: 0;
}

#header #header_img_slider .swiper-slide {
   background: var(--color-sightjack-green);
   color: var(--color-sightjack-white);
}

.header_wrap {
   background: var(--color-sightjack-orange);
}

.header_nav_list>li>a {
   color: var(--color-sightjack-white);
}

.header_utiliry li path {
   fill: var(--color-sightjack-white);
   stroke-width: 0;
}

.header_inner .utility_cart .num {
   background-color: var(--color-sightjack-white);
   color: var(--color-sightjack-orange) !important;
}

#header_bottom {
   background: var(--color-sightjack-yellow);
}

.header_nav_list>li>a::before,
.header_nav_list>li>.cate_toggle::before {
   background: var(--color-sightjack-white);
}

.header_nav .cate_list dt,
.header_nav .cate_list dt>a,
.header_nav .cate_list>li>p>a {
   background: var(--color-sightjack-blue);
}

.header_nav .cate_list dt .btn_cate {
   color: var(--color-sightjack-white);
}

.header_nav .cate_list dl[class*="cate_"] dt a::before {
   background: var(--color-sightjack-white);
}

.header_search_box {
   border: none;
}

.header_search_box .search_cate_btn {
   background: var(--color-sightjack-white);
   border-right-color: var(--color-sightjack-yellow);
}

.header_search_box .search_cate_list ul li {
   border-top: 1px solid #fff3bf;
}

.top_mainvisual_section .swiper-pagination-bullet {
   border: .1em solid var(--color-sightjack-black);
   background: var(--color-sightjack-white);
   box-sizing: border-box;
}

#header #header_bottom.active .inner {
   /* background: var(--color-sightjack-white); */
}

#header_bottom.active .header_search_box .search_cate_btn {
   border-right: none;
}

#header_bottom .rmd_keywords .tag_list li a {
   background: var(--color-sightjack-yellow);
   border: 1px solid var(--color-sightjack-black);
}

@media (min-width: 769px) {
   .top_brand_logo_section {
      background: var(--color-sightjack-white);
   }
}

@media (max-width: 768px) {

   #header .header_inner {
      background: var(--color-sightjack-orange);
   }

   .header_inner .hamburger::before,
   .header_inner .hamburger::after,
   .header_inner .hamburger span {
      background-color: var(--color-sightjack-white);
   }

   #header .header_logo {
      height: calc(58 * (100vw / 390));
      padding: 0 !important;
   }

   #header_bottom .inner {
      padding: calc(10 * (100vw / 390)) calc(15 * (100vw / 390)) calc(10 * (100vw / 390));
   }

   #header.sp_open .header_logo::before {
      background: var(--color-sightjack-orange);
   }

   #header.sp_open .header_inner .hamburger::before,
   #header.sp_open .header_inner .hamburger::after {
      background-color: var(--color-sightjack-white);
   }

   .header_nav_list>li>a {
      color: var(--color-basic);
   }

   .top_brand_logo_section {
      padding-top: calc(16 * (100vw / 390));
      padding-bottom: calc(6 * (100vw / 390));
   }
}

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

.special_section {
   z-index: 6;
   background: var(--color-sightjack-white);
   border-top: 1.5px solid var(--color-sightjack-gray);
   border-bottom: 1.5px solid var(--color-sightjack-gray);
}

.special_section .top_section__inner {
   position: relative;
}

.special_section .top_section__inner::after {
   position: absolute;
   background-repeat: no-repeat;
   background-position: 0 0;
   background-size: 100% auto;
   content: "";
}

.special_section .section_ttl {
   width: 30rem;
   height: auto;
   margin: 0 auto;
}

.special_section .section_ttl img {
   width: 14rem;
}

.special_section .section_ttl .txt_L.txt_eng {
   font-size: 3.3rem;
   font-weight: 600 !important;
   font-family: var(--font-base) !important;
}

.special_section .special_caption {
   position: absolute;
   bottom: -5rem;
   right: 0;
   font-size: 1.1rem;
   color: var(--color-sightjack-black);
}

.special_section .btn_viewmore a {
   background: var(--color-sightjack-blue);
   border-color: var(--color-sightjack-black);
   color: var(--color-sightjack-white);
}

.special_section .btn_viewmore a::before {
   border-top: solid .15rem var(--color-sightjack-white);
   border-right: solid .15rem var(--color-sightjack-white);
}

.special_section .btn_viewmore a:hover {
   background-color: var(--color-sightjack-black) !important;
   color: var(--color-sightjack-white);
}

.special_section .btn_viewmore a:hover::before {
   border-top-color: var(--color-sightjack-white) !important;
   border-right-color: var(--color-sightjack-white) !important;
}

.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: var(--color-sightjack-green);
   color: var(--color-sightjack-white);
}

.special_section .feature_img {
   border: solid 2px var(--color-sightjack-black);
}

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

.special_section .top_swiper_wrap .swiper-scrollbar-drag {
   background: var(--color-sightjack-gray);
}

.top_hotword_section .top_section__inner {
   background: #f7f7f7;
   border: none;
}

.top_hotword_section .tag_list a {
   background: var(--color-sightjack-yellow);
   border: 1px solid var(--color-sightjack-black);
}

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

　　　　　　　　　　SP ONLY SETTING

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

@media (max-width: 768px) {

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

   .special_section {
      padding-top: 1.5rem;
   }

   .special_section .section_ttl {
      padding-top: 2.5rem;
   }

   .special_section .section_ttl img {
      width: 12rem;
   }

   .special_section .top_section__inner::after {
      width: 10rem;
      height: 16.5rem;
      bottom: -11.5rem;
      right: auto;
      left: 1rem;
   }

   .special_section .section_ttl {
      width: 100%;
   }

   .special_section .section_ttl .txt_L.txt_eng {
      margin-bottom: 3rem;
      font-size: 2.8rem;
      line-height: 1;
   }

   .special_section .special_caption {
      bottom: -4.5rem;
      right: 2rem;
      font-size: 1rem;
   }

   .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));
   }

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

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

　　　　　　　　　　PC ONLY SETTING

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

@media (min-width: 769px) {

   .feature_section {
      padding-top: 8rem;
   }

   .special_section .top_swiper_wrap .swiper-button-prev::after,
   .special_section .top_swiper_wrap .swiper-button-next::after {
      border: solid 1px var(--color-sightjack-black);
   }

   .special_section .top_swiper_wrap .swiper-button-next::after {
      border-bottom: none;
      border-left: none;
   }

   .special_section .top_swiper_wrap .swiper-button-prev::after {
      border-top: none;
      border-right: none;
   }
}