@charset "UTF-8";
main {
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 0vw;
}

section .inner {
  margin: 0 auto;
}

/*-----------------------------------------------------------------
xxx
-----------------------------------------------------------------*/
#main-image.front {
  display: block;
  position: relative;
}
#main-image.front .copy {
  width: 90.6666666667vw;
  position: absolute;
  top: 39.3333333333vw;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 4vw;
  line-height: 1.4666666667;
  z-index: 100;
}
#main-image.front .copy p {
  font-size: 2.2vw;
  line-height: 1;
  font-weight: bold;
  color: #0099ff;
  letter-spacing: 0.22vw;
  margin-bottom: 2.9333333333vw;
}
#main-image.front .copy h2 {
  font-weight: bold;
  font-size: 5.3333333333vw;
  line-height: 1.5;
}
#main-image.front .copy h2 img {
  width: 90.6666666667vw;
}
#main-image.front .slider {
  position: relative;
}
#main-image.front .slider ul li .img {
  width: 100%;
}
#main-image.front .slider ul li .img img {
  width: 100%;
  display: block;
}
#main-image.front .swiper {
  width: 100%;
  height: 100%;
}
#main-image.front .swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
#main-image.front .swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#main-image.front .swiper .swiper-pagination {
  bottom: 3.0666666667vw;
  text-align: right;
  padding-right: 4vw;
}
#main-image.front .swiper .swiper-pagination .swiper-pagination-bullet {
  width: 9.3333333333vw;
  height: 1.0666666667vw;
  border-radius: 0;
  opacity: 1;
  background: #333333;
  margin: 0 1.3333333333vw;
}
#main-image.front .swiper .swiper-pagination .swiper-pagination-bullet-active {
  background: #fff;
}
#main-image.front .scroll {
  position: absolute;
  bottom: -4.4vw;
  left: 5.3333333333vw;
  width: 1.7333333333vw;
}
#main-image.front .scroll:before {
  content: "";
  position: absolute;
  transform: translateX(-50%);
  bottom: 9.3333333333vw;
  left: 50%;
  width: 0.1333333333vw;
  height: 13.3333333333vw;
  background: #fff;
  -webkit-animation: scroll 1.5s cubic-bezier(1, 0, 0, 1) infinite;
          animation: scroll 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@-webkit-keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
#group_way {
  width: 100%;
  height: 134.2666666667vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../img/top/bg-triangle-right.png) right top no-repeat, url(../img/top/bg-01.jpg) center top no-repeat;
  background-size: 75.0666666667vw auto, cover;
}
#group_way .inner {
  position: relative;
  writing-mode: vertical-rl;
  width: 100%;
  height: 94.6666666667vw;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  padding-right: 6vw;
}
#group_way .inner h2 {
  color: #fff;
  font-size: 5.0666666667vw;
  line-height: 1;
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  margin-left: 4vw;
}
#group_way .inner h2::after {
  content: "";
  margin-right: 3.4666666667vw;
  display: block;
  width: 0.2666666667vw;
  height: 94vw;
  background-color: #fff;
}
#group_way .inner p {
  color: #fff;
  font-size: 3.2vw;
  line-height: 2.1666666667;
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  margin-left: 4.6666666667vw;
}
#group_way .inner .link {
  position: relative;
}
#group_way .inner .link a {
  position: absolute;
  bottom: 5.3333333333vw;
  font-size: 3.2vw;
  width: 10.6666666667vw;
  height: 26.6666666667vw;
  border-radius: 5.3333333333vw;
  color: #fff;
}

