@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Noto+Serif+JP:wght@400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Balthazar&display=swap");

/*  ----------------------------------------------------------

font-size

----------------------------------------------------------  */
@media screen and (min-width: 1501px) {
  html {
    font-size: 0.666vw;
  }
}
@media screen and (min-width: 1401px) {
  html {
    font-size: 0.714vw !important;
  }
}
html {
  font-size: 0.833vw;
}
@media screen and (max-width: 767px) {
  html {
    font-size: 1.302vw;
  }
}
@media screen and (max-width: 540px) {
  html {
    font-size: 1.851vw;
  }
}
@media screen and (max-width: 414px) {
  html {
    font-size: 2.415vw;
  }
}

/*  ----------------------------------------------------------

base

----------------------------------------------------------  */
body {
  background: #000;
  color: #000;
  font-family: "游明朝", "YuMincho", "Noto Serif JP", serif;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  body {
    font-size: 1.4rem;
  }
}
a {
  color: #000;
}

/*  ----------------------------------------------------------

common

----------------------------------------------------------  */
article {
  display: flex;
}
article > * {
  width: 50%;
}
header {
  display: flex;
  align-items: center;
  padding-left: 1rem;
  height: 9rem;
}
header h1 {
  display: flex;
  align-items: center;
  font-weight: normal;
  font-size: 2rem;
  white-space: nowrap;
}
header h1 img {
  width: auto;
  height: 7rem;
  margin-right: 2rem;
}
.kv {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  height: 68rem;
}
.kv a {
  color: #fff;
}
.kv-shop {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-size: 2.2rem;
  margin-bottom: 0.6rem;
}
.kv-shop a {
  margin-left: 1.5rem;
}
.kv dl {
  text-align: center;
  margin-bottom: 1.5rem;
}
.kv dl a {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-size: 2.6rem;
}
.kv dl a span {
  font-size: 1.6rem;
  margin-top: 0.3rem;
  margin-right: 0.3rem;
}
.kv-contact > a {
  display: block;
  width: 26rem;
  border: solid 1px #fff;
  margin: 0 auto;
  text-align: center;
  padding: 1.6rem 0;
  line-height: 1;
  font-size: 1.4rem;
  background: url(../img/arrow-wt.png) no-repeat center right 1.5rem;
  background-size: 1.5rem auto;
}
.kv-contact > a:hover {
  color: #000 !important;
  background: url(../img/arrow-bk.png) no-repeat center right 1.5rem;
  background-size: 1.5rem auto;
  background-color: #fff;
  opacity: 1;
}
.info {
  padding: 4rem;
}
.info > div {
  padding: 5rem;
  border: solid 1px #fff;
}
.info dl {
  display: flex;
  flex-wrap: wrap;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}
.info dl dt {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1a1a1a;
  color: #b2b2b2;
  width: 30%;
  padding: 1.5rem 0;
}
.info dl dd {
  width: 70%;
  padding: 1.5rem 2rem;
}
.info dl dt:not(:last-of-type),
.info dl dd:not(:last-of-type) {
  border-bottom: solid 1px #898989;
}
@media screen and (max-width: 767px) {
  article {
    display: block;
  }
  article > * {
    width: 100%;
  }
  .kv {
    height: 56rem;
  }
  .kv dl {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .kv dl a {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-size: 2.6rem;
  }
  .kv dl a span {
    font-size: 1.6rem;
    margin-top: 0.3rem;
    margin-right: 0.3rem;
  }
  .info {
    padding: 2.5rem;
  }
  .info > div {
    padding: 3rem;
    border: solid 1px #fff;
  }
  .info dl {
    display: block;
  }
  .info dl dt {
    width: 100%;
    justify-content: flex-start;
    padding: 1.5rem 2rem;
  }
  .info dl dd {
    width: 100%;
    padding: 1.5rem 2rem;
  }
}

/*  ----------------------------------------------------------

店舗1

----------------------------------------------------------  */
.shop_1 {
  color: #fff;
}
.shop_1 a {
  color: #fff;
}
.shop_1 .kv {
  background: url(../img/kv_1.jpg) no-repeat center / cover;
}

/*  ----------------------------------------------------------

店舗2

----------------------------------------------------------  */
.shop_2 {
  color: #000;
  background: url(../img/texture.jpg) center top;
  background-size: 75rem auto;
}
.shop_2 a {
  color: #000;
}
.shop_2 header {
  background: #cbcbcb;
}
.shop_2 h1 {
  font-family: "Balthazar", serif;
  font-size: 2.6rem;
}
.shop_2 .kv {
  background: url(../img/kv_2.jpg) no-repeat center / cover;
}
.shop_2 .kv a {
  color: #fff;
}
.shop_2 .info dl {
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
}
.shop_2 .info dl dt {
  background: rgba(255, 255, 255, 0.5);
  color: #000;
}
.shop_2 .info dl dt:not(:last-of-type),
.shop_2 .info dl dd:not(:last-of-type) {
  border-bottom: solid 1px #000;
}

/*  ----------------------------------------------------------

page-top

----------------------------------------------------------  */
#page-top {
  position: fixed;
  z-index: 999;
}
#page-top a {
  background: #fff;
  border: solid 0.2rem #000;
  color: #000;
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  line-height: 1;
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  #page-top {
    bottom: 2rem;
    right: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  #page-top {
    bottom: 1.5rem;
    right: 1rem;
  }
}

/*  ----------------------------------------------------------

link

----------------------------------------------------------  */
a {
  text-decoration: none;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
a.line {
  text-decoration: underline;
}
a:hover.line {
  text-decoration: none;
}
a:hover {
  opacity: 0.5;
}
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/*  ----------------------------------------------------------

fade

----------------------------------------------------------  */
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
}
@-ms-keyframes fadeInUp {
  0% {
    opacity: 0;
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInUp {
  -webkit-animation: fadeInUp 0.6s ease;
  -moz-animation: fadeInUp 0.6s ease;
  -ms-animation: fadeInUp 0.6s ease;
  animation: fadeInUp 0.6s ease;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
}
.fade {
  opacity: 0;
}
.delay-1 {
  animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
}
.delay-2 {
  animation-delay: 0.35s;
  -moz-animation-delay: 0.35s;
  -webkit-animation-delay: 0.35s;
  -o-animation-delay: 0.35s;
}
.delay-3 {
  animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
}
.delay-4 {
  animation-delay: 0.65s;
  -moz-animation-delay: 0.65s;
  -webkit-animation-delay: 0.65s;
  -o-animation-delay: 0.65s;
}
.delay-5 {
  animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
}