/* ===============================================
  * COMMON *
=============================================== */
.totalTop .c-block {
  padding-top: var(--section-pt, 0);
  padding-bottom: var(--section-pb, 0);
}
.totalTop .block__ttl {
  font-family: var(--hirakaku);
}
.totalTop :is(
  .c-block .block__ttlInner,
  .c-block-linkArea,
  .c-block-categoryList .c-block-categoryList__slider,
  .c-block-categoryList .categoryTree,
  .c-block-feature-totaltop .topics__inner,
  .c-block-campaign .campaignlist-wrap,
  .c-block-ranking .ranking-category,
  .c-block-ranking .ranking_inner,
  .c-block-history .history__inner,
  .c-block-liveArea-totaltop .liveStreaming__inner,
  .c-block-snap .snap__inner,
  .c-block-allBrand .brandlist,
  .c-block-news .newslist,
  .c-block-news .btn-inner
) {
  width: var(--section-width, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-px, 0);
  padding-right: var(--section-px, 0);
}
.totalTop .c-block-liveArea-totaltop {
  --section-pb: 0;
}
.c-block .block__ttlInner {
  margin-bottom: var(--heading-mb, 0);
  text-align: left;
}
/* ボタンの配置 */
.button--position--center {
  margin: 0 auto;
}

/* ===============================================
    * SEARCH *
=============================================== */
.search-section .c-searchBox {
  margin: 0 auto;
}

/* ===============================================
    * MV *
=============================================== */

/* ===============================================
    * BNR AREA *
=============================================== */
.c-block-bnrArea-totaltop {
  width: 100%;
}
.c-block-bnrArea-totaltop img {
  width: 100%;
  height: auto;
}

/* ===============================================
    * Link Area *
=============================================== */
.c-block-linkArea .linkArea-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.c-block-linkArea .linkArea-list a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: 1px solid var(--dhusar-grey);
  border-radius: 4px;
}
.c-block-linkArea .linkArea-list svg {
  flex-shrink: 0;
  aspect-ratio: 1;
}

/* ===============================================
    * Category Area *
=============================================== */
/* その他のカテゴリ */
.categoryTree .categoryTree-ttl__inner {
  position: relative;
  border-bottom: 1px solid var(--black);
}
.button-accordion {
  position: absolute;
  top: 0;
  right: calc(6 * (100vw / 750));
}
.open__button--plus {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--quattrocento-sans);
  line-height: 1;
}
.open__button--plus::before {
  z-index: 2;
  position: absolute;
  margin: auto;
  content: '';
  transition: all 0.4s ease-out;
  background-color: #fff;
  transform: rotate(90deg);
}
.open__button--plus::after {
  z-index: 2;
  position: absolute;
  margin: auto;
  content: '';
  transition: all 0.4s ease-out;
  background-color: #fff;
}
.open__button--plus.open__button--minus::before {
  transform: rotate(0deg);
}
.open__button--plus.open__button--minus::after {
  background-color: transparent;
}
.accordion_contents {
  display: none;
}
.accordion_wapper {
  margin: 0 auto;
}

/* ===============================================
    * Feature *
=============================================== */
.c-block-feature-totaltop {
  width: 100%;
  margin: 0 auto;
}
.c-block-feature-totaltop .cardUnit {
  display: grid;
}
.c-block-feature-totaltop .brandName {
  font-family: var(--quattrocento-sans);
  line-height: 1.3;
  text-align: center;
  font-weight: bold;
}

/* ===============================================
    * CAMPAIGN *
=============================================== */
.c-block-campaign .campaignlist-item a {
  display: block;
}
.c-block-campaign .campaignlist-item img {
  width: 100%;
  height: auto;
}

/* ===============================================
    * ランキング *
=============================================== */
.c-block-ranking.bg_white-solid {
  margin-bottom: 0;
}
/* * 最近チェックしたアイテム * */
.c-block-history {
  --section-pt: 0;
  --history-item-count: 10;
}
.c-block-history .history__item a {
  display: block;
}
.c-block-history .history__item img {
  width: 100%;
  height: auto;
}

/* ===============================================
    * LIVE *
=============================================== */

/* ===============================================
    * SNAP *
=============================================== */
.c-block-snap .snap__list  {
  display: grid;
}
.c-block-snap .snap__item a  {
  display: block;
}
.c-block-snap .snap__item img  {
  width: 100%;
  height: auto;
}
.c-block-snap .snap__brandName {
  font-family: var(--quattrocento-sans);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
}

