@charset "UTF-8";
/* --------------------------------------------------
    メディアクエリ & ミックスイン
-------------------------------------------------- */
/* --------------------------------------------------
    メインレイアウト (.food)
-------------------------------------------------- */
.spacer {
  display: inline-block;
  padding: 0 var(--sp-sss);
}

.time-st {
  font-size: var(--fs-h3);
}

.section-title.fv-catch::before,
.section-title.fv-catch::after {
  display: none;
}

.food .food-btn-area {
  display: flex;
  justify-content: center;
  padding-bottom: var(--sp-4l);
}

.food-section-content-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 768px) {
  .food-section-content-wrap {
    display: block;
  }
}
.food-section-top-img {
  height: 500px;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 auto;
  padding-bottom: var(--sp-3l);
  mask-image: linear-gradient(to right, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
}
@media screen and (max-width: 768px) {
  .food-section-top-img {
    mask-image: none;
    -webkit-mask-image: none;
    padding-bottom: 0;
  }
}
.food-section-time {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  font-size: var(--fs-h5);
  padding: var(--sp-md);
}
.food-section-caption {
  padding: var(--sp-md);
}

#morning {
  background-color: var(--bg-sub);
}

/* --------------------------------------------------
    First View (fv)
-------------------------------------------------- */
.fv-intro {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  justify-items: start;
}
.fv-intro .fv-img,
.fv-intro .fv-wrap {
  grid-area: 1/1;
}
@media screen and (max-width: 768px) {
  .fv-intro .fv-img,
  .fv-intro .fv-wrap {
    grid-area: unset;
  }
}
.fv-intro .fv-img {
  width: 100%;
  aspect-ratio: 21/9;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 768px) {
  .fv-intro .fv-img {
    order: 2;
  }
}
.fv-intro .fv-wrap {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 600px;
  margin: var(--sp-md);
  background-color: rgba(0, 0, 0, 0.6);
}
.fv-intro .fv-wrap h2,
.fv-intro .fv-wrap p {
  text-shadow: var(--shadow);
  padding: var(--sp-md);
}
.fv-info {
  padding-top: var(--sp-6l);
  text-align: center;
}
.fv-info .fv-txt {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
@media screen and (max-width: 1024px) {
  .fv-info .fv-txt {
    padding: var(--sp-md);
  }
}
.fv-note {
  padding-top: var(--sp-3l);
  font-size: var(--fs-sm);
  text-align: left;
  max-width: 800px;
  margin-inline: auto;
}
.fv-menu {
  display: flex;
  justify-content: center;
}
.fv-ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  gap: var(--sp-md);
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .fv-ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
.fv-ul-txt {
  transition: 0.3s;
  font-size: var(--fs-sm);
  border-bottom: var(--border-white);
  padding: var(--sp-sss);
}
.fv-ul-txt:hover {
  background-color: var(--bg-sub);
}

/* --------------------------------------------------
    MENU GRID (朝食・夕食共通のグリッド)
-------------------------------------------------- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: var(--sp-6l);
  padding: 0 var(--sp-md);
}
@media screen and (max-width: 1024px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .menu-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3l);
  }
}
.menu-grid-img {
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
}
.menu-grid-title {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  display: grid;
  justify-self: center;
  border: 1px solid var(--border-white);
  margin: var(--sp-sss) 0 var(--sp-sss) 0;
  padding: var(--sp-sss) var(--sp-sm);
}
.menu-grid-txt {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}

/* --------------------------------------------------
    BBQ
-------------------------------------------------- */
.bbq {
  background-color: var(--bg-sub);
}
.bbq-flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  align-items: stretch;
  gap: var(--sp-md);
}
@media screen and (max-width: 768px) {
  .bbq-flex {
    flex-direction: column;
    align-items: center;
  }
}
.bbq-item {
  text-align: center;
}
.bbq-title {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
.bbq-txt {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  font-size: var(--fs-sm);
}
.bbq-img {
  aspect-ratio: 4/3;
  width: 100%;
  padding: var(--sp-md) var(--sp-3l);
}
@media screen and (max-width: 1024px) {
  .bbq-img {
    padding: var(--sp-md);
  }
}
@media screen and (max-width: 768px) {
  .bbq-img {
    display: block;
    padding: 0;
  }
}

/* --------------------------------------------------
    BUFFET RESTAURANT , BAR (dining)
-------------------------------------------------- */
.dining-top-img {
  height: 500px;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 auto;
  padding-bottom: var(--sp-3l);
}
.dining-time {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  font-size: var(--fs-h5);
  padding: var(--sp-md);
}
.dining-txt {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  padding-top: var(--sp-3l);
}
@media screen and (max-width: 1024px) {
  .dining-txt {
    padding: var(--sp-md);
  }
}
.dining-img {
  width: 100%;
  aspect-ratio: 21/9;
  -o-object-fit: cover;
     object-fit: cover;
}
.dining-bar {
  background-color: var(--bg-sub);
}/*# sourceMappingURL=food.css.map */