﻿@charset "UTF-8";

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

   サイトジャック用 CSS

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

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

:root {
  --color-primary: #009a64;
  --color-sightjack-main: #009a64;/*メインカラー*/
  --color-sightjack-main2: #f5dd85;/*メインカラー2*/
  --color-sightjack-main3: #8d7ce4;/*メインカラー3*/
  --color-sightjack-sub: #B1CFE5;/*サブカラー*/
  --color-sightjack-txt_cart: #5371A5;/*カート数・ハンバーガー線*/
  --color-sightjack-txt_header: #fff;/*ヘッダー帯内の文字色*/
  --color-sightjack-bg_header: #5371A5;/*ヘッダー帯背景色*/
  --color-sightjack-bg_cart: #5371A5;/*カート周り背景色*/
  --color-sightjack-bg_search: #FFE94D;/*検索窓の背景色*/
  --color-sightjack-bg_obi: #5371A5;/*テキスト帯バナーの背景色*/
  --color-sightjack-bg_special: #5371A5;/*メインビジュアル・特設バナー背景色*/
}

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

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

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

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

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

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

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

#header .header_logo a {
}

#header .header_logo img {
}

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

#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: #eb6101;
  color: #fff;
}

.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 .menu_contents {
    background-color: #f5dd85 !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: #f5dd85 !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-main);
    font-weight: bold;
    color: #fff;
  }

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

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

  #header .header_logo {
  }

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

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

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

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

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

  #header_bottom .inner {
  }

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

  #header .head_site_menu img {
  }

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

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

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

  #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-main);
  }

  #header .header_nav .hotWords_list li a {
    border-color: #20722c;
    color: #20722c;
  }

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

}

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

.top_mainvisual_section,
#Contents .top_special_section,
.top_mainvisual_section {
  background: var(--color-sightjack-main2);
}

/* MV
---------------------------------- */

.top_mainvisual_section {
  margin-bottom: 0 !important;
  padding-bottom: 6.5rem;
}

.top_mainvisual_section .swiper-pagination-bullet-active {
  background-color: var(--color-sightjack-main);
}

.top_mainvisual_section .swiper-pagination {
  bottom: 3.5rem;
}

/* 特設バナー
---------------------------------- */

#Contents .top_special_section .top_special_wrap {
}

#Contents .top_special_section {
  position: relative;
  z-index: 2;
  padding-top: 0;
  padding-bottom: 0;
}

#Contents .top_special_section .top_section__inner {
  width: 88rem;
  max-width: 100%;
  position: relative;
  line-height: 0;
  padding-top: 0;
}

#Contents .top_special_section .top_section__inner a {
  position: relative;
  z-index: 10;
}

#Contents .top_special_section .top_section__inner a:hover {
  opacity: 1;
}


/* ボタン
---------------------------------- */

.top_btn_area {
  display: flex;
  justify-content: center;
  gap: 4rem;
  padding: 1rem 0 5rem;
}

.top_btn_area p {
  width: 36rem;
}

.top_btn_area a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #019a64;
  height: 6.5rem;
  border-radius: 30rem;
  box-shadow: 3px 5px 0 rgba(0, 0, 0, 0.16);
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.08em;
}

.top_btn_area a span {
  display: inline-block;
  padding: 0.5rem 0 0.5rem 4rem;
  background: url(../../Contents/ImagesPkg/sightjack/250903/icn_arw.svg) no-repeat left center;
  background-size: 2.5rem;
}

/* スライダー
---------------------------------- */
.top_special_slider ul {
  list-style: none;
  margin: 0;
  padding: 0 0 6rem;
}

.top_special_slider li {
  display: none;
  padding: 0 2rem;
}

.top_special_slider li.slick-slide,
.top_special_slider li:first-child {
  display: block;
}

.top_special_slider img {
  width: 40rem;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* TODAYS EVENT
---------------------------------- */

/* -- クーポンコード -- */
.todays_coupon_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.8rem 0 0;
  font-size: 1.4rem;
  font-weight: bold;
}

.todays_coupon_wrap dt {
  padding-right: 1.2rem;
}

.todays_coupon_wrap dd {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
}

.todays_coupon_wrap .coupon_code {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 1.4rem;
  background: #fff;
  border-radius: .4rem 0 0 .4rem;
  font-size: 1.6rem;
}

