.sp {
  display: none
}

::selection {
  color: #cfa238;
  background: #000000
}

::-moz-selection {
  color: #cfa238;
  background: #000000
}

body {
  background: #000 !important
}

#wrapper {
  font-family: futura-pt, noto-sans-cjk-jp, sans-serif
}

@media screen and (min-width: 768px) {
  a {
    opacity: 1;
    transition: all 0.5s
  }

  a:hover {
    opacity: 0.8;
    transition: all 0.5s
  }
}

.navi--inner {
  display: flex;
  flex-direction: column;
  height: calc(90vh - 150px);
  justify-content: space-between;
  font-family: futura-pt, sans-serif
}

@media (max-width: 768px) {
  .navi--inner {
    height: auto
  }
}

.club {
  position: fixed;
  bottom: 28px;
  left: 190px;
  z-index: 11
}

.club ul {
  overflow: hidden
}

.club ul li {
  float: left;
  margin-right: 7px
}

.club ul li img {
  width: 100%
}

.club ul li a {
  width: 65px;
  height: 65px;
  display: block;
  background-size: 100%;
  transition: 0s !important;
  opacity: 1 !important
}

.club ul li.club01 a {
  background: url(../../assets/img/top/btn_01.png) no-repeat;
  background-size: 100%
}

@media screen and (min-width: 768px) {
  .club ul li.club01 a:hover {
    background: url(../../assets/img/top/btn_01_hover.png) no-repeat;
    background-size: 100%
  }
}

.club ul li.club02 a {
  background: url(../../assets/img/top/btn_02.png?1013) no-repeat;
  background-size: 100%;
  transition-duration: 0.5s;
  transition-delay: 0.1s
}

.club ul li.club02 a.off {
  background: url(../../assets/img/top/btn_02_off.png) no-repeat;
  background-size: 100%;
  pointer-events: none
}

@media screen and (min-width: 768px) {
  .club ul li.club02 a:hover {
    background: url(../../assets/img/top/btn_02_hover.png?1013) no-repeat;
    background-size: 100%;
    transition-duration: 0.5s;
    transition-delay: 0.1s
  }
}

.club ul li.club03 a {
  background: url(../../assets/img/top/btn_03.png) no-repeat;
  background-size: 100%;
  transition-duration: 0.5s;
  transition-delay: 0.1s
}

.club ul li.club03 a.off {
  background: url(../../assets/img/top/btn_03_off.png) no-repeat;
  background-size: 100%;
  pointer-events: none
}

@media screen and (min-width: 768px) {
  .club ul li.club03 a:hover {
    background: url(../../assets/img/top/btn_03_hover.png) no-repeat;
    background-size: 100%;
    transition-duration: 0.5s;
    transition-delay: 0.1s
  }
}

.club ul li.club04 a {
  background: url(../../assets/img/top/btn_04.png) no-repeat;
  background-size: 100%;
  transition-duration: 0.5s;
  transition-delay: 0.1s
}

.club ul li.club04 a.off {
  background: url(../../assets/img/top/btn_04_off.png) no-repeat;
  background-size: 100%;
  pointer-events: none
}

@media screen and (min-width: 768px) {
  .club ul li.club04 a:hover {
    background: url(../../assets/img/top/btn_04_hover.png) no-repeat;
    background-size: 100%;
    transition-duration: 0.5s;
    transition-delay: 0.1s
  }
}

.club ul li.club05 a {
  background: url(../../assets/img/top/btn_05.png) no-repeat;
  background-size: 100%;
  transition-duration: 0.5s;
  transition-delay: 0.1s
}

.club ul li.club05 a.off {
  background: url(../../assets/img/top/btn_05_off.png) no-repeat;
  background-size: 100%;
  pointer-events: none
}

@media screen and (min-width: 768px) {
  .club ul li.club05 a:hover {
    background: url(../../assets/img/top/btn_05_hover.png) no-repeat;
    background-size: 100%;
    transition-duration: 0.5s;
    transition-delay: 0.1s
  }
}

.prev-arrow {
  position: absolute;
  top: 0;
  left: -34px;
  width: 28px;
  height: 128px;
  cursor: pointer
}

.next-arrow {
  position: absolute;
  top: 0;
  right: -34px;
  width: 28px;
  height: 128px;
  cursor: pointer
}

.navigation {
  width: 176px;
  height: 100%;
  background: #000;
  position: fixed;
  top: 0;
  z-index: 100;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none
}

