@charset "UTF-8";

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

   サイトジャック用 CSS

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

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

:root {
  --color-sightjack-01: #fcf8f9;
  --color-sightjack-02: #a7be9c;
  --color-sightjack-03: #b7ccac;
  --color-sightjack-04: #FFC600;
  --color-sightjack-05: #daa6ac;
  --color-sightjack-06: #f1e3e4;
  --color-sightjack-07: #e5c7cb;
  --color-sightjack-08: #fcf5f7;
}

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

#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: #769d64;
  content: "";
}

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

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

#CartDrawer .drawer__header {
  background-color: var(--color-sightjack-07);
  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 {
    padding-top: 1rem;
    background: var(--color-sightjack-08) !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 {
    color: #fff;
    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-08) !important;
  }

  #header .header_inner .hamburger {
    background-color: #e2b7bc;
  }

  #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: var(--color-sightjack-06);
  }

  #header.scroll #header_bottom.active .inner, #header_bottom.hidden.active .inner {
    background: var(--color-sightjack-06);
  }

  #header .sp_menu_search {
    background: var(--color-sightjack-06);
  }

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

  #header_bottom .header_search_box .search_cate_btn {
    border-right-color: var(--color-sightjack-06);
  }

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

  #header .header_nav .hotWords_list li a {
    border-color: var(--color-sightjack-07);
    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);
  }

  #footer .footer_site_menu {
    background: var(--color-sightjack-08);
  }

}