.todays_coupon_wrap .coupon_copy {
  transition: all;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 1.4rem;
  background: var(--color-sightjack-main2);
  border-radius: 0 .4rem .4rem 0;
  font-size: 1.2rem;
  color: #000;
  letter-spacing: 0.02em;
  cursor: pointer;
}

/* ---- 商品をさがす ---- */

.top_special_event {
  position: relative;
  background-color: var(--color-sightjack-main);
}

.top_special_event::before {
  position: absolute;
  bottom: -12rem;
  left: 19rem;
  width: 10rem;
  height: 13rem;
  background: url(../../Contents/ImagesPkg/sightjack/250903/icn_03.svg) no-repeat;
  background-size: 100%;
  content: "";
  z-index: 2;
}

.top_special_event::after {
  position: absolute;
  bottom: -7rem;
  left: -4rem;
  width: 26rem;
  height: 15rem;
  background: url(../../Contents/ImagesPkg/sightjack/250903/icn_05.svg) no-repeat;
  background-position: 0 -5rem;
  background-size: 100%;
  content: "";
  z-index: 2;
}

.top_special_event > .top_section__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  width: 110rem;
  max-width: 100%;
}

.top_special_event .top_section__inner::before {
  position: absolute;
  top: -4rem;
  right: -8rem;
  width: 11rem;
  height: 13rem;
  background: url(../../Contents/ImagesPkg/sightjack/250903/icn_01.svg) no-repeat;
  background-size: 100%;
  content: "";
  z-index: 2;

}

.top_special_product {
  position: relative;
  width: 52rem;
  padding: 4rem 0 4rem 3rem;
}

.top_special_product::before {
  position: absolute;
  top: 3rem;
  left: 0;
  bottom: 3rem;
  border-left: 2px solid #fff;
  content: "";
}

.top_special_event .top_special_product .ttl_section {
  padding-bottom: 2rem;
  font-size: 2.3rem;
}

.top_special_product ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.8rem 1.2rem;
}

.top_special_product ul li {
  overflow: hidden;
  width: 31%;
  margin: 0;
  padding: 0;
  border-radius: 1.3rem;
  background: #fff;
  font-size: 1.4rem;
  font-weight: bold;
}

.top_special_product ul li a {
  display: block;
  position: relative;
  z-index: 0;
  height: 6.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  background-color: #fff;
  text-align: center;
  font-size: 1.6rem;
}

.top_special_product ul li .txt_sm {
  font-size: 0.9em;
}

.top_special_product .product_cate a::before,
.top_special_product .product_brand a::before,
.top_special_product .product_ranking a::before {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--color-sightjack-main);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center 1.9rem;
  -webkit-mask-size: 3.2rem;
  content: "";
}

.top_special_product .product_brand a::before {
  mask-image: url(../../Contents/ImagesPkg/common/icn_nav_brand.svg?240130);
}

.top_special_product .product_cate a::before {
  mask-image: url(../../Contents/ImagesPkg/common/icn_cate_skincare.svg);
}

.top_special_product .product_ranking a::before {
  mask-image: url(../../Contents/ImagesPkg/common/icn_nav_ranking.svg);
}

/* ---- TODAYS EVENT ---- */

.top_special_todays {
  width: 52.8rem;
  padding: 4rem 2.5rem 4rem 0;
}

.top_special_event .top_special_todays .ttl_section {
  position: relative;
  font-size: 2.4rem;
  padding-bottom: 2rem;
}

.top_special_event .top_special_todays .ttl_section::before {
  position: absolute;
  bottom: -1rem;
  left: 41rem;
  width: 8rem;
  height: 10rem;
  background: url(../../Contents/ImagesPkg/sightjack/250903/icn_02.svg) no-repeat;
  background-size: 100%;
  content: "";
  z-index: 2;
}

.top_special_event .top_special_todays .top_special_list {
  overflow: hidden;
}

.top_special_event .top_special_point {
  display: block;
  margin: 0 auto 4.5rem;
  padding: 1.3rem 0;
  text-align: center;
  line-height: 1.5 !important;
  font-size: 1.4rem;
  border: 3px solid #ffc1ff;
  border-radius: 0.8rem;
  background: #ffe7ff;
  letter-spacing: 0.03em;
}

.top_special_event .top_special_point .txt_obi {
  padding: 0 1rem 0 0;
  color: #ee25ef;
  font-size: 1.5rem;
  font-weight: bold;
}

