@charset "UTF-8";
/* VARIABLE - RENEWAL 2025
----------------------------------------------------*/
/* MIXIN
----------------------------------------------------*/
/*
* Usage: rem-sp(16) => 1rem
*/
/* VARIABLE - RENEWAL 2025
----------------------------------------------------*/
/* MIXIN
----------------------------------------------------*/
/*
* Usage: rem-sp(16) => 1rem
*/
html {
  scroll-behavior: smooth;
}
@media (max-width: 750px) {
  html {
    scroll-padding-top: calc(71/375*100vw);
  }
}

img {
  display: block;
  width: 100%;
}

#main .container {
  width: 100%;
  margin: 0 auto;
}

/* bg
-------------------------------------------------- */
#main {
  background-color: #F7F3E7;
}

#main .bg {
  padding-top: calc(20/375*100vw);
  padding-bottom: calc(50/375*100vw);
  position: relative;
}
@media (min-width: 751px) {
  #main .bg {
    padding-top: calc(20/1440*100vw);
    padding-bottom: calc(50/1440*100vw);
  }
}

#main .title {
  margin: 0 auto;
}

#main .wrapper {
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 751px) {
  #main {
    background-size: 2vw auto;
  }
  #main .title {
    width: 100%;
    margin: 0 auto;
  }
}

/* kv
-------------------------------------------------- */
#main #kv {
  text-align: center;
  line-height: 0;
  margin: 0 auto;
}
#main #kv img {
  width: 100%;
}

/* sub_menu
-------------------------------------------------- */
#main #sub_menu {
  margin-top: calc(20/375*100vw);
}
@media (min-width: 751px) {
  #main #sub_menu {
    margin-top: calc(20/1440*100vw);
  }
}

#main #sub_menu .wrapper {
  padding: 0 4%;
  margin: 0 auto;
}

#main #sub_menu ul {
  display: flex;
  align-items: start;
}

#main #sub_menu ul li {
  width: 20%;
}

#main #sub_menu ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #221714;
  font-family: "Poppins", sans-serif;
  font-size: calc(10/375*100vw);
  font-weight: 700;
  height: calc(60/375*100vw);
  text-decoration: none;
  padding: calc(5/375*100vw) calc(10/375*100vw);
  transition: all 0.3s ease;
}
@media (min-width: 751px) {
  #main #sub_menu ul li a {
    font-size: calc(10/1440*100vw);
    height: calc(60/1440*100vw);
    padding: calc(5/1440*100vw) calc(10/1440*100vw);
  }
}

#main #sub_menu ul li a:hover {
  opacity: 0.7;
}

#main #sub_menu ul li a {
  border-left: 1px dashed #CF5B47;
}
#main #sub_menu ul li:last-child a {
  border-right: 1px dashed #CF5B47;
}

#main #sub_menu ul li img {
  width: 100%;
  vertical-align: top;
}

#main #sub_menu ul li a:hover {
  opacity: 0.7;
}

#main #sub_menu ul li a > span:first-child {
  display: inline-block;
  text-align: center;
  line-height: 1.1;
}

#main #sub_menu ul li a .arrow-icon {
  width: calc(17/375*100vw);
}
@media (min-width: 751px) {
  #main #sub_menu ul li a .arrow-icon {
    width: calc(17/1440*100vw);
  }
}

/* umajo spot
-------------------------------------------------- */
#main #umajo {
  text-align: center;
}

#main #umajo .wrapper {
  padding: calc(50/375*100vw) 0 0;
}
@media (min-width: 751px) {
  #main #umajo .wrapper {
    padding: calc(50/1440*100vw) 0 0;
  }
}

#main #umajo .title {
  width: calc(264/375*100vw);
  margin-bottom: calc(20/375*100vw);
}
@media (min-width: 751px) {
  #main #umajo .title {
    width: calc(264/1440*100vw);
    margin-bottom: calc(20/1440*100vw);
  }
}

.spot__01 {
  width: calc(280/375*100vw);
  margin: 0 auto;
  display: block;
}
@media (min-width: 751px) {
  .spot__01 {
    width: calc(280/1440*100vw);
  }
}

/* schedule
-------------------------------------------------- */
#main #schedule {
  margin-top: calc(20/375*100vw);
}
@media (min-width: 751px) {
  #main #schedule {
    margin-top: calc(20/1440*100vw);
  }
}

#main #schedule .wrapper {
  padding: 0 calc(30/375*100vw);
}
@media (min-width: 751px) {
  #main #schedule .wrapper {
    padding: 0 calc(30/1440*100vw);
  }
}

#main #schedule .schedule-table {
  background: #CF5B47;
  border-radius: calc(8/375*100vw);
  padding: calc(12/375*100vw) calc(10/375*100vw) calc(15/375*100vw);
}
@media (min-width: 751px) {
  #main #schedule .schedule-table {
    padding: calc(12/1440*100vw) calc(10/1440*100vw) calc(15/1440*100vw);
    border-radius: calc(8/1440*100vw);
  }
}