#points {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../img/top/bg-triangle-left.png) left top no-repeat, url(../img/top/bg-02-sp.jpg) center top no-repeat;
  background-size: 75.0666666667vw auto, cover;
}
#points .inner {
  width: 100%;
  padding-top: 16.4vw;
  padding-bottom: 14.6666666667vw;
}
#points .inner .logo {
  position: relative;
  display: flex;
  justify-content: center;
}
#points .inner .logo img {
  width: 57.3333333333vw;
}
#points .inner .logo::before {
  content: "";
  display: block;
  width: 26.4vw;
  height: 29.0666666667vw;
  background: url(../img/common/symbol.png) center center no-repeat;
  background-size: contain;
  position: absolute;
  top: -28.9333333333vw;
  right: -2.6666666667vw;
}
#points .inner h2 {
  color: #fff;
  font-size: 5.3333333333vw;
  line-height: 1.75;
  font-family: "Noto Serif JP", serif;
  display: block;
  text-align: center;
}
#points .inner h2 .border {
  display: inline;
  text-align: center;
  border-bottom: 0.2666666667vw solid #fff;
  padding-bottom: 1.0666666667vw;
}
#points .inner h2 strong {
  font-size: 8vw;
  line-height: 1;
}
#points .inner h2 .num {
  font-size: 9.3333333333vw;
  line-height: 1;
}
#points .inner .boxes {
  display: flex;
  flex-direction: column;
  margin-top: 8.4vw;
}
#points .inner .boxes .box {
  position: relative;
  display: flex;
  height: 41.3333333333vw;
  padding: 0 4vw;
}
#points .inner .boxes .box + .box {
  margin-top: -1.3333333333vw;
}
#points .inner .boxes .box::before {
  content: "";
  display: block;
  width: 104.4vw;
  height: 10.8vw;
  position: absolute;
  z-index: 0;
  top: 21.3333333333vw;
}
#points .inner .boxes .box:nth-of-type(odd) {
  justify-content: flex-start;
}
#points .inner .boxes .box:nth-of-type(odd)::before {
  left: -18.6666666667vw;
  background: url(../img/top/point-ribbon-yellow.png) left center no-repeat;
  background-size: contain;
}
#points .inner .boxes .box:nth-of-type(odd) .num {
  top: 10.6666666667vw;
  left: 47.3333333333vw;
}
#points .inner .boxes .box:nth-of-type(odd) .text {
  top: 18.5333333333vw;
  left: 56.1333333333vw;
}
#points .inner .boxes .box:nth-of-type(even) {
  justify-content: flex-end;
}
#points .inner .boxes .box:nth-of-type(even)::before {
  right: -18.6666666667vw;
  background: url(../img/top/point-ribbon-red.png) right center no-repeat;
  background-size: contain;
}
#points .inner .boxes .box:nth-of-type(even) .num {
  top: 10.6666666667vw;
  right: 67.8666666667vw;
}
#points .inner .boxes .box:nth-of-type(even) .text {
  top: 18.5333333333vw;
  right: 49.2vw;
}
#points .inner .boxes .box .img {
  width: 41.3333333333vw;
  z-index: 1;
}
#points .inner .boxes .box .num {
  z-index: 1;
  font-size: 5.0666666667vw;
  font-family: "Noto Serif JP", serif;
  color: #fff;
  position: absolute;
}
#points .inner .boxes .box .num:after {
  content: "";
  display: block;
  width: 12vw;
  height: 0.1333333333vw;
  background: #fff;
  transform: rotate(-45deg);
  margin-left: 2vw;
}
#points .inner .boxes .box:nth-of-type(3) .num, #points .inner .boxes .box:nth-of-type(4) .num {
  top: 8vw;
}
#points .inner .boxes .box:nth-of-type(3) .text, #points .inner .boxes .box:nth-of-type(4) .text {
  top: 14.6666666667vw;
}
#points .inner .boxes .box:nth-of-type(3) .text .line strong, #points .inner .boxes .box:nth-of-type(4) .text .line strong {
  font-size: 5.0666666667vw;
}
#points .inner .boxes .box:nth-of-type(5) .num {
  top: 8vw;
}
#points .inner .boxes .box:nth-of-type(5) .text {
  top: 16vw;
  left: 48.5333333333vw;
}
#points .inner .boxes .box:nth-of-type(5) .text .line strong {
  font-size: 4.5333333333vw;
}
#points .inner .boxes .box:nth-of-type(1) .text .line + .line, #points .inner .boxes .box:nth-of-type(2) .text .line + .line {
  padding-left: 2em;
}
#points .inner .boxes .box:nth-of-type(3) .text .line, #points .inner .boxes .box:nth-of-type(4) .text .line, #points .inner .boxes .box:nth-of-type(5) .text .line {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#points .inner .boxes .box .text {
  z-index: 1;
  font-family: "Noto Serif JP", serif;
  color: #fff;
  position: absolute;
}
#points .inner .boxes .box .text .line strong {
  font-size: 6vw;
}
#points .inner .boxes .box .text .line span {
  font-size: 4.5333333333vw;
}
#points .inner .boxes .box .text .line:first-of-type span {
  font-size: 3.7333333333vw;
}
#points .inner .link {
  display: flex;
  justify-content: center;
  margin-top: 6.9333333333vw;
}
#points .inner .link a {
  width: 40vw;
  height: 10.6666666667vw;
  border-radius: 5.3333333333vw;
  font-size: 3.2vw;
}