.top_special_event .top_special_point .item_list__cicon {
  display: inline-block;
  vertical-align: 0.2rem;
  line-height: 1;
  margin-left: 0.5rem;
}

.top_special_event .top_special_point .item_list__cicon .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 2.2rem;
  margin: 0 .1rem;
  padding: 0.2rem 0.8rem;
  background: #ebfe9a;
  border-radius: 1rem 0 1rem 0;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.4;
}

.top_special_event .top_special_point .item_list__cicon .icon.icon09 {
  background-color: #ed7553;
  color: #fff;
}

/* ---- クーポンなし ---- */

.top_special_event.coupon_none .top_special_todays {
  display: none;
}

.top_special_event.coupon_none .top_special_product {
  width: 100%;
  padding: 4rem 0 6rem;
  border: none;
}

.top_special_event.coupon_none .top_special_product::before {
  display: none;
}

.top_special_event.coupon_none .top_special_product ul li {
  width: 15.6%;
}


/* スケジュール
---------------------------------- */
.top_special_schedule {
  background: var(--color-sightjack-main2);
}

.top_special_schedule .top_section__inner {
  max-width: 100%;
  margin: auto;
  padding: 5rem 0;
}

.live_schedule {
  background: var(--color-sightjack-main3);
  width: 85rem;
  max-width: 100%;
  margin: 0 auto;
  border: solid var(--color-sightjack-main3) calc(5 * 60rem / 430);
  border-radius: 1.8rem;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.16);
}

.live_schedule_title {
  padding: 1rem;
  font-size: 2.3rem;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.07em;
  color: #fff;
}

.live_schedule_content {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 1.2rem 1.2rem;
  background-color: #fff;
  letter-spacing: 0.05em;
}

.live_schedule__txt {
  flex: 1;
  padding: 2rem 3rem 2rem 3rem;
  font-size: 1.5rem;
}

.live_schedule__txt > p {
  margin: 2rem 0 0;
  padding: 2rem 0 0;
  line-height: 1.8;
  border-top: 1px solid #d7d6d1;
}

.live_schedule__txt > p:first-child {
  margin-top: 0;
  padding-top: 0;
  border: none;
}

.live_schedule__txt .txt_name {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
  padding-left: 10rem;
  font-size: 1.6rem;
  font-weight: bold;
}

.pc_sp_column .txt_name {
  margin-bottom: 0.2rem;
}

.live_schedule__txt .txt_name .txt_time {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  margin-right: 1rem;
  border-radius: 20rem;
  background: #EC2B64;
  padding: 0.1rem 1.3rem;
  color: #fff;
}

.live_schedule__img {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  min-width: 20rem;
  padding: 2rem 2rem 2rem 0;
}

.live_schedule__img p {
  text-align: center;
}

.live_schedule__img p span {
  display: block;
  margin: auto;
}

.live_schedule__img img {
  width: 13rem;
  height: 13rem;
  border-radius: 100%;
  object-fit: cover;
  overflow: hidden;
  object-position: top;
}

.live_schedule__img .full_thumb img {
  width: auto;
  border-radius: 1.2rem;
}

/* -- Only Style -- */
.live_schedule.only_style {
  width: 74rem;
}

.live_schedule.only_style .live_schedule__txt {
  flex: none;
}

/* -- 日付ごとの調整 -- */
.pc_sp_column .txt_name {
  padding-left: 0;
}

.pc_sp_column .txt_name .txt_time {
  display: inline-block;
  position: inherit;
  top: inherit;
  left: inherit;
}

.pc_sp_column .txt_name .txt_gust {
  display: block;
  padding-top: 1rem;
}



/* ランキング
---------------------------------- */
.top_special_section01 {
  position: relative;
}

.top_special_section01::before {
  position: absolute;
  bottom: 46rem;
  right: -2rem;
  width: 41rem;
  height: 50rem;
  background: url(../../Contents/ImagesPkg/sightjack/250903/bg_ranking_2.svg) no-repeat;
  background-size: 100%;
  content: "";
  z-index: 0;
}

.top_special_section01::after {
  position: absolute;
  bottom: -11rem;
  left: -7rem;
  width: 33rem;
  height: 34rem;
  background: url(../../Contents/ImagesPkg/sightjack/250903/icn_06.svg) no-repeat;
  background-size: 100%;
  content: "";
  z-index: 0;
}

