@charset "UTF-8";
.main .section p::before, .main .section p::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
}
.main .section p::before {
  margin-bottom: calc((1em - 1lh) / 2);
}
.main .section p::after {
  margin-top: calc((1em - 1lh) / 2);
}

.main .btn--detail,
.main .comingsoon {
  display: block;
  box-sizing: border-box;
  width: 3rem;
  height: 0.7rem;
  margin: 0.5rem auto 0;
  position: relative;
  background: #fff no-repeat;
  color: #35391c;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", sans-serif;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 640px) {
  .main .btn--detail,
.main .comingsoon {
    width: 4.8rem;
    height: 1.12rem;
    margin: 0.94rem auto 0;
  }
}
.main .btn--detail .balloon,
.main .comingsoon .balloon {
  width: 100%;
  position: absolute;
  top: -0.22rem;
  left: 0;
  color: #fff;
  font-size: 0.14rem;
  font-weight: 500;
}
@media screen and (max-width: 640px) {
  .main .btn--detail .balloon,
.main .comingsoon .balloon {
    top: -0.34rem;
    font-size: 0.22rem;
  }
}
.main .btn--detail .balloon::before, .main .btn--detail .balloon::after,
.main .comingsoon .balloon::before,
.main .comingsoon .balloon::after {
  content: "│";
}
.main .hero img {
  width: 100%;
}
.main article {
  background: url(../imgs/bg.png) 50% 0/16rem auto no-repeat;
}
@media screen and (max-width: 640px) {
  .main article {
    background-image: url(../imgs/bg_sp.png);
    background-size: 100% auto;
  }
}
.main .catch {
  padding: 0.5rem 0 0;
}
.main .catch .image {
  width: 6.67rem;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .main .catch .image {
    width: 5.14rem;
  }
}
.main .section {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0;
  background-image: linear-gradient(rgba(160, 154, 31, 0.3), rgba(160, 154, 31, 0.3));
  background-size: calc(50% + 4rem) 100%;
  background-repeat: no-repeat;
  transition: background-position 0.8s;
}
@media screen and (max-width: 640px) {
  .main .section {
    background-size: calc(50% + 2.2rem) 100%;
  }
}
.main .section .ttl {
  width: 7rem;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .main .section .ttl {
    width: 100%;
  }
}
.main .section p {
  padding: 0.5rem 0 0;
  font-size: 0.24rem;
  text-align: center;
  line-height: 1.4166666667;
}
@media screen and (max-width: 640px) {
  .main .section p {
    font-size: 0.36rem;
    text-align: center;
    line-height: 1.2777777778;
  }
}
.main .section .image {
  width: 10rem;
  margin: 0.14rem auto 0;
  position: relative;
}
@media screen and (max-width: 640px) {
  .main .section .image {
    width: 5.8rem;
    margin: 0.2rem auto 0;
  }
}
.main .section .image figcaption {
  padding: 0.06rem 0 0;
  position: absolute;
  top: 100%;
  right: 0;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", sans-serif;
  font-size: 0.1rem;
  line-height: 1;
}
@media screen and (max-width: 640px) {
  .main .section .image figcaption {
    padding: 0.08rem 0 0;
    font-size: 0.2rem;
  }
}
.main .section .btn--detail {
  padding: 0.2rem 0 0;
  font-size: 0.16rem;
  box-shadow: inset 0 0 0 1px #fff;
}
@media screen and (max-width: 640px) {
  .main .section .btn--detail {
    padding: 0.3rem 0 0;
    font-size: 0.26rem;
  }
}
.main .section .comingsoon {
  padding: 0.4rem 0 0;
  background-image: url(../imgs/comingsoon.svg);
  background-position: 50% 0.22rem;
  background-size: 1.33rem auto;
  font-size: 0.11rem;
}
@media screen and (max-width: 640px) {
  .main .section .comingsoon {
    padding: 0.64rem 0 0;
    background-position: 50% 0.34rem;
    background-size: 2.12rem auto;
    font-size: 0.18rem;
  }
}
.main .section.premium, .main .section.location {
  background-position: calc(-50vw - 4rem) 0;
}
@media screen and (max-width: 640px) {
  .main .section.premium, .main .section.location {
    background-position: calc(-50vw - 2.2rem) 0;
  }
}
.main .section.premium.scrollIn, .main .section.location.scrollIn {
  background-position: 0 0;
}
.main .section.premium .btn--detail {
  background-image: url(../imgs/btn01.svg), url(../assets/imgs/arw02.svg);
  background-position: 50% 0.4rem, calc(100% - 0.2rem) 50%;
  background-size: 0.84rem auto, 0.2rem auto;
}
@media screen and (max-width: 640px) {
  .main .section.premium .btn--detail {
    background-position: 50% 0.62rem, calc(100% - 0.3rem) 50%;
    background-size: 1.34rem auto, 0.3rem auto;
  }
}
@media screen and (hover: hover) and (pointer: fine) {
  .main .section.premium .btn--detail {
    background-image: url(../imgs/btn01.svg), url(../assets/imgs/arw02.svg), linear-gradient(90deg, #35391c 50%, #fff 50%);
    background-position: 50% 0.4rem, calc(100% - 0.2rem) 50%, 100% 0;
    background-size: 0.84rem auto, 0.2rem auto, 200% 100%;
    transition: 0.4s;
    transition-property: background-position, color;
  }
  .main .section.premium .btn--detail:hover {
    background-image: url(../imgs/btn01_r.svg), url(../assets/imgs/arw02_r.svg), linear-gradient(90deg, #35391c 50%, #fff 50%);
    background-position: 50% 0.4rem, calc(100% - 0.2rem) 50%, 0 0;
    color: #fff;
  }
}
.main .section.quality {
  background-position: calc(100vw + 4rem) 0;
}
@media screen and (max-width: 640px) {
  .main .section.quality {
    background-position: calc(100vw + 2.2rem) 0;
  }
}
.main .section.quality.scrollIn {
  background-position: 100% 0;
}
.main .section.quality .btn--detail {
  background-image: url(../imgs/btn02.svg), url(../assets/imgs/arw02.svg);
  background-position: 50% 0.4rem, calc(100% - 0.2rem) 50%;
  background-size: 0.98rem auto, 0.2rem auto;
}
@media screen and (max-width: 640px) {
  .main .section.quality .btn--detail {
    background-position: 50% 0.62rem, calc(100% - 0.3rem) 50%;
    background-size: 1.56rem auto, 0.3rem auto;
  }
}
@media screen and (hover: hover) and (pointer: fine) {
  .main .section.quality .btn--detail {
    background-image: url(../imgs/btn02.svg), url(../assets/imgs/arw02.svg), linear-gradient(90deg, #35391c 50%, #fff 50%);
    background-position: 50% 0.4rem, calc(100% - 0.2rem) 50%, 100% 0;
    background-size: 0.98rem auto, 0.2rem auto, 200% 100%;
    transition: 0.4s;
    transition-property: background-position, color;
  }
  .main .section.quality .btn--detail:hover {
    background-image: url(../imgs/btn02_r.svg), url(../assets/imgs/arw02_r.svg), linear-gradient(90deg, #35391c 50%, #fff 50%);
    background-position: 50% 0.4rem, calc(100% - 0.2rem) 50%, 0 0;
    color: #fff;
  }
}
.main .section.location .btn--detail {
  background-image: url(../imgs/btn03.svg), url(../assets/imgs/arw02.svg);
  background-position: 50% 0.4rem, calc(100% - 0.2rem) 50%;
  background-size: 1.84rem auto, 0.2rem auto;
}
@media screen and (max-width: 640px) {
  .main .section.location .btn--detail {
    background-position: 50% 0.62rem, calc(100% - 0.3rem) 50%;
    background-size: 2.93rem auto, 0.3rem auto;
  }
}
@media screen and (hover: hover) and (pointer: fine) {
  .main .section.location .btn--detail {
    background-image: url(../imgs/btn03.svg), url(../assets/imgs/arw02.svg), linear-gradient(90deg, #35391c 50%, #fff 50%);
    background-position: 50% 0.4rem, calc(100% - 0.2rem) 50%, 100% 0;
    background-size: 1.84rem auto, 0.2rem auto, 200% 100%;
    transition: 0.4s;
    transition-property: background-position, color;
  }
  .main .section.location .btn--detail:hover {
    background-image: url(../imgs/btn03_r.svg), url(../assets/imgs/arw02_r.svg), linear-gradient(90deg, #35391c 50%, #fff 50%);
    background-position: 50% 0.4rem, calc(100% - 0.2rem) 50%, 0 0;
    color: #fff;
  }
}
.main .gmaps {
  margin: 0.5rem 0 0;
  padding: 0 0 0.3rem;
  background: #000;
}
.main .map {
  height: 5rem;
}
@media screen and (max-width: 640px) {
  .main .map {
    height: 5rem;
  }
}
.main .btn--gmaps {
  margin-top: 0.15rem;
  background-image: url(../assets/imgs/ico-ext_r.svg);
  background-position: calc(100% - 0.16rem) 50%;
  background-size: 0.16rem auto;
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", serif;
  line-height: 0.7rem;
  box-shadow: inset 0 0 0 1px #fff;
}
@media screen and (max-width: 640px) {
  .main .btn--gmaps {
    margin-top: 0.2rem;
    background-position: calc(100% - 0.22rem) 50%;
    background-size: 0.26rem auto;
    line-height: 1.12rem;
  }
}
@media screen and (hover: hover) and (pointer: fine) {
  .main .btn--gmaps {
    background-image: url(../assets/imgs/ico-ext_r.svg), linear-gradient(90deg, #35391c 50%, #fff 50%);
    background-position: calc(100% - 0.16rem) 50%, 100% 0;
    background-size: 0.16rem auto, 200% 100%;
    transition: 0.4s;
    transition-property: background-position, color;
  }
  .main .btn--gmaps:hover {
    background-image: url(../assets/imgs/ico-ext.svg), linear-gradient(90deg, #35391c 50%, #fff 50%);
    background-position: calc(100% - 0.16rem) 50%, 0 0;
    color: #fff;
  }
}
/*# sourceMappingURL=unique.css.map */