#main #schedule .schedule-table__img {
  width: calc(351/375*100vw);
  padding-bottom: calc(14/375*100vw);
  border-radius: 2px;
  overflow: hidden;
}
@media (min-width: 751px) {
  #main #schedule .schedule-table__img {
    width: calc(441/1440*100vw);
    padding-bottom: calc(14/1440*100vw);
  }
}

#main #schedule .schedule-table__scroll {
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#main #schedule .schedule-table__scroll::-webkit-scrollbar {
  display: none;
}

/* SimpleBar スクロールバーのカスタマイズ */
#main #schedule .schedule-table__scroll .simplebar-track.simplebar-horizontal {
  height: calc(4/375*100vw);
  background: #F7F3E7;
  border-radius: calc(2/375*100vw);
  margin: 0 calc(10/375*100vw);
}

#main #schedule .schedule-table__scroll .simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}

#main #schedule .schedule-table__scroll .simplebar-scrollbar,
#main #schedule .schedule-table__scroll .simplebar-scrollbar::before {
  background: #E1BA52;
  border-radius: calc(2/375*100vw);
}

@media (min-width: 751px) {
  #main #schedule .schedule-table__scroll .simplebar-track.simplebar-horizontal {
    height: calc(4/1440*100vw);
    border-radius: calc(2/1440*100vw);
    margin: 0 calc(10/1440*100vw);
  }

  #main #schedule .schedule-table__scroll .simplebar-scrollbar,
  #main #schedule .schedule-table__scroll .simplebar-scrollbar::before {
    border-radius: calc(2/1440*100vw);
  }
}

#main #schedule .concierge {
  margin-top: calc(40/375*100vw);
  padding: 0 calc(10/375*100vw);
}
@media (min-width: 751px) {
  #main #schedule .concierge {
    margin-top: calc(40/1440*100vw);
    padding: 0 calc(10/1440*100vw);
  }
}

/* drink&sweets
-------------------------------------------------- */
#main #sweets {
  margin-top: calc(50/375*100vw);
}
@media (min-width: 751px) {
  #main #sweets {
    margin-top: calc(50/1440*100vw);
  }
}

#main #sweets .wrapper {
  background: #E9DDCC;
  border-radius: calc(30/375*100vw) calc(30/375*100vw) 0 0;
  padding: calc(45/375*100vw) 0 calc(50/375*100vw);
}
@media (min-width: 751px) {
  #main #sweets .wrapper {
    border-radius: calc(30/1440*100vw) calc(30/1440*100vw) 0 0;
    padding: calc(45/1440*100vw) 0 calc(50/1440*100vw);
  }
}

#main #sweets .title {
  width: calc(322/375*100vw);
  margin-bottom: calc(30/375*100vw);
}
@media (min-width: 751px) {
  #main #sweets .title {
    width: calc(322/1440*100vw);
    margin-bottom: calc(30/1440*100vw);
  }
}

#main #sweets .contents {
  padding-left: calc(30/375*100vw);
  padding-right: calc(30/375*100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: calc(30/375*100vw);
}
@media (min-width: 751px) {
  #main #sweets .contents {
    padding-left: calc(30/1440*100vw);
    padding-right: calc(30/1440*100vw);
    row-gap: calc(30/1440*100vw);
  }
}

#main #sweets .contents > .sweets03 {
  margin-top: calc(10/375*100vw);
}
@media (min-width: 751px) {
  #main #sweets .contents > .sweets03 {
    margin-top: calc(10/1440*100vw);
  }
}

/* event
-------------------------------------------------- */
#main #event {
  background: #E9DDCC;
}

#main #event .wrapper {
  background: #F7F3E7;
  border-radius: calc(30/375*100vw) calc(30/375*100vw) 0 0;
  padding: calc(45/375*100vw) 0 0;
}
@media (min-width: 751px) {
  #main #event .wrapper {
    border-radius: calc(30/1440*100vw) calc(30/1440*100vw) 0 0;
    padding: calc(45/1440*100vw) 0 0;
  }
}

#main #event .title {
  width: calc(164/375*100vw);
}
@media (min-width: 751px) {
  #main #event .title {
    width: calc(164/1440*100vw);
  }
}

#main #event .contents {
  padding-left: calc(30/375*100vw);
  padding-right: calc(30/375*100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: calc(50/375*100vw);
}
@media (min-width: 751px) {
  #main #event .contents {
    padding-left: calc(30/1440*100vw);
    padding-right: calc(30/1440*100vw);
    row-gap: calc(50/1440*100vw);
  }
}