/* ===============================================
    * BRAND *
=============================================== */
.c-block {
  width: 100%;
  margin: 0 auto;
}
.brandlist {
  width: 100%;
}

/* ===============================================
    * NEWS *
=============================================== */
.c-block-news .newslist {
  margin-top: 0;
}


@media only screen and (max-width: 767px) {
  /* ===============================================
      * COMMON *
  =============================================== */
  .totalTop {
    --section-pt: calc(74 *(100vw / 750));
    --section-px: calc(20 *(100vw / 750));
    --section-pb: calc(80 *(100vw / 750));
    --heading-mb: calc(34 *(100vw / 750));
  }
  .totalTop .block__ttl {
    font-size: calc(36 *(100vw / 750));
  }
  .btn-inner {
    margin: calc(40 * (100vw / 750)) auto 0;
  }
  .visible_tablet-pc {
    display: none;
  }
  .btn-inner {
    margin-top: calc(40 * (100vw / 750));
  }

  /* ===============================================
      * SEARCH *
  =============================================== */
  .search-section {
    padding-top: calc(20 *(100vw / 750));
  }
  .search-section .c-searchBox {
    --searchBox-w: calc(710 *(100vw / 750));
  }
  .search-section .c-trendKeywords ul {
    --trendKeywords-ul-px: calc(20 *(100vw / 750));
    padding-top: calc(20 *(100vw / 750));
  }
  .search-section .c-trendKeywords a {
    --trendKeywords-a-px: calc(32 *(100vw / 750));
  }

  /* ===============================================
      * MV *
  =============================================== */
  .mainbanner .mainbanner__slider-slide {
    width: calc(660 *(100vw / 750));
    padding: 0 calc(10 *(100vw / 750));
  }
  .totalTop .mainbanner .slick-dots li {
    width: calc(14 *(100vw / 750));
    height: calc(14 *(100vw / 750));
    margin: 0 calc(12 *(100vw / 750));
  }
  .totalTop .mainbanner .slick-dots li button,
  .totalTop .mainbanner .slick-dots li button::before {
    width: calc(14 *(100vw / 750));
    height: calc(14 *(100vw / 750));
    padding: 0;
  }

  /* ===============================================
      * BNR AREA *
  =============================================== */
  .c-block-bnrArea-totaltop {
    --section-pt: calc(20 * (100vw / 750));
    --section-pb: calc(20 * (100vw / 750));
    padding-left: calc(20 * (100vw / 750));
    padding-right: calc(20 * (100vw / 750));
  }
  
  
  /* ===============================================
      * Link Area *
  =============================================== */
  .c-block-linkArea {
    --section-pt: calc(40 *(100vw / 750));
    --section-pb: 0;
    padding-left: calc(20 *(100vw / 750));
    padding-right: calc(20 *(100vw / 750));
  }
  .c-block-linkArea .linkArea-list {
    gap: calc(10 *(100vw / 750));
  }
  .c-block-linkArea .linkArea-list a {
    column-gap: calc(6 *(100vw / 750));
    height: calc(84 *(100vw / 750));
    padding: 0 calc(6 *(100vw / 750));
    font-size: calc(24 *(100vw / 750));
  }
  .c-block-linkArea .linkArea-list svg {
    width: calc(60 *(100vw / 750));
  }

  /* ===============================================
    * Category Area *
  =============================================== */
  .c-block-categoryList .c-block-categoryList__slider {
    --section-px: 0;
    --categorySlider-slider-px: calc(20 *(100vw / 750));
  }
  /* その他のカテゴリ */
  .categoryTree {
    margin-top: calc(64 *(100vw / 750));
  }
  .categoryTree .categoryTree-ttl__inner {
    padding-bottom: calc(34 *(100vw / 750));
  }
  .categoryTree-ttl {
    font-size: calc(30 *(100vw / 750));
    text-align: left;
    line-height: 1;
  }
  .open__button--plus {
    top: calc(-16 * (100vw / 750));
    width: calc(154 *(100vw / 750));
    height: calc(56 *(100vw / 750));
    padding-left: calc(9 *(100vw / 750));
    font-size: calc(28 *(100vw / 750));
    letter-spacing: .02em;
    border-radius: calc(8 *(100vw / 750));
  }
  .open__button--plus::before {
    top: 0;
    right: calc(16 *(100vw / 750));
    bottom: 0;
    width: calc(26 *(100vw / 750));
    height: calc(2 *(100vw / 750));
  }
  .open__button--plus::after {
    top: 0;
    right: calc(16 *(100vw / 750));
    bottom: 0;
    width: calc(26 *(100vw / 750));
    height: calc(2 *(100vw / 750));
  }
  .accordion_contents.items .header__hamburger-menu__list-item--link {
    height: calc(52 * (100vw / 375));
  }
  .accordion_contents.items .header__hamburger-menu__list-item--accordion .header__hamburger-menu__list-item--link {
    font-weight: 600;
  }
  .accordion_contents.items .header__hamburger-menu__list-item--accordion .accordion-icon {
    display: block;
    position: relative;
    right: calc(16 * (100vw / 375));
    width: 13px;
    height: 13px;
  }
  .accordion_contents.items .header__hamburger-menu__list-item--accordion__child-list--2 .header__hamburger-menu__list-item--link {
    padding-left: calc(80 * (100vw / 750));
    font-size: calc(30 * (100vw / 750));
    font-weight: 400;
    position: relative;
  }
  .accordion_contents.items .header__hamburger-menu__list-item--accordion__child-list--2 .header__hamburger-menu__list-item--link::after {
    content: "";
    display: block;
    position: absolute;
    right: calc(32 * (100vw / 750));
    top: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.498%22%20height%3D%2212.43%22%20viewBox%3D%220%200%207.498%2012.43%22%3E%20%3Cg%20transform%3D%22translate(-343%20-1302.059)%22%3E%20%3Cline%20x2%3D%226.69%22%20y2%3D%225.916%22%20transform%3D%22translate(343.404%201302.509)%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%2F%3E%20%3Cline%20y1%3D%226.102%22%20x2%3D%226.69%22%20transform%3D%22translate(343.404%201307.944)%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
    width: calc(14 * (100vw / 750));
    height: calc(24 * (100vw / 750));
    margin: auto;
    background-repeat: no-repeat;
    background-size: 100%;
  }

  /* ===============================================
      * Feature *
  =============================================== */
  .c-block-feature-totaltop .cardUnit {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(40 *(100vw / 750)) calc(20 *(100vw / 750));
  }
  .c-block-feature-totaltop .brandName {
    margin-top: calc(22 *(100vw / 750));
    font-size: calc(28 *(100vw / 750));
  }

  /* ===============================================
      * CAMPAIGN *
  =============================================== */
  .c-block-campaign .campaignlist-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .c-block-campaign .campaignlist {
    display: flex;
    align-items: flex-start;
    gap: calc(20 * (100vw / 750));
    width: max-content;
    padding: 0 calc(20 * (100vw / 750)) calc(24 * (100vw / 750));
  }
  .c-block-campaign .campaignlist-item {
    flex-shrink: 0;
    width: calc(320 *(100vw / 750));
  }

  /* ===============================================
      * ランキング *
  =============================================== */
  .c-block-ranking.bg_white-solid {
    --section-pb: calc(74 *(100vw / 750));
  }
  /* * 最近チェックしたアイテム * */
  .c-block-history .block__ttlInner,
  .c-block-history .history__inner {
    padding: 0 calc(20 * (100vw / 750));
  }
  .c-block-history .history__inner {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    margin-top: calc(34 *(100vw / 750));
  }
  .c-block-history .history__list {
    display: flex;
    align-items: flex-start;
    gap: calc(16 *(100vw / 750));
    width: max-content;
  }
  .c-block-history .history__item {
    flex-shrink: 0;
    width: calc(148 *(100vw / 750));
  }
  .c-block-history .history__item:nth-of-type(n+2) {
  }

  /* ===============================================
      * LIVE *
  =============================================== */

  /* ===============================================
      * SNAP *
  =============================================== */
  .c-block-snap .snap__list {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(30 *(100vw / 750)) calc(12 *(100vw / 750));
  }
  .c-block-snap .snap__brandName {
    margin-top: calc(12 *(100vw / 750));
    font-size: calc(24 *(100vw / 750));
  }

  /* ===============================================
      * BRAND *
  =============================================== */

  /* ===============================================
      * NEWS *
  =============================================== */
}