.top_special_section01 .top_section__inner {
  position: relative;
  width: 110rem;
  max-width: 100%;
  margin: auto;
}

.top_special_section01 .ttl_section {
  padding-bottom: 4rem;
  text-align: left;
  line-height: 1.4;
  text-transform: inherit;
}

.top_special_section01 .ttl_section span {
  display: inline;
}

.top_special_section01 .ttl_section .txt_sm {
  font-size: 2rem;
  font-weight: normal;
}

/* ---- ランキングパーツ ---- */

.top_special_ranking {
  margin-top: 0;
  padding-top: 4rem;
  padding-bottom: 3rem;
  border-top: 1px solid #f5f5f5;
}

.top_special_section01 .top_special_ranking {
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.top_special_section01 .top_special_ranking:first-child {
  position: relative;
  border-top: none;
}

.top_special_section01 .top_special_ranking:first-child::before {
  position: absolute;
  top: -8rem;
  right: -7rem;
  width: 18rem;
  height: 21rem;
  background: url(../../Contents/ImagesPkg/sightjack/250903/icn_04.svg) no-repeat;
  background-size: 100%;
  content: "";
  z-index: 2;
  transform: rotate(11deg);
}

.top_special_ranking .icn_rank {
  display: none;
}

.top_special_section .js_item_slider .slick-dots .slick-active button,
.top_special_section .js_item_slidebar .simplebar-scrollbar::before {
  background: #6e6e6e;
}

.top_special_section .js_item_slider .slick-dots {
  margin-top: -0.5rem;
  padding-top: 0;
}

/* ---- バナー ---- */

.top_special_section01 .top_special_wrap {
  width: 75rem;
  max-width: 100%;
  margin: auto;
}

/* RANKING
---------------------------------- */
.ranking_section .ranking_list .item_list__item {
  background-color: var(--color-primary);
}


/* ベネント
---------------------------------- */
.BenentSnap_section,
.BenentVideo_section {
  background: none;
}

#BenentSnap {
  padding-top: 10rem;
}

#BenentSnap .top_section__inner .section_head,
#BenentSnap .top_section__inner .section_head .ttl_section {
  position: relative;
}

#BenentSnap .top_section__inner .section_head::before {
  position: absolute;
  top: -4rem;
  left: -8rem;
  width: 34rem;
  height: 25rem;
  background: url(../../Contents/ImagesPkg/sightjack/250903/bg_ranking.svg) no-repeat;
  background-size: 100%;
  content: "";
  z-index: 0;
}

#BenentSnap .top_section__inner .section_head::after {
  position: absolute;
  top: -9rem;
  right: 10%;
  width: 17rem;
  height: 25rem;
  background: url(../../Contents/ImagesPkg/sightjack/250903/icn_04.svg) no-repeat;
  background-size: 100%;
  content: "";
  z-index: 0;
  transform: rotate(11deg);
}

#BenentSnap .top_section__inner .section_head .ttl_section::after {
  position: absolute;
  top: 7rem;
  right: 4%;
  width: 13rem;
  height: 20rem;
  background: url(../../Contents/ImagesPkg/sightjack/250903/icn_04.svg) no-repeat;
  background-size: 100%;
  content: "";
  z-index: 2;
  transform: rotate(26deg);
}

#BenentVideo {
  display: none !important;
}