#news {
  z-index: 100;
  margin-top: 20.5333333333vw;
  padding-bottom: 10.6666666667vw;
}
#news .inner {
  width: 92vw;
}
#news h2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 4.5333333333vw;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  border: 0.2666666667vw solid #fff;
  border-width: 0.2666666667vw 0;
  padding: 5.0666666667vw 0 5.0666666667vw;
}
#news h2::before {
  content: "";
  display: block;
  width: 20.4vw;
  height: 13.7333333333vw;
  background: url(../img/top/news@2x.png);
  background-size: contain;
  position: absolute;
  top: -7.0666666667vw;
  left: -2.4vw;
}
#news h2 .logo {
  position: relative;
  margin-bottom: 0.6666666667vw;
}
#news h2 .logo img {
  display: block;
  width: 81.0666666667vw;
}
#news .boxes {
  margin-top: 8vw;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
}
#news .boxes .box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#news .boxes .box + .box {
  margin-top: 8vw;
}
#news .boxes .box .img {
  width: 37.3333333333vw;
  height: 37.3333333333vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
#news .boxes .box .img a {
  display: block;
  width: 100%;
}
#news .boxes .box .img a img {
  display: block;
}
#news .boxes .box .contents {
  width: 50.6666666667vw;
}
#news .boxes .box .contents .title {
  height: 32.6666666667vw;
}
#news .boxes .box .contents .title a {
  font-size: 3.6vw;
  line-height: 1.2592592593;
  font-weight: 500;
  line-height: 1.22;
  text-align: left;
  color: #fff;
  text-decoration: none;
}
#news .boxes .box .contents .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 2.6666666667vw;
}
#news .boxes .box .contents .info .date {
  color: #fff;
  font-size: 2.4vw;
  font-weight: 500;
  line-height: 1.29;
  text-align: left;
}
#news .boxes .box .contents .info .terms .term {
  font-size: 2.4vw;
  height: 3.3333333333vw;
  padding: 0.8vw 5.3333333333vw;
  background-color: #6b532e;
  display: inline-block;
  text-decoration: none;
  color: #fff;
}
#news .link {
  display: flex;
  justify-content: center;
  margin-top: 8vw;
}
#news .link a {
  width: 40vw;
  height: 10.6666666667vw;
  border-radius: 5.3333333333vw;
  font-weight: bold;
}

/**
おすすめ商品
*/
#recommend {
  background: url(../img/top/bg-04-sp.jpg) center top no-repeat;
  background-size: contain;
}
#recommend .inner {
  padding: 7.4666666667vw 5.3333333333vw 11.4666666667vw;
}
#recommend .inner .shadow {
  background-color: rgba(0, 0, 0, 0.65);
  box-shadow: 0px 0px 0.8vw 0px rgba(255, 255, 255, 0.6);
  padding: 8.4vw 5.0666666667vw 15.0666666667vw;
}
#recommend .inner h2 {
  font-weight: 900;
  line-height: 1.86;
  text-align: center;
  color: #fff;
  font-family: "Noto Serif JP", serif;
}
#recommend .inner h2 .border {
  display: inline;
  text-align: center;
  border-bottom: 0.2666666667vw solid #fff;
  padding-bottom: 2vw;
  font-size: 5.3333333333vw;
  line-height: 1.3;
}
#recommend .inner .movie {
  width: 100%;
  height: 45.3333333333vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8.6666666667vw auto 0;
}
#recommend .inner .movie video {
  width: 100%;
  height: auto;
}
#recommend .inner .movie + h2 {
  margin-top: 5.3333333333vw;
}
#recommend .inner .boxes {
  margin-top: 9.3333333333vw;
  padding: 0 5.3333333333vw;
}
#recommend .inner .boxes .box {
  display: flex;
  flex-direction: column;
  position: relative;
}
#recommend .inner .boxes .box + .box {
  margin-top: 12.5333333333vw;
}
#recommend .inner .boxes .box:nth-of-type(odd) .img::before {
  background-image: url(../img/top/icon-symbol-left.png);
  top: -4vw;
  left: 0.2666666667vw;
}
#recommend .inner .boxes .box:nth-of-type(even) .img::before {
  background-image: url(../img/top/icon-symbol-right.png);
  top: -4vw;
  right: 0.2666666667vw;
}
#recommend .inner .boxes .box:nth-of-type(1) .img {
  width: 48.4vw;
}
#recommend .inner .boxes .box:nth-of-type(2) .img {
  width: 49.4666666667vw;
}
#recommend .inner .boxes .box:nth-of-type(3) .img {
  width: 49.8666666667vw;
}
#recommend .inner .boxes .box .img {
  position: relative;
  z-index: 10;
  margin: 0 auto;
}
#recommend .inner .boxes .box .img::before {
  content: "";
  position: absolute;
  width: 15.7333333333vw;
  height: 17.6vw;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