@media only screen and (min-width: 768px) {
  /* ===============================================
      * COMMON *
  =============================================== */
  .totalTop {
    --section-width: min(100%, 124rem);
    --section-pt: 8.6rem;
    --section-px: 2rem;
    --section-pb: 9rem;
    --heading-mb: 3.6rem;
  }
  .btn-inner {
    margin-top: 30px;
  }

  /* ===============================================
      * SEARCH *
  =============================================== */
  .search-section {
    padding-top: 2rem;
  }
  .search-section .c-searchBox {
    --searchBox-w: min(56rem, 560px);
  }
  .search-section .c-trendKeywords {
    width: min(100%, 1200px);
    margin: 0 auto;
  }
  .search-section .c-trendKeywords ul {
    --trendKeywords-ul-px: 1rem;
    padding-top: 30px;
  }
  .search-section .c-trendKeywords a {
    --trendKeywords-h: 3.2rem;
    --trendKeywords-a-px: 2rem;
    --trendKeywords-text: 1.3rem;
  }

  /* ===============================================
      * MV *
  =============================================== */

  /* ===============================================
      * BNR AREA *
  =============================================== */
  .c-block-bnrArea-totaltop {
    --section-pt: 5rem;
    --section-pb: 4.3rem;
  }
  
  /* ===============================================
      * Link Area *
  =============================================== */
  .c-block-linkArea {
    --section-width: min(100%, 109rem);
    --section-pt: 0;
    --section-pb: 0;
  }
  .c-block-linkArea .linkArea-list {
    gap: 1.5rem;
  }
  .c-block-linkArea .linkArea-list a {
    column-gap: .8rem;
    height: 5rem;
    padding: 0 1rem;
    font-size: 1.2rem;
  }
  .c-block-linkArea .linkArea-list svg {
    width: 3.8rem;
  }

  /* ===============================================
      * Category Area *
  =============================================== */
  .c-block-categoryList {
    --section-width: min(100%, 105rem);
  }
  /* その他のカテゴリ */
  .categoryTree {
    margin: 4.3rem auto 0;
  }
  .categoryTree-ttl__inner {
    padding-bottom: 2rem;
    margin: 0 auto;
    cursor: pointer;
    transition: all 1s;
  }
  .categoryTree-ttl {
    font-size: 2rem;
    text-align: center;
    font-weight: normal;
  }
  .categoryList .button-accordion {
    top: -0.4rem;
    right: 2.2rem;
  }
  .open__button--plus {
    top: 0;
    right: 0;
    width: 7.7rem;
    height: 2.8rem;
    padding-left: 0.9rem;
    border-radius: 4px;
    font-size: 1.4rem;
    letter-spacing: .01em;
    line-height: 2.8rem;
    cursor: pointer;
    transition: all 1s;
    opacity: 1;
  }
  .open__button--plus::before {
    top: 0;
    right: 0.8rem;
    bottom: 0;
    width: 1.3rem;
    height: 0.1rem;
  }
  .categoryList .open__button--plus::after {
    top: 0;
    right: 0.8rem;
    bottom: 0;
    width: 1.3rem;
    height: 0.1rem;
  }
  .categoryTree .accordion_wapper {
    margin-top: 3rem;
  }
  .categoryList .header__hover-content--category .header__hover-content__inner {
    overflow-y: visible;
    overscroll-behavior-y: auto;
    max-height: none;
  }

  /* ===============================================
      * Feature *
  =============================================== */
  .c-block-feature-totaltop .cardUnit {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 2rem;
  }
  .c-block-feature-totaltop .brandName {
    margin-top: 1.8rem;
    font-size: 1.5rem;
  }
  
  /* ===============================================
      * CAMPAIGN *
  =============================================== */
  .c-block-campaign .campaignlist {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  /* ===============================================
      * ランキング *
  =============================================== */
  .totalTop .c-block-ranking .ranking-category {
    --section-width: min(100%, 120rem);
  }
  .c-block-ranking.bg_white-solid {
    --section-pb: 8.6rem;
  }
  .c-block-ranking .ranking_inner {
    padding: 0;
  }
  /* * 最近チェックしたアイテム * */
  .c-block-history .history__list {
    display: grid;
    grid-template-columns: repeat(var(--history-item-count), 1fr);
    gap: 0.82rem;
  }

  /* ===============================================
      * LIVE *
  =============================================== */

  /* ===============================================
      * SNAP *
  =============================================== */
  .c-block-snap .snap__list {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.2rem;
  }
  .c-block-snap .snap__brandName {
    margin-top: 1.2rem;
    font-size: 1.2rem;
  }

  /* ===============================================
      * BRAND *
  =============================================== */

  /* ===============================================
      * NEWS *
  =============================================== */
  .c-block-news .block__ttlInner {
    --section-width: min(100%, 84rem);
  }
}