#BenentLive {
  margin-top: 0;
}


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

  .top_marquee {
    margin-top: 6rem;
  }
}

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


  /* ---- セクション余白 ---- */

  #Contents .top_special_section{
    padding: 0;
  }

  /* -- セクション色付け化 -- */

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

  /* MV
  ---------------------------------- */

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

  .top_mainvisual_section .swiper-pagination-bullet-active {
    background-color: var(--color-sightjack-main);
  }

  .top_mainvisual_section .swiper-pagination {
    bottom: calc(30 * (100vw / 390));
  }

  /* 特設バナー
  ---------------------------------- */

  #Contents .top_special_section .top_special_wrap {
  }

  #Contents .top_special_section {
  }

  #Contents .top_special_section .top_section__inner {
    width: 100%;
  }

  /* ボタン
  ---------------------------------- */

  .top_btn_area {
    flex-direction: column;
    gap: calc(15 * (100vw / 428));
    padding: 0 calc(15 * (100vw / 428)) calc(30 * (100vw / 428));
  }

  .top_btn_area p {
    width: auto;
  }

  .top_btn_area a {
    height: calc(65 * (100vw / 428));
    font-size: calc(18 * (100vw / 428));
  }

  .top_btn_area a span {
    padding: calc(4 * (100vw / 428)) 0 calc(5 * (100vw / 428)) calc(40 * (100vw / 428));
    background-size: calc(25 * (100vw / 428));
  }

  /* スライダー
  ---------------------------------- */
  .top_special_slider ul {
    padding: 0 0 calc(25 * (100vw / 428));
  }

  .top_special_slider li {
    padding: 0 calc(10 * (100vw / 428));
  }

  .top_special_slider img {
    width: calc(280 * (100vw / 428));
  }

  /* TODAYS EVENT
  ---------------------------------- */

  /* ---- 商品をさがす ---- */

  .top_special_event {
  }

  .top_special_event::before {
    top: auto;
    bottom: calc(-47 * (100vw / 428));
    left: calc(113 * (100vw / 428));
    width: calc(54 * (100vw / 428));
    height: calc(62 * (100vw / 428));
  }

  .top_special_event::after {
    left: calc(-15 * (100vw / 428));
    bottom: calc(-70 * (100vw / 428));
    width: calc(130 * (100vw / 428));
    height: calc(80 * (100vw / 428));
    background-position: 0 calc(-20 * (100vw / 428));
  }

  .top_special_event .top_section__inner::before {
    top: calc(-21 * (100vw / 428));
    right: calc(-10 * (100vw / 428));
    width: calc(60 * (100vw / 428));
    height: calc(71 * (100vw / 428));
  }

  .top_special_event .top_section__inner::after {
    bottom: calc(-47 * (100vw / 428));
    left: calc(99 * (100vw / 428));
    width: calc(51 * (100vw / 428));
    height: calc(57 * (100vw / 428));
  }

  .top_special_event .top_special_todays .ttl_section::before {
    bottom: calc(2 * (100vw / 428));
    left: calc(-21 * (100vw / 428));
    width: calc(48 * (100vw / 428));
    height: calc(50 * (100vw / 428));
  }

  .top_special_event > .top_section__inner {
    display: block;
  }

  .top_special_event .top_section__inner .section_head {
    padding-right: 0;
    padding-left: 0;
  }

  .top_special_event .top_special_product {
    width: auto;
    padding: calc(25 * (100vw / 755)) calc(0 * (100vw / 428)) calc(50 * (100vw / 755));
  }

  .top_special_event .top_special_product::before {
    display: none;
  }

  .top_special_event .top_special_product .ttl_section {
    padding-bottom: calc(10 * (100vw / 755));
    font-size: calc(20 * (100vw / 428));
  }

  .top_special_event .top_special_product ul {
    gap: calc(15 * (100vw / 755));
  }

  .top_special_event .top_special_product ul li {
    width: 31.8%;
    border-radius: calc(18 * (100vw / 755));
    font-size: calc(22 * (100vw / 755));
    letter-spacing: 0.01em;
  }

  .top_special_product ul li a {
    font-size: calc(23 * (100vw / 755));
  }

  .top_special_event .top_special_product ul li a {
    padding: calc(25 * (100vw / 755)) 0;
  }

  .top_special_event .top_special_product ul li .txt_sm {
    font-size: calc(18 * (100vw / 755));
  }

  .top_special_event .top_special_product .product_cate a::before,
  .top_special_event .top_special_product .product_brand a::before,
  .top_special_event .top_special_product .product_ranking a::before {
    -webkit-mask-position: center calc(24 * (100vw / 755));
    -webkit-mask-size: calc(58 * (100vw / 755));
  }

  /* ---- クーポンなし ---- */

  .top_special_event.coupon_none .top_special_product {
    position: relative;
    padding: calc(40 * (100vw / 755)) calc(0 * (100vw / 428)) calc(50 * (100vw / 755));
  }

  .top_special_event.coupon_none .top_special_product::before {
    display: block;
    position: absolute;
    top: calc(5 * (100vw / 428));
    left: calc(-21 * (100vw / 428));
    width: calc(48 * (100vw / 428));
    height: calc(50 * (100vw / 428));
    background: url(../../Contents/ImagesPkg/sightjack/250903/icn_02.svg) no-repeat;
    background-size: 100%;
    content: "";
    z-index: 2;
  }

  .top_special_event.coupon_none .top_special_product ul li {
    width: 31.8%;
  }

  /* ---- TODAYS EVENT ---- */

  .top_special_todays {
    width: auto;
    padding: calc(35 * (100vw / 755)) 0 0;
  }

  .top_special_event .top_special_todays .ttl_section {
    padding-bottom: calc(10 * (100vw / 755));
    font-size: calc(22 * (100vw / 428));
  }

  .top_special_event .top_special_todays .top_special_list {
    overflow: hidden;
  }

  .top_special_event .top_special_point {
    width: auto;
    margin: calc(14*(100vw / 428)) calc(-1*(100vw / 428)) calc(25*(100vw / 428));
    padding: calc(10*(100vw / 428)) 0;
    line-height: 1.8 !important;
    font-size: calc(14*(100vw / 428));
    border-radius: 0;
    letter-spacing: 0.02em;
  }

  .top_special_event .top_special_point .txt_obi {
    display: block;
    padding: 0 0 calc(5 * (100vw / 755));
    font-size: calc(28 * (100vw / 755));
  }

  .top_special_event .top_special_point .item_list__cicon {
    vertical-align: 0.2rem;
    margin-left: calc(5 * (100vw / 755));
  }

  .top_special_event .top_special_point .item_list__cicon .icon {
    height: calc(22*(100vw / 390));
    margin: 0 calc(1*(100vw / 390));
    padding: calc(2*(100vw / 390)) calc(7*(100vw / 390));
    border-radius: calc(10*(100vw / 390)) 0 calc(10*(100vw / 390)) 0;
    font-size: calc(12*(100vw / 390));
  }

  /* -- クーポンコード -- */

  .todays_coupon_wrap {
    padding: calc(10*(100vw / 375)) 0 0;
    font-size: calc(15*(100vw / 375));
  }

  .todays_coupon_wrap dt {
    padding-right: calc(15*(100vw / 375));
  }

  .todays_coupon_wrap dd {
    height: calc(30*(100vw / 375));
  }

  .todays_coupon_wrap .coupon_code {
    padding: 0 calc(17*(100vw / 375));
    border-radius: calc(4*(100vw / 375)) 0 0 calc(4*(100vw / 375));
    font-size: calc(15*(100vw / 375));
  }

  .todays_coupon_wrap .coupon_copy {
    padding: 0 calc(9*(100vw / 375));
    border-radius: 0 calc(4*(100vw / 375)) calc(4*(100vw / 375)) 0;
    font-size: calc(12*(100vw / 375));
  }


  /* スケジュール
  ---------------------------------- */
  .top_special_schedule {
  }

  .top_special_schedule .top_section__inner {
    padding: calc(50*(100vw / 375)) calc(15*(100vw / 375));
  }

  .live_schedule {
    width: auto;
    border-radius: calc(13*(100vw / 375));
  }

  .live_schedule_title {
    padding: calc(13 * (100vw / 375)) calc(10 * (100vw / 375));
    font-size: calc(16.5 * (100vw / 375));
    letter-spacing: 0.02em;
  }

  .live_schedule_content {
    flex-direction: column;
    border-radius: 0 0 calc(12*(100vw / 375)) calc(12*(100vw / 375));
  }

  .live_schedule__txt {
    width: calc(100% - 30*(100vw / 375));
    padding: calc(15*(100vw / 375)) 0 0;
    font-size: calc(13*(100vw / 375));
  }

  .live_schedule__txt > p {
    margin: calc(15*(100vw / 375)) 0 0;
    padding: calc(15*(100vw / 375)) 0 0;
    line-height: 1.6;
  }

  .live_schedule__txt > p:first-child {
  }

  .live_schedule__txt .txt_name {
    margin-bottom: calc(8*(100vw / 375));
    padding-left: calc(90*(100vw / 375));
    font-size: calc(14*(100vw / 375));
  }

  .pc_sp_column .txt_name {
    margin-bottom: calc(4*(100vw / 375));
  }

  .live_schedule__txt .txt_name .txt_time {
    top: calc(-2*(100vw / 375));
    margin-right: calc(10*(100vw / 375));
    padding: calc(1*(100vw / 375)) calc(13*(100vw / 375));
  }

  .live_schedule__img {
    gap: calc(30*(100vw / 375));
    min-width: calc(80*(100vw / 375));
    padding: calc(20*(100vw / 375));
    font-size: calc(12*(100vw / 375));
  }

  .live_schedule__txt .live_schedule__img {
    padding-bottom: 0;
  }

  .live_schedule__img p {
  }

  .live_schedule__img p .txt_sm {
    display: inline-block;
    padding-top: calc(1*(100vw / 375));
  }

  .live_schedule__img img {
    width: calc(100*(100vw / 375));
    height: calc(100*(100vw / 375));
  }

  .live_schedule__img .full_thumb img {
    width: 85%;
    height: auto;
    border-radius: calc(8*(100vw / 375));
  }

  /* -- Only Style -- */
  .live_schedule.only_style {
    width: auto;
  }

  /* -- 日付ごとの調整 -- */
  .pc_sp_column .txt_name,
  .sp_only_column .txt_name {
    padding-left: 0;
  }

  .sp_only_column .txt_name .txt_time,
  .pc_sp_column .txt_name .txt_time {
    display: inline-block;
    position: inherit;
    top: inherit;
    left: inherit;
  }

  .sp_only_column .txt_name .txt_gust,
  .pc_sp_column .txt_name .txt_gust {
    display: block;
  }

  .sp_only_column .txt_name .txt_gust,
  .pc_sp_column .txt_name .txt_gust {
    padding-top: calc(10*(100vw / 375));
  }

  .data_0908 .live_schedule__img {
    padding-top: 0;
  }




  /* ランキング
  ---------------------------------- */
  .top_special_section01 {
  }

  .top_special_section01::before {
    bottom: calc(440*(100vw / 375));
    right: calc(-20 * (100vw / 375));
    width: calc(150*(100vw / 375));
    height: calc(73*(100vw / 375));
    background-position: bottom;
  }

  .top_special_section01::after {
    bottom: calc(-70 * (100vw / 375));
    left: calc(-24 * (100vw / 375));
    width: calc(170 * (100vw / 375));
    height: calc(62 * (100vw / 375));
    background-image: url(../../Contents/ImagesPkg/sightjack/250903/icn_06_sp.svg);
  }

  .top_special_section01 .ttl_section {
    margin-bottom: 0;
    padding-bottom: calc(20*(100vw / 375));
    font-size: calc(20*(100vw / 375));
  }

  .top_special_section01 .ttl_section .txt_sm {
    font-size: calc(15*(100vw / 375));
  }

  /* ---- ランキングパーツ ---- */

  .top_special_ranking {
    padding-top: calc(40*(100vw / 375));
    padding-bottom: calc(30*(100vw / 375));
  }

  .top_special_section01 .top_special_ranking {
    padding-top: calc(20*(100vw / 375));
    padding-bottom: calc(10*(100vw / 375));
  }

  .top_special_section01 .top_special_ranking:first-child::before {
    top: calc(-26 * (100vw / 375));
    right: calc(-20 * (100vw / 375));
    width: calc(94 * (100vw / 375));
    height: calc(94 * (100vw / 375));
  }

  .top_special_section .js_item_slider .slick-dots {
    margin-top: calc(-0.5*(100vw / 375));
    padding-top: 0;
  }

  .top_special_ranking .item_list_common .item_list__item {
    padding-bottom: 0;
  }

  /* ---- バナー ---- */

  .top_special_section01 .top_special_wrap {
    width: auto;
  }

  .top_marquee {
    margin-top: calc(155 * (100vw / 750));
  }

  /* ベネント
  ---------------------------------- */

  #BenentSnap {
    padding-top: calc(110 * (100vw / 750));
  }

  #BenentSnap .top_section__inner .section_head::before {
    top: calc(195 * (100vw / 750));
    left: calc(-71 * (100vw / 750));
    width: calc(300 * (100vw / 750));
    height: calc(259 * (100vw / 750));
  }

  #BenentSnap .top_section__inner .section_head::after {
    top: calc(-60 * (100vw / 750));
    right: calc(39 * (100vw / 750));
    width: calc(140 * (100vw / 750));
    height: calc(150* (100vw / 750));
  }

  #BenentSnap .top_section__inner .section_head .ttl_section::after {
    top: calc(103 * (100vw / 750));
    right: calc(-15 * (100vw / 750));
    width: calc(104 * (100vw / 750));
    height: calc(106 * (100vw / 750));
  }



}