#recommend .inner .boxes .box .contents {
  position: relative;
  color: #fff;
}
#recommend .inner .boxes .box .contents .title {
  font-size: 5.3333333333vw;
  line-height: 1;
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  position: relative;
  padding-top: 5.4666666667vw;
  margin-bottom: 2.6666666667vw;
  border-bottom: 0.2666666667vw solid #fff;
  padding-bottom: 2.6666666667vw;
}
#recommend .inner .boxes .box .contents .title::before {
  content: "";
  display: block;
  width: 12.5333333333vw;
  height: 5.4666666667vw;
  background: url(../img/top/icon-featured.png) center center no-repeat;
  background-size: contain;
  position: absolute;
  top: -1.3333333333vw;
  left: -0.5333333333vw;
}
#recommend .inner .boxes .box .contents .text {
  font-size: 3.7333333333vw;
  line-height: 1.3571428571;
}

#voice {
  background: url(../img/top/bg-triangle-left.png) left top no-repeat;
  background-size: 75.0666666667vw auto;
}
#voice .inner {
  padding: 9.2vw 0 13.4666666667vw;
}
#voice .inner h2 {
  font-weight: 900;
  line-height: 1.86;
  text-align: center;
  color: #fff;
  font-family: "Noto Serif JP", serif;
}
#voice .inner h2 .border {
  display: inline;
  text-align: center;
  border-bottom: 0.1333333333vw solid #fff;
  padding-bottom: 1.0666666667vw;
  font-size: 5.3333333333vw;
  line-height: 1.3;
}
#voice .inner .boxes {
  display: flex;
  flex-wrap: wrap;
  width: 89.3333333333vw;
  margin: 9.3333333333vw auto 0;
  position: relative;
  padding-bottom: 41.7333333333vw;
}
#voice .inner .boxes .box {
  width: 41.4666666667vw;
  border: 0.2666666667vw solid #cccccc;
  margin-left: 5.3333333333vw;
  margin-bottom: 3.7333333333vw;
}
#voice .inner .boxes .box:nth-of-type(2n+1) {
  margin-left: 0;
}
#voice .inner .boxes .box:nth-last-of-type(-n+2) {
  margin-bottom: 0;
}
#voice .inner .boxes .box.instagram {
  border: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#voice .inner .boxes .box.instagram .icon {
  width: 18.6666666667vw;
}
#voice .inner .boxes .box.instagram strong {
  width: 100%;
  text-align: center;
  border-bottom: 0.2666666667vw solid #fff;
  font-weight: 500;
  font-size: 5.0666666667vw;
  line-height: 1.2631578947;
  font-family: "Noto Serif JP", serif;
  padding: 0 0 2.8vw;
  margin-top: 4vw;
}
#voice .inner .boxes .box.instagram strong span {
  font-size: 4.5333333333vw;
  line-height: 1.2941176471;
}
#voice .inner .boxes .box.instagram .hash {
  margin-top: 2.8vw;
}
#voice .inner .boxes .box.instagram .hash p {
  font-size: 3.2vw;
  line-height: 1.1666666667;
}
#voice .inner .boxes .box.instagram .follow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
#voice .inner .boxes .box.instagram .follow .message {
  position: relative;
  width: 100%;
  margin-top: 6.6666666667vw;
}
#voice .inner .boxes .box.instagram .follow .message::before {
  content: "";
  display: block;
  width: 26.2666666667vw;
  height: 6.8vw;
  background: url(../img/top/insta-follow_me.png) center center no-repeat;
  background-size: contain;
  position: absolute;
  top: -2.2666666667vw;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
}
#voice .inner .boxes .box.instagram .follow .message p {
  font-size: 2.6666666667vw;
  line-height: 1;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  color: #fff3e1;
}
#voice .inner .boxes .box.instagram .follow .qr {
  width: 57.3333333333vw;
  height: 18vw;
  margin: 2.1333333333vw auto 0;
  background-color: #fff3e1;
  display: flex;
  justify-content: center;
  padding: 1.8666666667vw 2.6666666667vw;
  position: relative;
  align-items: center;
  text-decoration: none;
}
#voice .inner .boxes .box.instagram .follow .qr .img {
  width: 13.4666666667vw;
  height: 13.4666666667vw;
}
#voice .inner .boxes .box.instagram .follow .qr .text {
  width: 35.0666666667vw;
  color: #333;
  margin-left: 2.1333333333vw;
}
#voice .inner .boxes .box.instagram .follow .qr .text .title {
  font-size: 2.8vw;
  line-height: 1.4285714286;
  font-weight: 500;
}
#voice .inner .boxes .box.instagram .follow .qr .text p {
  margin-top: 0.5333333333vw;
  font-size: 2vw;
  line-height: 1.8;
  margin-left: -1em;
}
#voice .inner .boxes .box .img img {
  display: block;
}
#voice .inner .boxes .box .contents {
  padding: 2vw 1.6vw;
  color: #fff;
}
#voice .inner .boxes .box .contents .user {
  padding-left: 4.8vw;
  background: url(../img/top/icon-user.png) left center no-repeat;
  background-size: 4vw auto;
  font-size: 2.6666666667vw;
  line-height: 4vw;
}
#voice .inner .boxes .box .contents .text {
  margin-top: 1.6vw;
  font-size: 2.6666666667vw;
  line-height: 1.4;
}