.navigation::-webkit-scrollbar {
  display: none
}

.navigation h1 {
  width: 149px;
  margin: 4vh auto 6vh
}

.navigation h1 img {
  width: 100%
}

.navigation ul {
  padding: 0 16px
}

.navigation ul li {
  font-size: 15px;
  position: relative;
  margin: 0 0 2vh
}

.navigation ul li a {
  color: #fff;
  font-weight: 600
}

.navigation ul li a span {
  padding: 0 0 0 7px
}

.navigation ul li a span:before {
  content: "-";
  position: absolute;
  left: 0;
  color: #c2a659;
  z-index: 1
}

.navigation ul li:last-child() {
  margin: 0
}


.navigation ul li.navi-goods::before {
  content: "";
  background: url(../../assets/img/shared/blank.png) no-repeat;
  background-size: 100%;
  position: absolute;
  width: 8px;
  height: 8px;
  top: 5px;
  right: 70px;
}
.navigation ul li.navi-special::before {
  content: "";
  background: url(../../assets/img/shared/blank.png) no-repeat;
  background-size: 100%;
  position: absolute;
  width: 8px;
  height: 8px;
  top: 5px;
  right: 70px;
}

.navigation ul li.navi-disco::before {
content: "NEW";
margin-right: 112px;
font-size: 10px;
padding: 3px 4px 3px;
display: flex;
color: #fff;
align-items: center;
text-align: center;
background-color: red;
}

@media screen and (max-width: 768px) {
  .navigation ul li.navi-disco::before {
  content: "NEW";
  margin-right: 112px;
  font-size: 20px;
  padding: 4px 4px 3px;
  display: flex;
  color: #fff;
  align-items: center;
  text-align: center;
  background-color: red;
  }}



.navigation ul li.navi-disco a::before {
  padding: 0 5px 0 0;
}

@media screen and (max-width: 768px) {
  .navigation ul li.navi-goods::before {
    width: 20px;
    height: 20px;
    right: 45%;
    top: 8px;
  }

  .navigation ul li.navi-disco::before {
    width: 50px;
    height: 20px;
    right: 12%;
    top: 8px;
  }
}

.navi-goods > a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 90%!important;;
  height: 100%;
  background: #e71432;
  padding: 0 9px 0 0;
  transform-origin: 0 50%;
  transform: scale(0, 1)
}

.navigation ul li.navi-news {
  position: relative
}

.navigation ul li.navi-news a:before {
  padding-right: 3px
}

.navigation ul li.navi-news:after {
  content: "";
  background: url(../../assets/img/shared/blank.png) no-repeat;
  background-size: 100%;
  position: absolute;
  width: 8px;
  height: 8px;
  top: 5px;
  right: 80px
}

.navigation ul.contents {
  margin: 0 0 2.5vh
}

.navigation ul.official li::after {
  content: "";
  background: url(../../assets/img/shared/blank.png) no-repeat;
  background-size: 100%;
  position: absolute;
  width: 8px;
  height: 8px;
  top: 5px;
  right: 5px
}

.navigation ul.sns {
  overflow: hidden;
  display: flex;
  justify-content: space-around
}

.navigation ul.sns li {
  width: 36px
}

.navigation ul.sns li img {
  width: 100%
}

.navigation ul.sns li:before {
  content: none
}

.navigation .border {
  height: 1px;
  width: 50px;
  background: #434343;
  margin: 0 0 2.5vh 15px
}

.navigation .bottom-area {
  background: #000;
  bottom: 0;
  left: 0;
  width: 100%
}

.navigation .youtube {
  width: 144px;
  margin: 0 auto 1.35vh
}

.navigation .youtube img {
  width: 100%
}

.navigation .copyright {
  font-size: 10px;
  color: #fff;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: 300;
  font-style: normal;
  padding: 0 16px 10px;
  margin: 0 0 0
}

.navigation .copyright a {
  color: #fff
}

