@charset "UTF-8";

/* ===============================================
  * Base *
=============================================== */

:root {
  /* Color */
  --bg-primary: #bdcee0;
  --textcolor-base: #000;
  --bg-cicon: #BDCEE0;

  /* Font Family */
  --sec-tittle-font: var(--ff-tt-commons-pro), serif;
  --font-title: var(--ff-tt-commons-pro), var(--ff-dnp-shuei-gothic-gin-std), sans-serif;
  --brandName-font: var(--ff-tt-commons-pro), var(--ff-dnp-shuei-gothic-gin-std), sans-serif;
  --font-cicon: var(--ff-dnp-shuei-gothic-gin-std);
  --font-soldout: var(--ff-tt-commons-pro), var(--ff-dnp-shuei-gothic-gin-std), sans-serif;

  /* Font Weight (fw = font-weight) */
  --fw-light: 200;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

body {
  font-family: var(--ff-dnp-shuei-gothic-gin-std), "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'Noto Sans JP', Meiryo, sans-serif;
}

#main .breadcrumbs{
  font-family: var(--ff-dnp-shuei-gothic-gin-std), "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'Noto Sans JP', Meiryo, sans-serif !important;
}

#main .breadcrumbs > ol > li:nth-of-type(2){
  text-transform:uppercase;
}


/* ===============================================
  * Utilities *
=============================================== */

.u-visually-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(0px 0px 99.9% 99.9%);
}

.u-hidden {
  display: none !important;
}




/* ===============================================
  * Header *
=============================================== */

#canal4cHeader .nav-list {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

#canal4cHeader .navList-inner__list {
  display: flex;
  justify-content: space-around;
}

#canal4cHeader .naviList .nav-list .naviList-inner.brandLogo.canal4c {
  width: 14.1rem;
}

#canal4cHeader .naviList .nav-list .naviList-inner.brandLogo.canal4c a {
  color: #33030f;
}

.naviList .nav-list .naviList-inner.brandLogo.canal4c svg {
  width: 100%;
  height: auto;
}

#canal4cHeader .userarea-inner {
  column-gap: 1rem;
}

@media (max-width: 767px) {
  #canal4cHeader #headMain .headLogo.headLogo-canal4c {
    width: 14.1rem;
  }
}

#canal4cHeader .naviList-inner-ttl {
  text-transform: uppercase;
}

.section-ttl_visumo {
  font-family: var(--font-title);
}

@media (min-width: 768px) and (max-width: 1500px) {
  #canal4cHeader {
    --items-column-gap: calc(20 / 1366 * 100vw);
  }

  #canal4cHeader .nav-list {
    column-gap: calc(40 / 1366 * 100vw);

    padding-inline: calc(40 / 1366 * 100vw);
  }

  #canal4cHeader .naviList .nav-list .naviList-inner.brandLogo.canal4c {
    margin-right: 0;
    padding-inline: 0;
  }

  #canal4cHeader .userarea-inner {
    justify-self: flex-end;
  }

  #canal4cHeader .naviList .nav-list .naviList-inner {
    padding-inline: var(--items-column-gap);
  }

  #canal4cHeader .naviList .nav-list .userarea .userarea-inner > li:first-of-type {
    padding-left: 0 !important;
  }

  #canal4cHeader .naviList .nav-list .userarea .userarea-inner li {
    padding-left: var(--items-column-gap);
  }

  #canal4cHeader .naviList .nav-list .userarea .userarea-inner > li:not(:has(> *)) {
    display: none;
  }
}




/* ===============================================
  * Footer *
=============================================== */

#footer.canal4c,
#footer.canal4c .footer-companyInfo .footer-brandList {
  background-color: var(--bg-primary);

  color: var(--textcolor-base);
}

#footer.canal4c .menu-contents-ttl {
  color: var(--textcolor-base);
  text-transform: uppercase;
}

#footer.canal4c .Category-single .Category-single-inner li a {
  color: var(--textcolor-base);
}

#footer.canal4c .guide-perContents > div .category-serviceTtl {
  color: var(--textcolor-base);
  text-transform: uppercase;
}