#exquisite-menu {
  background: url(../img/top/bg-06-sp.jpg) center top no-repeat;
  background-size: cover;
}
#exquisite-menu .inner {
  padding: 9.2vw 0 16vw;
}
#exquisite-menu .inner h2 {
  font-weight: 900;
  line-height: 1.86;
  text-align: center;
  color: #fff;
  font-family: "Noto Serif JP", serif;
}
#exquisite-menu .inner h2 .border {
  display: inline;
  text-align: center;
  border-bottom: 0.1333333333vw solid #fff;
  padding-bottom: 1.0666666667vw;
  font-size: 5.3333333333vw;
  line-height: 1.3;
}
#exquisite-menu .inner .boxes {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 80vw;
  margin: 11.2vw auto 0;
}
#exquisite-menu .inner .boxes .box {
  width: 80vw;
  min-height: 93.3333333333vw;
  background-color: #000;
  padding: 1.7333333333vw 1.7333333333vw 4.4vw;
}
#exquisite-menu .inner .boxes .box + .box {
  margin-top: 5.3333333333vw;
}
#exquisite-menu .inner .boxes .box .img {
  position: relative;
}
#exquisite-menu .inner .boxes .box .img::before {
  content: "";
  display: block;
  width: 21.6vw;
  height: 23.6vw;
  background: url(../img/top/icon-symbol-right@2x.png) center center no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -6.6666666667vw;
  right: -2vw;
}
#exquisite-menu .inner .boxes .box .img img {
  display: block;
}
#exquisite-menu .inner .boxes .box .contents {
  color: #fff;
  padding: 0 0.8vw;
}
#exquisite-menu .inner .boxes .box .contents .title {
  margin-top: 4vw;
  font-family: "Noto Serif JP", serif;
  font-size: 5.0666666667vw;
  line-height: 1;
  text-align: center;
  font-weight: bold;
}
#exquisite-menu .inner .boxes .box .contents .text {
  margin-top: 2.6666666667vw;
  font-size: 3.7333333333vw;
  line-height: 1.3571428571;
}
#exquisite-menu .inner .boxes + p {
  font-family: "Noto Serif JP", serif;
  font-size: 5.0666666667vw;
  line-height: 1.3684210526;
  text-align: center;
  font-weight: bold;
  color: #fff;
  margin-top: 7.7333333333vw;
}
#exquisite-menu .inner .link {
  display: flex;
  justify-content: center;
  margin-top: 6.6666666667vw;
}
#exquisite-menu .inner .link a {
  width: 40vw;
  height: 10.6666666667vw;
  border-radius: 5.3333333333vw;
  border: 0.2666666667vw solid #fff;
  font-size: 3.2vw;
}