#main #event .contents .event01 {
  transform: translateX(calc(10/375*100vw));
}
@media (min-width: 751px) {
  #main #event .contents .event01 {
    transform: translateX(calc(10/1440*100vw));
  }
}

#main #event .contents__bg-white > * {
  border-top: 1px dashed #E1BA52;
  padding-top: calc(30/375*100vw);
}
@media (min-width: 751px) {
  #main #event .contents__bg-white > * {
    border-top: 1px dashed #E1BA52;
    padding-top: calc(30/1440*100vw);
  }
}
#main #event .contents__bg-white > *:first-child {
  border-top: none;
  padding-top: 0;
}

#main #event .contents__bg-white {
  display: flex;
  flex-direction: column;
  row-gap: calc(30/375*100vw);
  background: #fff;
  border-radius: calc(8/375*100vw);
  border: 1px dashed #E1BA52;
  padding: calc(43/375*100vw) calc(18/375*100vw) calc(30/375*100vw);
  position: relative;
}
@media (min-width: 751px) {
  #main #event .contents__bg-white {
    border-radius: calc(8/1440*100vw);
    padding: calc(43/1440*100vw) calc(18/1440*100vw) calc(30/1440*100vw);
    row-gap: calc(30/1440*100vw);
  }
}

#main #event .contents__bg-white::before {
  position: absolute;
  content: "";
  background: url(../img/icon-ribbon.svg) no-repeat center center / cover;
  top: calc(-9/375*100vw);
  left: 50%;
  transform: translateX(-50%);
  width: calc(33/375*100vw);
  height: calc(22/375*100vw);
}
@media (min-width: 751px) {
  #main #event .contents__bg-white::before {
    top: calc(-9/1440*100vw);
    width: calc(33/1400*100vw);
    height: calc(22/1440*100vw);
  }
}

#main #event .contents__bg-white .banner-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: calc(12/375*100vw);
  font-weight: 700;
  color: #222;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: calc(20/375*100vw);
}
@media (min-width: 751px) {
  #main #event .contents__bg-white .banner-title {
    font-size: calc(16/1440*100vw);
    margin-top: calc(20/1440*100vw);
  }
}

#main #event .contents__bg-white .banner-img {
  display: block;
  margin-top: calc(10/375*100vw);
  transition: all 0.3s ease;
}

#main #event .contents__bg-white .banner-img:hover {
  opacity: 0.7;
}
@media (min-width: 751px) {
  #main #event .contents__bg-white .banner-img {
    margin-top: calc(10/1440*100vw);
  }
}

#main #event .contents__bg-white .banner-img img {
  display: block;
  width: 100%;
  height: 100%;
}

/* map
-------------------------------------------------- */
#main #map .wrapper {
  padding: calc(50/375*100vw) calc(40/375*100vw);
}
@media (min-width: 751px) {
  #main #map .wrapper {
    padding: calc(50/1440*100vw) calc(40/1440*100vw);
  }
}

#main #map .title {
  width: calc(132/375*100vw);
  margin-bottom: calc(30/375*100vw);
}
@media (min-width: 751px) {
  #main #map .title {
    width: calc(132/1440*100vw);
    margin-bottom: calc(30/1440*100vw);
  }
}

#main #map ul.chuuibox {
  margin-top: calc(30/375*100vw);
  text-align: justify;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}
@media (min-width: 751px) {
  #main #map ul.chuuibox {
    margin-top: calc(30/1440*100vw);
  }
}

#main #map ul.chuuibox li {
  color: #222;
  font-size: 1.25rem;
  line-height: 2;
  display: block;
  position: relative;
}
@media (min-width: 751px) {
  #main #map ul.chuuibox li {
    font-size: 1rem;
  }
}

#main #map ul.chuuibox li:before {
  content: "※";
  float: left;
  display: block;
  position: relative;
}

.map__contents {
  width: 100%;
  margin: 0 auto;
  padding-left: calc(5/375*100vw);
  padding-right: calc(5/375*100vw);
}
@media (min-width: 751px) {
  .map__contents {
    padding-left: calc(5/1440*100vw);
    padding-right: calc(5/1440*100vw);
  }
}

.map__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: calc(10/375*100vw);
  margin-top: calc(20/375*100vw);
}
@media (min-width: 751px) {
  .map__btn {
    row-gap: calc(10/1440*100vw);
    margin-top: calc(20/1440*100vw);
  }
}
.map__btn .map-btn__item {
  width: 100%;
  padding: 0 calc(12/375*100vw);
}
@media (min-width: 751px) {
  .map__btn .map-btn__item {
    padding: 0 calc(12/1440*100vw);
  }
}
.map__btn .map-btn__item a {
  display: block;
  transition: all 0.3s ease;
}

.map__btn .map-btn__item a img {
  width: 100%;
  height: auto;
  display: block;
}

.map__btn .map-btn__item a:hover {
  opacity: 0.7;
}