@charset "UTF-8";
/* CSS Document */

/*--リセットCSS--*/
html,
body,
h1,
p {
  margin: 0;
  padding: 0;
  line-height: 1;
}
body {
  font-family: MazdaTypeRegular, Noto Sans CJK JP, Hiragino Kaku Gothic ProN, HiraKakuProN-W3, Meiryo, Yu Gothic Medium, sans-serif;
}
img {
  vertical-align: middle;
  border: none;
}
ul {
  padding-left: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
div {
  display: block;
}
p {
  text-decoration: none;
}

/*--maincss--*/
.view-pc {
  display: block;
}
.view-sp {
  display: none;
}
@media screen and (max-width: 750px) {
  .view-pc {
    display: none;
  }
  .view-sp {
    display: block;
  }
}

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  height: auto;
  text-align: center;
}
.container img {
  max-width: 100%;
  margin: 0 auto;
  height: auto;
}

/*--tabmenu--*/
.tab-wrap ul {
  display: flex;
  justify-content: center;
}
.tab-btn {
  text-align: center;
  list-style: none;
  cursor: pointer;
  margin: 0 5px;
}
.tab-contents {
  display: none;
}
.tab-contents.show {
  display: block;
}
@media (max-width: 750px) {
  .tab-wrap ul {
    display: block;
    max-width: 90%;
    margin-right: auto;
    margin-left: auto;
  }
  .tab-btn {
    margin: 20px 0;
  }
  .sp-mgtp {
    margin-top: 10%;
  }
}
@media (max-width: 530px) {
  .tab-wrap ul {
    margin-bottom: 8%;
  }
  .tab-btn {
    margin: 10px 0;
  }
  .sp-mgtp {
    margin-top: 10%;
  }
}

/*-- swiper --*/
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  &:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
  }
}
.swiper-button-next {
  right: 25px;
  &::after {
    border-width: 16px 0 16px 20px;
    border-color: transparent transparent transparent #c39c89;
    opacity: 0.8;
    left: 100%;
  }
}
.swiper-button-prev {
  left: 25px;
  &::after {
    border-width: 16px 20px 16px 0;
    border-color: transparent #c39c89 transparent transparent;
    opacity: 0.8;
    right: 100%;
  }
}
.swiper-slide img {
  width: 100%;
  height: auto;
}
.swiper-button-next {
  right: 40px;
}
.swiper-button-prev {
  left: 40px;
}
@media (max-width: 600px) {
  .swiper-button-next {
    right: 34px;
  }
  .swiper-button-prev {
    left: 41px;
  }
}
@media (max-width: 500px) {
  .swiper-button-next {
    &::after {
      border-width: 14px 0 14px 18px;
    }
  }
  .swiper-button-prev {
    &::after {
      border-width: 14px 18px 14px 0;
    }
  }
  .swiper-button-next {
    right: 29px;
  }
  .swiper-button-prev {
    left: 36px;
  }
}
@media (max-width: 400px) {
  .swiper-button-next {
    right: 26px;
  }
  .swiper-button-prev {
    left: 26px;
  }
}

/*-- Lightbox --*/
.photo-content {
  width: 920px;
  max-width: 100%;
  margin: 0 auto;
}
.Photo-wrap {
  margin-top: calc(10 / 920 * -100%);
  margin-bottom: calc(10 / 920 * -100%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.Photo-wrap li {
  margin: 6px;
  width: 18%;
}
.Photo-wrap li img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
@media (max-width: 750px) {
  .Photo-wrap li {
    margin: 6px;
    width: 47%;
  }
}
@media (max-width: 400px) {
  .Photo-wrap li {
    margin: 6px;
    width: 43%;
  }
}

/*-- オフィシャルボタン --*/
.btn-official-box {
  padding: 0 0.5rem;
}
.btn-official {
  width: 90%;
  color: #4c4948;
  background-color: #fff;
  border-color: #4c4948;
  padding: 0.8rem 0;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 8px;
}
.btn-official:hover {
  color: #fff;
  background-color: #4c4948;
  border-color: #4c4948;
  transition: 0.7s;
}
@media (min-width: 750px) {
  .d-sm-block {
    display: block !important;
  }
}
@media (max-width: 550px) {
  .btn-official {
    font-size: 1rem;
  }
}

/*--footer--*/
footer {
  padding: 5% 0;
}
footer p {
  margin-bottom: 0.25rem;
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: #212529;
}
@media screen and (max-width: 750px) {
  footer p {
    font-size: 2.5vw !important;
  }
}

.mt-10 {
  margin-top: 10%;
}
.mb-5 {
  margin-bottom: 5%;
}