@charset "UTF-8";

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

   サイトジャック用 CSS

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

/* COLOR SETTING
============================================================= */

:root {
  --color-sightjack-01: #FFF7DB;
  --color-sightjack-02: #008C51;
  --color-sightjack-03: #FFF0BC;
  --color-sightjack-04: #FFC600;
  --color-sightjack-05: #FF7600;
  --color-sightjack-06: #FFB729;
  --color-sightjack-07: #ffea01;
  --color-sightjack-08: #FFFCDB;
  --color-sightjack-webstore: #FF9D00;
  --color-sightjack-venue: #70C700;
  
}

/* ヘッダー
============================================================= */

#header_txt_slider,
#header_img_slider {
  position: relative;
  z-index: 30;
}

/* ---- ヘッダー帯 ---- */

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

#header_txt_slider,
#header_txt_slider li {
  background-color: var(--color-sightjack-05) !important;
}

#header_txt_slider li p {
  color:  #fff !important;
}

/* ---- ヘッダーロゴ ---- */

#header .header_logo a {
  position: relative;
}

#header .header_logo a::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url(../../../Contents/ImagesPkg/common/logo.svg);
  mask-position: center center;
  mask-size: 100% auto;
  mask-repeat: no-repeat;
  -webkit-mask-image: url(../../../Contents/ImagesPkg/common/logo.svg);
  -webkit-mask-position: center center;
  -webkit-mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
  background: var(--color-sightjack-02);
  content: "";
}

#header .header_logo img {
  opacity: 0;
  display: block;
}

/* ---- ヘッダーアイコン ---- */

#header .header_utiliry .utility_favorite svg,
#header .header_utiliry .utility_mypage svg,
#header .header_utiliry .utility_cart svg,
#header .header_utiliry .search_modal__btn svg {
}

#header .header_utiliry .utility_cart .num {
}

/*
#header .header_utiliry .utility_favorite a {
  position: relative;
  display: block;
  mask-image: url('data:image/svg+xml;charset=utf8,%09%09%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2050.1%2046%22%3E%0A%09%09%09%09%09%09%09%09%09%3C!--%20Generator%3A%20Adobe%20Illustrator%2028.6.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%201.2.0%20Build%20709)%20%20--%3E%0A%09%09%09%09%09%09%09%09%09%3Cg%3E%0A%09%09%09%09%09%09%09%09%09%09%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%3E%0A%09%09%09%09%09%09%09%09%09%09%09%3Cpath%20id%3D%22_%E3%83%91%E3%82%B9_674%22%20data-name%3D%22%E3%83%91%E3%82%B9_674%22%20d%3D%22M4.1%2C25.2l20.8%2C20.8%2C5.4-5.4%2C15.4-15.4c5.5-5.5%2C5.8-14.4.5-20.2-.2-.2-.4-.4-.5-.6C43.1%2C1.6%2C39.3%2C0%2C35.4%2C0c-.4%2C0-.8%2C0-1.1%2C0%2C0%2C0-.2%2C0-.3%2C0-3.4.3-6.6%2C1.8-9%2C4.2h0c-5.9-5.6-15.2-5.5-20.8.4-5.5%2C5.7-5.5%2C14.8%2C0%2C20.5Z%22%2F%3E%0A%09%09%09%09%09%09%09%09%09%09%09%3Cpath%20d%3D%22M42.6%2C22l-17.7%2C17.7L7.3%2C22c-1.9-1.9-3-4.5-3-7.2%2C0-2.7%2C1.1-5.3%2C3-7.2%2C1.9-1.9%2C4.5-3%2C7.2-3%2C2.7%2C0%2C5.3%2C1.1%2C7.2%2C3l3.2%2C3.2%2C3.2-3.2c1.9-1.9%2C4.5-3%2C7.2-3%2C2.7%2C0%2C5.3%2C1.1%2C7.2%2C3%2C4%2C4%2C4%2C10.5%2C0%2C14.5Z%22%2F%3E%0A%09%09%09%09%09%09%09%09%09%09%3C%2Fg%3E%0A%09%09%09%09%09%09%09%09%09%3C%2Fg%3E%0A%09%09%09%09%09%09%09%09%3C%2Fsvg%3E');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 94%;
  background: #fff;
}*/

#CartDrawer .drawer__header {
  background-color: var(--color-sightjack-02);
  color: #fff;
}

#CartDrawer .btn-cart {
  background: var(--color-sightjack-05);
}

.minicart-drawer--right {
  border-left: none;
}

#CartDrawer .drawer__title {
  color: #fff;
}

