@charset "UTF-8";

:root {
  /* 各レイアウト用要素幅 */
  --responsive-usr-ranking-r--item-width: 295px;
  --responsive-usr-thumbnail-t--item-width: 245px;
}

@media all {
  :root {
    --usr-scrollbar-width: 0;
  }

  body [class*="pane-"] {
    font-family: var(--mz-ff-normal);
    font-weight: var(--mz-fw-regular);
    line-height: 1.5;
  }

  h1,
  .h1 {
    font-size: var(--mz-fs-h1);
    font-weight: var(--mz-fw-bold);
    padding: 0;
  }

  h2,
  .h2 {
    padding: 0;
  }

  h3,
  .h3 {
    padding: 0;
  }

  h4,
  .h4 {
    padding: 0;
  }

  h5,
  .h5 {
    padding: 0;
  }

  h6,
  .h6 {
    padding: 0;
  }

  a,
  a:link,
  a:visited {
    text-decoration: none;
  }
}

@media all {
  .mz-common-upper-container {
    display: flex;
    flex-direction: column;
  }

  .mz-common-upper-container>*:empty {
    display: none;
  }

  .mz-common-upper-container>*+* {
    margin-top: 10px;
  }

  .mz-common-lower-container {
    display: flex;
    flex-direction: column;
  }

  .mz-common-lower-container>*:empty {
    display: none;
  }

  .mz-common-lower-container>*+* {
    margin-top: 10px;
  }
}

@media all {

  .btn-default {
    background-color: var(--mz-color-1);
    color: #fff;
    border: 1px solid var(--mz-color-1);
  }

  .btn-default:hover {
    background-color: var(--mz-color-1);
    opacity: var(--mz-opacity-hover);
  }

  .btn-primary {
    background-color: var(--mz-color-1);
    color: #fff;
    border: 1px solid var(--mz-color-1);
  }

  .btn-primary:hover {
    background-color: var(--mz-color-1);
    opacity: var(--mz-opacity-hover);
  }

  .btn-secondary {
    background-color: #fff;
    color: var(--mz-color-1);
    border: 1px solid var(--mz-color-8);
  }

  .btn-secondary:hover {
    background-color: #fff;
    opacity: var(--mz-opacity-hover);
  }

  .btn-danger {
    background-color: var(--mz-color-4);
    color: #fff;
    border: 1px solid var(--mz-color-4);
  }

  .btn-danger:hover {
    background-color: var(--mz-color-4);
    opacity: var(--mz-opacity-hover);
  }
}

/*-- ヘッダー --*/
@media all {
  body #header-re {
    margin-bottom: 0;
  }

  body #headerUtil .hUtMenu .num {
    display: none !important;
  }

  body #headerUtil .searchArea:has(#js_npsearch_form_sp){
    display: none;
  }

  #ecb-header-re-pseudo {
    position: relative;
    z-index: -1;
    width: 100%;
    height: var(--mz-js-header-h);
  }
}

/*-- ページャー --*/
@media all {
  .mz-pagination-items {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 0;
  }

  .mz-pagination-items .mz-pagination-item {
    font-size: var(--mz-fs-15);
    font-weight: var(--mz-fw-regular);
    width: 29px;
    height: auto;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mz-pagination-items .mz-pagination-item.mz-prev a,
  .mz-pagination-items .mz-pagination-item.mz-next a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .mz-pagination-items .mz-pagination-item.mz-prev a::after,
  .mz-pagination-items .mz-pagination-item.mz-next a::after {
    content: '';
    width: 5.506px;
    height: auto;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    aspect-ratio: 5.506 / 10.01;
  }

  .mz-pagination-items .mz-pagination-item.mz-prev a::after {
    background-image: var(--mz-svg-arrow-right-1);
    scale: -1 1;
  }

  .mz-pagination-items .mz-pagination-item.mz-next a::after {
    background-image: var(--mz-svg-arrow-right-1);
    scale: 1 1;
  }
}

/*-- ページ毎のフォーム --*/
@media all {
  body:is(.page-goods, .page-genre, .page-search, .page-event) [class*="pane"] {
    & .fieldset-vertical.vertical-fb {
      margin: 0;
    }

    & .fieldset-vertical.vertical-fb .form-group {
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: start;
      align-items: stretch;
      gap: 0 6px;
    }

    & .fieldset-vertical.vertical-fb .form-label {
      margin: 0;
      background-color: transparent;
      padding: 0;
      flex-basis: auto;
    }

    & .fieldset-vertical.vertical-fb .form-group>*:not(.form-label, .constraint) {
      width: 100%;
    }

    & .fieldset-vertical .constraint {
      margin: 0;
      background-color: transparent;
      padding: 0;
      flex-basis: auto;
    }
  }
}