@media screen and (max-width: 768px) {
  .sp {
    display: block
  }

  .pc {
    display: none
  }

  #wrapper {
    height: 88vh;
    min-height: auto !important
  }

  .nav-btn {
    position: fixed;
    top: 0;
    right: 0;
    width: 116px;
    height: 130px;
    border-left: 2px solid #ccc;
    z-index: 100
  }

  .head-btn {
    width: 50px;
    height: 50px;
    background: url(../../assets/img/shared/menu.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 43px;
    right: 36px
  }

  .head-btn.active {
    background: url(../../assets/img/shared/menu_close.png) no-repeat;
    background-size: 100%
  }

  .prev-arrow {
    position: absolute;
    top: 0;
    left: -70px;
    width: auto;
    height: auto;
    cursor: pointer
  }

  .next-arrow {
    position: absolute;
    top: 0;
    right: -70px;
    width: auto;
    height: auto;
    cursor: pointer
  }

  .club {
    position: fixed;
    bottom: auto;
    top: 36px;
    left: 60px;
    z-index: 100
  }

  .club ul {
    overflow: hidden
  }

  .club ul li {
    float: left;
    width: 94px;
    margin-right: 15px
  }

  .club ul li img {
    width: 100%
  }

  .club ul li a {
    width: 94px;
    height: 94px;
    display: block;
    background-size: 100%
  }

  .club ul li.club01 a {
    background: url(../../assets/img/top/btn_01_sp.png) no-repeat;
    background-size: 100%
  }

  .club ul li.club02 a {
    background: url(../../assets/img/top/btn_02_sp.png?1013) no-repeat;
    background-size: 100%
  }

  .club ul li.club02 a.off {
    background: url(../../assets/img/top/btn_02_off_sp.png?1013) no-repeat;
    background-size: 100%;
    pointer-events: none
  }

  .club ul li.club03 a {
    background: url(../../assets/img/top/btn_03_sp.png) no-repeat;
    background-size: 100%
  }

  .club ul li.club03 a.off {
    background: url(../../assets/img/top/btn_03_off_sp.png) no-repeat;
    background-size: 100%;
    pointer-events: none
  }

  .club ul li.club04 a {
    background: url(../../assets/img/top/btn_04_sp.png) no-repeat;
    background-size: 100%
  }

  .club ul li.club04 a.off {
    background: url(../../assets/img/top/btn_04_off_sp.png) no-repeat;
    background-size: 100%;
    pointer-events: none
  }

  .club ul li.club05 a {
    background: url(../../assets/img/top/btn_05_sp.png) no-repeat;
    background-size: 100%
  }

  .club ul li.club05 a.off {
    background: url(../../assets/img/top/btn_05_off_sp.png) no-repeat;
    background-size: 100%;
    pointer-events: none
  }

  .navigation {
    width: 637px;
    height: 100vh;
    background: #111216;
    position: fixed;
    top: 0;
    z-index: 99;
    display: none
  }

  .navigation.active {
    display: block;
    padding: 220px 65px 0
  }

  .navigation h1 {
    width: 149px;
    margin: 70px auto 100px;
    display: none
  }

  .navigation ul {
    padding: 0 16px
  }

  .navigation ul li {
    font-size: 34px;
    position: relative
  }

  .navigation ul li a {
    color: #fff
  }

  .navigation ul li a span:before {
    content: "-";
    position: absolute;
    left: 0;
    color: #c2a659
  }

  .navigation ul li.navi-news:after {
    width: 20px;
    height: 20px;
    right: 45%;
    top: 8px
  }

  .navigation ul.contents {
    margin: 0 0 25px;
    border-bottom: 1px solid #434343;
    max-height: 540px;
    display: flex;
    flex-flow: column wrap
  }

  .navigation ul.contents li {
    margin: 0 0 50px
  }

  .navigation ul.contents li span {
    padding: 0 0 0 20px
  }

  .navigation ul.official {
    margin: 0 0 110px
  }

  .navigation ul.official li span {
    padding: 0 0 0 20px
  }

  .navigation ul.official li::after {
    width: 20px;
    height: 20px;
    right: 45%;
    top: 8px
  }

  .navigation ul.sns {
    overflow: hidden;
    float: right;
    margin: 20px 20px 0 0
  }

  .navigation ul.sns li {
    float: left;
    width: 80px
  }

  .navigation ul.sns li:before {
    content: none
  }

  .navigation ul.sns li:nth-child(2) {
    margin: 0 16px 0 18px
  }

  .navigation .border {
    display: none
  }

  .navigation .bottom-area {
    position: relative;
    bottom: auto;
    left: auto;
    padding: 0;
    background: transparent
  }

  .navigation .youtube {
    width: 304px;
    margin: 0 auto 105px;
    float: left
  }

  .navigation .copyright {
    clear: both;
    font-size: 18px;
    text-align: center
  }

  .navigation .copyright a {
    color: #fff;
    text-decoration: none
  }
}