#CartDrawer .drawer__close button {
  position: relative;
  top: -.3rem;
  mask-image:
    url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2235%22%20height%3D%2235%22%20viewBox%3D%220%200%2035%2035%22%3E%3Cpath%20d%3D%22M0%2C0H35V35H0Z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M15.731%2C13.488l7.852-7.852%2C2.243%2C2.243-7.852%2C7.852%2C7.852%2C7.852-2.243%2C2.243-7.852-7.852L7.879%2C25.827%2C5.636%2C23.584l7.852-7.852L5.636%2C7.879%2C7.879%2C5.636Z%22%20transform%3D%22translate(1.769%201.769)%22%20fill%3D%22%23212121%22%2F%3E%3C%2Fsvg%3E');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 93%;
  cursor: pointer;
  text-indent: -200px;
  overflow: hidden;
  background: #fff;
}

/* PC用*/

@media (min-width: 769px) {

  #header,
  #header .header_nav {
    background-color: var(--color-sightjack-01) !important;
  }

  .header_nav_list + .bg_header_nav_list {
    background: none;
  }

  #header .header_inner,
  #header .header_inner .header_nav_list span,
  #header .header_inner .header_nav_list a,
  #header .header_inner .header_nav_list a:hover {
  }

  #header .header_search_box .search_cate_btn,
  #header .header_search_box .search_box input,
  #header .header_search_box .search_cate_list ul {
    background-color: #fff !important;
  }

  .header_nav .menu_contents {
    top: 15.8rem;
  }

  .header_nav .menu_contents::before {
    top: -3rem;
  }

  #header .header_nav_list {
  }

  #header .header_nav_list > li {
  }

  #header .header_search_box .search_cate_btn {
    border-right-color: var(--color-sightjack-01) !important;
  }

  #header .header_nav .cate_list dt, #header .header_nav .cate_list dt > a,
  #header .header_nav .cate_list > li > p > a {
    background: var(--color-sightjack-07);
    font-weight: bold;
  }

  /* --- カテゴリボタン --- */
  .header_search_box .search_cate_list .btn_all_cate a {
    background: var(--color-sightjack-02);
  }

  .header_search_box .search_cate_list .btn_all_cate span {
    background: var(--color-sightjack-05);
  }
}

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

  #header .header_logo {
  }

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

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

  #header .header_inner .hamburger::before,
  #header .header_inner .hamburger::after,
  #header .header_inner .hamburger span {
    background-color: #fff !important;
  }

  #header .head_site_menu ul {
    background-color: #fff;
  }

  #header .head_site_menu > ul > li {
    background-color: var(--color-sightjack-02);
    color: #fff;
  }

  #header_bottom .inner {
    background: #fff;
  }

  #header.scroll #header_bottom.active .inner, #header_bottom.hidden.active .inner {
  }

  #header .head_site_menu img {
    /*mix-blend-mode: luminosity;*/
  }

.header_search_box .search_cate_btn,
.header_search_box .search_box input {
    background-color: var(--color-sightjack-01) !important;
  }
 
  #header_bottom .header_search_box .search_cate_btn {
    border-right-color: #fff;
  }

  .header_search_box .search_cate_list .btn_all_cate span {
    background: var(--color-sightjack-05);
  }

.header_search_box .search_cate_list ul {
    background: #fff !important;
  }

  #header .header_nav > dl > dt {
    color: var(--color-sightjack-02);
  }

  #header .header_nav .header_nav_list > li.sp_menu_acc .sp_menu_acc_btn::before {
    mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234%22%20height%3D%2231%22%20viewBox%3D%220%200%2034%2031%22%3E%0A%20%20%3Cpath%20id%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2_1%22%20data-name%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2%201%22%20d%3D%22M14.37%2C4.8a3%2C3%2C0%2C0%2C1%2C5.261%2C0L31.564%2C26.558A3%2C3%2C0%2C0%2C1%2C28.933%2C31H5.067a3%2C3%2C0%2C0%2C1-2.63-4.442Z%22%20fill%3D%22%238ebd9b%22%2F%3E%0A%3C%2Fsvg%3E%0A');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: calc(34 * (100vw / 750)) calc(31 * (100vw / 750));
    background: var(--color-sightjack-02);
  }

  #header .header_nav .hotWords_list li a {
    border-color: var(--color-sightjack-05);
    color: var(--color-sightjack-05);
  }

  #header .header_nav .header_nav_utility > li > a {
    position: relative;
  }

  #header .header_nav_bottom {
    background: var(--color-sightjack-01);
  }

  #footer .footer_nav .footer_nav_ttl {
    color: var(--color-sightjack-02);
  }

}