#footer.canal4c .footer-brandList .cardUnit-footer-brandList svg {
  color: var(--textcolor-base);
  fill: var(--textcolor-base);
}

#footer.canal4c .guide-perContents > div .category-serviceTtl::after {
  background-color: var(--textcolor-base);
}

#footer.canal4c .footer-promotion .menu-contents-ttl {
  color: var(--textcolor-base);
}

#footer.canal4c .footer-promotion .menu-contents-ttl::before {
  background-color: var(--textcolor-base);
}

#footer.canal4c .footer-promotion .footer-promotion-inner .footer-sns .footer-sns-icon a {
  fill: var(--textcolor-base);
}

@media (max-width: 767px) {
  #footer.canal4c {
    --border-style: solid 1px #B4C0CE;

    padding-top: 10rem;
  }

  #footer.canal4c .footer-menu .footer-logo {
    margin-bottom: 6.5rem;
  }

  #footer.canal4c .accordion_list.wrap {
    padding-inline: 2rem;
  }

  #footer.canal4c .accordion_list.wrap > li:first-of-type .menu-contents-ttl {
    border-top: var(--border-style);
  }

  #footer.canal4c .accordion_list .trigger.menu-contents-ttl {
    padding: 2rem 0;
    border-bottom: var(--border-style);

    color: var(--textcolor-base);
  }

  #footer.canal4c .accordion_list .trigger .accordion-icon {
    margin-right: 0;
  }

  #footer.canal4c .accordion_list .trigger .accordion-icon::before,
  #footer.canal4c .accordion_list .trigger .accordion-icon::after {
    background-color: var(--textcolor-base);
  }

  #footer.canal4c .accordion_list.accordion_list_second {
    background-color: var(--bg-primary);
  }

  #footer.canal4c .footer-memu-contents > br {
    display: none;
  }

  #footer.canal4c .accordion_list .Category-single {
    border-bottom: var(--border-style);
  }

  #footer.canal4c .accordion_list .Category-single .Category-single-inner li {
    padding-left: 2rem;
    border: none;
  }

  #footer.canal4c .accordion_list .Category-single .Category-single-inner li:nth-child(1) {
    border: none;
  }

  #footer.canal4c .accordion_list .Category-single .Category-single-inner li a {
    color: var(--textcolor-base);
  }

  #footer.canal4c .footer-promotion-inner {
    margin-top: 5.14rem;
  }

  #footer.canal4c .footer-brandList {
    background-color: #E0E5E9;
  }
}

@media (min-width: 768px) {
  #footer.canal4c .menu-contents-ttl .accordion-icon {
    display: none;
  }

  #footer.canal4c .menu-contents-ttl::before {
    background-color: var(--textcolor-base);
  }
}

@media (min-width: 768px) {
  .footer-brandList .card-footer-brandList.card-footer-brandList-canal {
    display: grid;
    place-content: center;
  }
}

#footer.canal4c .footer-menu .footer-logo {
  color: #33030f;
}

#footer.canal4c .footer-menu .footer-logo svg,
#footer .footer-brandList .cardUnit-footer-brandList svg {
  overflow: visible;
}




/* ===============================================
  * Page Custom *
=============================================== */

.product_cateImg picture,
.product_cateImg img{
  display: none;
}


.headerTextTitle,
.pickup-items_sub-ttl.title-eng01,
.product_cateImg_ttl,
.section-ttl,
.section-title,
.shopList_title,
.newsList_title{
  text-transform: uppercase;
  font-family: var(--font-title);
}

#main #NewsDetailMain .pageBackBtn a,
#main #NewsDetailMain .newsDetail .newsDate,
#main #NewsListMain .newsList .newsItem .newsDate,
#main #NewsListMain .categoryTagsBlock .categoryTags li{
  font-family: var(--font-title);
}

#main #NewsDetailMain .newsDetail .newsText,
#main #NewsDetailMain .newsDetail .newsTitle,
#main #NewsDetailMain .newsDetail .newsDate,
#main #NewsListMain .newsList .newsItem .newsTitle{
 font-family: var(--ff-dnp-shuei-gothic-gin-std), "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'Noto Sans JP', Meiryo, sans-serif;
}