@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap");
body {
  margin: 0;
  padding: 0;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  color: #fff;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: #999;
  text-decoration: none;
  transition: 2s;
}
@media only screen and (min-width: 768px) {
  a:hover {
    text-decoration: underline;
  }
}

.global_head {
  margin: 0;
  position: relative;
  z-index: 50000;
}

.section {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .section {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 768px) {
  .section {
    max-width: 1000px;
    width: calc(100% - 30px);
    margin: 0 auto;
  }
}

h2 {
  font-family: "Raleway", sans-serif;
  text-align: center;
  letter-spacing: 0.2rem;
}
@media only screen and (max-width: 767px) {
  h2 {
    font-size: 1.8rem;
    margin: 0 0 25px;
  }
}
@media only screen and (min-width: 768px) {
  h2 {
    font-size: 2.6rem;
    margin: 0 0 60px;
  }
}

.wrap {
  overflow: hidden;
  background: #000000 url("../img/wrap-bg.png") no-repeat center/cover fixed;
  position: relative;
}
.wrap::before {
  content: "";
  background: linear-gradient(#111 5%, transparent 20%, #111 99%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.content {
  position: relative;
  z-index: 99;
}

video {
  background-color: #000000;
  right: 0;
}
@media only screen and (min-width: 768px) {
  video {
    transform: translateX(calc((100% - 100vw) / 2));
  }
}

.unmute-button {
  z-index: 500000;
  position: fixed;
  padding: 10px 20px;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .unmute-button {
    bottom: 20px;
    right: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .unmute-button {
    bottom: 10px;
    right: -10px;
  }
}
@media only screen and (min-width: 768px) {
  .unmute-button img {
    width: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .unmute-button img {
    width: 30px;
  }
}

.hero {
  position: relative;
  overflow: hidden;
  background-color: #000000;
  max-height: 1000px;
  height: 55vw;
}
@media only screen and (max-width: 767px) {
  .hero {
    min-height: 300px;
  }
}
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgb(0, 0, 0);
  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgb(0, 0, 0) 100%);
  max-height: 1000px;
  width: 100vw;
  max-width: 2000px;
  margin: 0 auto;
}
.hero::before {
  content: "";
  background: linear-gradient(transparent, #111111);
  width: 100%;
  position: absolute;
  z-index: 90;
}
@media only screen and (max-width: 767px) {
  .hero::before {
    height: 20px;
    bottom: 0;
    left: 0;
  }
}
@media only screen and (min-width: 768px) {
  .hero::before {
    height: 500px;
    bottom: 0;
    left: 0;
  }
}
.hero .lang {
  position: absolute;
  display: flex;
  z-index: 99;
}
@media only screen and (max-width: 767px) {
  .hero .lang {
    top: 15px;
    left: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .hero .lang {
    top: 20px;
    left: 25px;
  }
}
.hero .lang__item {
  margin-right: 28px;
  font-size: 0.9rem;
  letter-spacing: 0.1rem;
  position: relative;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
}
.hero .lang__item:first-of-type::after {
  content: "";
  display: inline-block;
  background: #fff;
  width: 2px;
  height: 15px;
  transform: rotate(20deg);
  position: absolute;
  top: 4px;
  right: -13px;
}
.hero .sns {
  position: absolute;
  z-index: 99;
}
@media only screen and (max-width: 767px) {
  .hero .sns {
    top: 15px;
    right: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .hero .sns {
    top: 20px;
    right: 25px;
  }
}
.hero .sns span::before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  content: "\f16d";
  color: #fff;
  margin-right: 3px;
  position: relative;
  top: 1px;
}
@media only screen and (max-width: 767px) {
  .hero .sns span::before {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 768px) {
  .hero .sns span::before {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 768px) {
  .hero .sns a {
    transition: 0.2s;
  }
  .hero .sns a:hover {
    opacity: 0.8;
    text-decoration: none;
  }
}
.hero__inner {
  box-sizing: border-box;
}
@media only screen and (min-width: 768px) {
  .hero__inner {
    position: relative;
    height: 10vw;
    min-height: 750px;
  }
}
@media only screen and (min-width: 768px) {
  .hero__inner {
    position: relative;
    height: 10vw;
  }
}
.hero__ttl {
  text-align: center;
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
}
@media only screen and (max-width: 767px) {
  .hero__ttl {
    top: 10vw;
  }
}
@media only screen and (min-width: 768px) {
  .hero__ttl {
    top: 10vw;
  }
}
.hero__ttl img {
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.3));
}
@media only screen and (max-width: 767px) {
  .hero__ttl img {
    width: 350px;
    max-width: 350px !important;
  }
}
@media only screen and (min-width: 768px) {
  .hero__ttl img {
    width: 700px;
    max-width: 700px !important;
  }
}

.intro {
  background: url("../img/intro-pattern.png"), url("../img/intro-bg.png");
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  position: relative;
  z-index: 10;
}
@media only screen and (max-width: 767px) {
  .intro {
    padding: 60px 0 80px;
    background-position: left;
  }
}
@media only screen and (min-width: 768px) {
  .intro {
    background-position: center;
    padding: 120px 0;
  }
}
.intro::before {
  content: "";
  background: linear-gradient(#111, transparent);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (max-width: 767px) {
  .intro::before {
    height: 800px;
  }
}
@media only screen and (min-width: 768px) {
  .intro::before {
    height: 600px;
  }
}
.intro::after {
  content: "";
  background: linear-gradient(transparent, #111);
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media only screen and (max-width: 767px) {
  .intro::after {
    height: 100px;
  }
}
@media only screen and (min-width: 768px) {
  .intro::after {
    height: 200px;
  }
}
.intro__container {
  position: relative;
  z-index: 10;
}
@media only screen and (min-width: 768px) {
  .intro__video {
    width: 600px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 767px) {
  .intro__video video {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .intro__video video {
    width: 600px;
  }
}
@media only screen and (max-width: 767px) {
  .intro__text {
    margin: 60px 0 0;
  }
}
@media only screen and (min-width: 768px) {
  .intro__text {
    margin: 70px 0 0;
  }
}
.intro__text p {
  margin: 0 0 20px;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
  .intro__text p {
    line-height: 1.9rem;
  }
}
@media only screen and (min-width: 768px) {
  .intro__text p {
    font-size: 1.05rem;
    line-height: 2.2rem;
    max-width: fit-content;
    margin: 0 auto;
    text-align: left;
  }
}
.intro__text p:last-child {
  margin: 0;
}

.prod {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .prod {
    padding: 50px 0 50px;
  }
}
@media only screen and (min-width: 768px) {
  .prod {
    padding: 120px 0;
  }
}
.prod::before {
  content: "";
  background: #111;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.prod__container {
  position: relative;
  z-index: 99;
}
@media only screen and (max-width: 767px) {
  .prod__pic {
    margin: 0 0 100px;
  }
}
@media only screen and (min-width: 768px) {
  .prod__pic {
    margin: 0 auto 120px;
  }
}
@media only screen and (max-width: 767px) {
  .prod__pic .slick-dots {
    bottom: -45px !important;
  }
}
@media only screen and (min-width: 768px) {
  .prod__pic .slick-dots {
    bottom: -55px !important;
  }
}
.prod__pic .slick-dots li button::before {
  color: #fff !important;
}
@media only screen and (max-width: 767px) {
  .prod__item {
    margin: 0 10px;
  }
}
@media only screen and (min-width: 768px) {
  .prod__item {
    margin: 0 15px;
  }
}
.prod__item figure {
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .prod__item figure img {
    max-width: fit-content;
    width: 90%;
    height: auto;
    max-height: 250px;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 768px) {
  .prod__item figure img {
    height: 600px;
  }
}
.prod__text {
  text-align: center;
}
.prod__name {
  font-weight: 600;
  border-bottom: 2px solid #fff;
  display: inline-block;
}
@media only screen and (max-width: 767px) {
  .prod__name {
    font-size: 1.4rem;
    letter-spacing: 0.2rem;
    margin: 0 0 20px;
  }
}
@media only screen and (min-width: 768px) {
  .prod__name {
    font-size: 2.1rem;
    letter-spacing: 0.4rem;
    margin: 0 0 50px;
  }
}
.prod__name span {
  display: block;
  font-weight: normal;
  letter-spacing: 0;
}
@media only screen and (max-width: 767px) {
  .prod__name span {
    font-size: 1rem;
    margin: 5px 0 0;
    padding: 0 0 5px;
  }
}
@media only screen and (min-width: 768px) {
  .prod__name span {
    font-size: 1.4rem;
    margin: 5px 0 0;
  }
}
.prod__detail {
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .prod__detail {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
.prod__detail dl {
  display: flex;
  margin: 0;
  text-align: left;
  border-bottom: 1px solid #999;
}
@media only screen and (max-width: 767px) {
  .prod__detail dl {
    padding: 20px 0;
  }
}
@media only screen and (min-width: 768px) {
  .prod__detail dl {
    width: 47%;
    padding: 25px 0 5px;
  }
}
.prod__detail dl dt {
  color: #999;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  .prod__detail dl dt {
    width: 80px;
  }
}
@media only screen and (min-width: 768px) {
  .prod__detail dl dt {
    width: 100px;
  }
}
.prod__detail dl dd {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  .prod__detail dl dd {
    width: calc(100% - 80px);
  }
}
@media only screen and (min-width: 768px) {
  .prod__detail dl dd {
    width: calc(100% - 150px);
  }
}
.prod__price {
  font-size: 1.6rem;
  margin: 10px 0 0;
  font-weight: 600;
}
.prod__price-yen {
  font-size: 1.2rem;
  margin-right: 5px;
}
.prod__price-plus {
  font-size: 1.1rem;
  margin-left: 7px;
}
.prod__price-tax {
  font-size: 1rem;
  margin-left: 5px;
}

@media only screen and (max-width: 767px) {
  .sale {
    margin: 0 0 80px;
  }
}
@media only screen and (min-width: 768px) {
  .sale {
    margin: 100px 0;
  }
}
.sale h3 {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .sale h3 {
    font-size: 2.1rem;
  }
}
@media only screen and (max-width: 767px) {
  .sale h3 {
    font-size: 1.4rem;
  }
}
.sale p {
  max-width: fit-content;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .sale p {
    font-size: 1.05rem;
    line-height: 2.2rem;
  }
}
@media only screen and (max-width: 767px) {
  .sale p {
    font-size: 1rem;
  }
}
.sale a {
  color: #fff;
}
.sale a:visited {
  color: #fff;
}

.bottom {
  padding: 150px 0 0;
  background: linear-gradient(#111, transparent);
  background-position: bottom;
  background-size: cover;
  position: relative;
  z-index: 2;
}
.bottom::before {
  content: "";
  background: rgba(0, 0, 0, 0.5764705882);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.soldout {
  text-align: center;
}
.soldout__ttl {
  color: rgb(255, 68, 68);
  font-size: 5em;
  font-weight: bolder;
  text-shadow: rgb(0, 0, 0) 6px 0px 0px, rgb(0, 0, 0) 5.91686px 0.995377px 0px, rgb(0, 0, 0) 5.66974px 1.96317px 0px, rgb(0, 0, 0) 5.2655px 2.87655px 0px, rgb(0, 0, 0) 4.71532px 3.71022px 0px, rgb(0, 0, 0) 4.03447px 4.44106px 0px, rgb(0, 0, 0) 3.24181px 5.04883px 0px, rgb(0, 0, 0) 2.35931px 5.51667px 0px, rgb(0, 0, 0) 1.41143px 5.83163px 0px, rgb(0, 0, 0) 0.424423px 5.98497px 0px, rgb(0, 0, 0) -0.574341px 5.97245px 0px, rgb(0, 0, 0) -1.55719px 5.79441px 0px, rgb(0, 0, 0) -2.49688px 5.45578px 0px, rgb(0, 0, 0) -3.36738px 4.96596px 0px, rgb(0, 0, 0) -4.14455px 4.33852px 0px, rgb(0, 0, 0) -4.80686px 3.59083px 0px, rgb(0, 0, 0) -5.33596px 2.74364px 0px, rgb(0, 0, 0) -5.71718px 1.8204px 0px, rgb(0, 0, 0) -5.93995px 0.84672px 0px, rgb(0, 0, 0) -5.99811px -0.150428px 0px, rgb(0, 0, 0) -5.89004px -1.14341px 0px, rgb(0, 0, 0) -5.61874px -2.1047px 0px, rgb(0, 0, 0) -5.19172px -3.00766px 0px, rgb(0, 0, 0) -4.62082px -3.82727px 0px, rgb(0, 0, 0) -3.92186px -4.54081px 0px, rgb(0, 0, 0) -3.11421px -5.12852px 0px, rgb(0, 0, 0) -2.22026px -5.57409px 0px, rgb(0, 0, 0) -1.26477px -5.86518px 0px, rgb(0, 0, 0) -0.274238px -5.99373px 0px, rgb(0, 0, 0) 0.723898px -5.95617px 0px, rgb(0, 0, 0) 1.70197px -5.75355px 0px, rgb(0, 0, 0) 2.63288px -5.39147px 0px, rgb(0, 0, 0) 3.49082px -4.87998px 0px, rgb(0, 0, 0) 4.25202px -4.23324px 0px, rgb(0, 0, 0) 4.89538px -3.46919px 0px, rgb(0, 0, 0) 5.40307px -2.60899px 0px, rgb(0, 0, 0) 5.76102px -1.67649px 0px, rgb(0, 0, 0) 5.95932px -0.697531px 0px;
}

@media only screen and (min-width: 768px) {
  .sponly {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .pconly {
    display: none;
  }
}

footer {
  position: relative;
  z-index: 500000;
}

.global_foot {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .global_foot {
    max-width: 1200px;
    width: calc(100% - 45px);
    margin: 0 auto;
    padding: 20px 0 35px 0 !important;
  }
}/*# sourceMappingURL=style.css.map */