@charset "UTF-8";

.sp-only {
  display: none;
}

.of {
  overflow: hidden;
}

.lp-warp img {
  margin: 0;
}

.lp-warp h2,
.lp-warp h3 {
  border: none;
  margin: 0;
  padding: 0;
}

.lp-warp h3::before,
.lp-warp ul>li::before {
  display: none;
}

.lp-warp ul {
  margin: 0;
}

.lp-warp ul>li {
  padding: 0;
}

.lp-warp p {
  margin-bottom: 0;
  font-size: unset;
}

.lp-warp p+p {
  margin-top: 1em;
}

.lp-warp+.c-button-wrapper {
  margin: clamp(24px, 56/1400 * 100vw, 56px) 0;
}

.lp-warp+.c-button-wrapper a {
  text-decoration: none;
  max-width: 420px;
  padding: 0 64px 0 clamp(25px, 56 / 1400 * 100vw, 56px);
}

@media screen and (min-width: 768px) {
  .c-button {
    padding: 0 80px 0 clamp(40px, 56/1400 * 100vw, 56px);
  }
}

.lp-warp .mainvis {
  margin-top: 16px;
}

.hotsoup {
  font-size: 18px;
  background: url(../img/bg_main.png) 0 0 / 60% auto;
}

.hotsoup img {
  vertical-align: bottom;
}

.hotsoup .menu {
  padding: 20px 40px 0;
}

.hotsoup .map-box {
  aspect-ratio: 1737 / 1237;
  width: 100%;
  background: url(../img/bg_map.webp) 0 0 / contain no-repeat;
  position: relative;
}

.hotsoup .map-box h2 {
  position: absolute;
  aspect-ratio: 920 / 180;
  width: 47%;
  max-width: 530px;
  top: 2%;
  left: 0%;
}

.hotsoup .map-box li {
  position: absolute;
  width: 21%;
  transition: .3s;
}

.hotsoup .map-box .map01 {
  top: 35%;
  right: 13%;
}

.hotsoup .map-box .map02 {
  top: 56%;
  right: 17%;
}

.hotsoup .map-box .map03 {
  bottom: 2%;
  left: 28%;
}

.hotsoup .map-box .map04 {
  bottom: 26%;
  left: 0%;
}


.hotsoup .menu-box {
  position: relative;
}

.hotsoup .menu-box h3 {
  margin: 20px 0 -18%;
  display: flex;
}

.hotsoup .menu-box h3 img {
  width: 35%;
  max-width: 340px;
}

.hotsoup #area02 h3,
.hotsoup #area04 h3 {
  justify-content: flex-end;
}


.hotsoup .slide-box {
  margin: 0 -40px;
  padding-top: 6%;
  aspect-ratio: 1920 / 800;
}


/*slide*/
.hotsoup .splide__arrow {
  background: none;
  aspect-ratio: 300 / 200;
  width: 10%;
  opacity: 1;
  top: 75%;
}

.hotsoup .splide__arrow--prev {
  left: 20%;
}

.hotsoup .splide__arrow--next {
  right: 20%;
}

.hotsoup .splide__slide {
  cursor: pointer;
  transition: .3s;
}

.hotsoup .menu-list {
  margin: 0 -40px;
}

.hotsoup .menu-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 40px;
  gap: 15px 30px;
}

.hotsoup .menu-list li {
  cursor: pointer;
  transition: .3s;
  font-size: 17px;
  color: #fff;
  font-weight: 500;
  text-align: center;
}

.hotsoup .menu-list li+li {
  margin-top: 0;
}

.hotsoup #area01 .slide-box {
  background: url(../img/bg_slide_area01.webp) 0 bottom / 100% auto no-repeat;
}

.hotsoup #area01 .menu-list {
  background: url(../img/bg_list_area01.webp) 0 0 / 70% auto repeat;
}

.hotsoup #area02 .slide-box {
  background: url(../img/bg_slide_area02.webp) 0 0 / 100% auto no-repeat;
}

.hotsoup #area02 .menu-list {
  background: url(../img/bg_list_area02.webp) 0 0 / 70% auto repeat;
}

.hotsoup #area03 .slide-box {
  background: url(../img/bg_slide_area03.webp) 0 0 / 100% auto no-repeat;
}

.hotsoup #area03 .menu-list {
  background: url(../img/bg_list_area03.webp) 0 0 / 70% auto repeat;
}

.hotsoup #area04 .slide-box {
  background: url(../img/bg_slide_area04.webp) 0 0 / 100% auto no-repeat;
}

.hotsoup #area04 .menu-list {
  background: url(../img/bg_list_area04.webp) 0 0 / 70% auto repeat;
}

.hotsoup .contact {
  padding: 60px 50px 22%;
  background: url(../img/bg_footer02.webp) 0 bottom / 100% auto no-repeat;
  position: relative;
  color: #382820;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}


.hotsoup .contact::before {
  content: "";
  display: block;
  position: absolute;
  width: 20%;
  right: 5%;
  bottom: 26%;
  aspect-ratio: 391 / 475;
  background: url(../img/bg_footer01.png) 0 0 / contain no-repeat;
}

.hotsoup .contact h2 {
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: flex-end;
  position: relative;
  flex-shrink: 0;
  margin: 0 30px 10px 0;
}

.hotsoup .contact h2::before {
  content: "";
  aspect-ratio: 292 / 175;
  display: block;
  background: url(../img/ico01.png) 0 0 / contain no-repeat;
  width: 120px;
  flex-shrink: 0;
  margin-right: 0px;
}

.hotsoup .contact dl {
  font-size: 20px;
  align-self: center;
  margin-bottom: 10px;
}

.hotsoup .contact a {
  color: #382820;
}

.hotsoup .contact .note {
  width: 100%;
}

.hotsoup .contact .note li {
  text-indent: -1em;
  padding-left: 1em;
  font-size: 15px;
  margin-top: 1.5em;
}



/**************************\
  Basic Modal Styles
\**************************/
.modal__content {
  position: relative;
}

.modal__content img {
  vertical-align: bottom;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal__container {
  max-width: 600px;
  max-height: 90svh;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal__close {
  background: transparent;
  position: absolute;
  top: -5px;
  right: 8px;
  font-size: 30px;
  color: #000;
  outline: none;
}

.modal__close:before {
  content: "\2715";

}

.hotsoup .modal-box {
  background: url(../img/bg_main.png) 0 0 / 70% auto repeat, #fff;
  position: relative;
}

.hotsoup .modal-box::before,
.hotsoup .modal-box::after {
  content: "";
  display: block;
  width: 100%;
}

.hotsoup .modal-box::before {
  aspect-ratio: 723/ 270;
  margin: 0 auto;
  width: 95%;
  background: url(../img/tit_modal.png) 0 0 / contain no-repeat;
}

.hotsoup .modal-box::after {
  aspect-ratio: 750 / 100;
}

.hotsoup .modal-box::after {
  background: url(../img/whg_logo.png) center center / 30% auto no-repeat, url(../img/bg_list_area01.webp) 0 0 / 80% auto repeat;
}

/* .hotsoup .modal-box.area02::after {
  background: url(../img/whg_logo.png) center center / 30% auto no-repeat, url(../img/bg_list_area02.webp) 0 0 / 80% auto repeat;
}

.hotsoup .modal-box.area03::after {
  background: url(../img/whg_logo.png) center center / 30% auto no-repeat, url(../img/bg_list_area03.webp) 0 0 / 80% auto repeat;
}

.hotsoup .modal-box.area04::after {
  background: url(../img/whg_logo.png) center center / 30% auto no-repeat, url(../img/bg_list_area04.webp) 0 0 / 80% auto repeat;
} */

.hotsoup .modal-box .txt-hotel {
  font-weight: bold;
  color: #a80001;
  margin: 0px auto 20px;
  text-align: center;
  padding-bottom: 20px;
  font-size: 24px;
  background: url(../img/line_area01.png) center bottom / 70% auto no-repeat;
}

.hotsoup .modal-box .menu-info {
  padding: 0 40px;
  font-size: 16px;
  position: relative;
}

.hotsoup .modal-box .menu-info+.menu-info::before {
  content: "";
  display: block;
  width: calc(100% + 80px);
  margin: 0 0 40px -40px;
  aspect-ratio: 750 / 70;
  background: url(../img/bg_list_area01.webp) 0 0 / 50% auto;
}

.hotsoup .modal-box .menu-info dt {
  font-size: 24px;
  text-align: center;
  color: #3e5976;
  font-weight: bold;
  margin-bottom: 20px;
}

.hotsoup .modal-box .img-menu {
  margin: 20px -40px 0;
  padding-bottom: 20px;
  background: url(../img/bg_modal_area01.png) center bottom / 100% auto no-repeat;
}

.hotsoup .modal-box .img-menu img {
  display: block;
  margin: 0 auto;
}

/**************************\
 Animation Style
\**************************/
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10%);
  }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}


@media (hover: hover) {

  .hotsoup .map-box li:hover,
  .hotsoup .splide__slide:hover {
    opacity: 0.6;
  }

  .hotsoup .menu-list li:hover {
    text-decoration: underline;
  }
}


@media (max-width: 767px) {
  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }


  .hotsoup {
    font-size: 3.2vw;
  }

  .hotsoup .mainvis {
    padding-bottom: 5vw;
  }

  .hotsoup .mainvis p {
    display: none;
  }


  .hotsoup .menu {
    padding: 0;
  }

  .hotsoup .map-box {
    aspect-ratio: 750 / 1000;
    background-image: url(../img/bg_map_sp.webp);
    background-position: 0 15vw;
  }

  .hotsoup .map-box h2 {
    max-width: none;
    width: 80%;
    max-width: none;
    position: relative;
    margin: 0;
    inset: auto;
  }

  .hotsoup .map-box p {
    position: relative;
    inset: auto;
    text-align: center;
    font-size: 2.8vw;
  }

  .hotsoup .map-box li {
    width: 25vw;
  }

  .hotsoup .map-box .map01 {
    top: 43vw;
    right: 3vw;
  }

  .hotsoup .map-box .map02 {
    top: 78vw;
    right: 8vw;
  }

  .hotsoup .map-box .map03 {
    top: 93vw;
    left: 35vw;
  }

  .hotsoup .map-box .map04 {
    bottom: auto;
    top: 50vw;
    left: 4vw;
  }

  .hotsoup .menu-box+.menu-box {
    margin-top: 5vw;
  }

  .hotsoup .menu-box h3 {
    margin: 0 auto -10vw;
    justify-content: center !important;
  }

  .hotsoup .menu-box h3 img {
    max-width: none;
    width: 60%;
  }

  .hotsoup .slide-box {
    margin: 0;
    aspect-ratio: 750 / 620;
    padding-top: 12vw;
  }

  /*slide*/
  .hotsoup .splide__arrow {
    width: 15vw;
  }

  .hotsoup .splide__arrow--prev {
    left: 3vw;
  }

  .hotsoup .splide__arrow--next {
    right: 3vw;
  }

  .hotsoup .splide__slide img {
    width: 95%;
    display: block;
    margin: 0 auto;
  }

  .hotsoup .menu-list {
    margin: 0;
  }


  .hotsoup .menu-list ul {
    gap: 2.5vw 0;
    width: 95%;
    padding: 5vw 4vw;
    margin: 0 auto;
    justify-content: space-between;
  }

  .hotsoup .menu-list li {
    width: 50%;
    text-align: center;
    font-size: 2.6vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hotsoup #area01 .slide-box {
    background-image: url(../img/bg_slide_area01_sp.webp);
  }

  .hotsoup #area02 .slide-box {
    background-image: url(../img/bg_slide_area02_sp.webp);
  }

  .hotsoup #area03 .slide-box {
    background-image: url(../img/bg_slide_area03_sp.webp);
  }

  .hotsoup #area04 .slide-box {
    background-image: url(../img/bg_slide_area04_sp.webp);
  }

  .hotsoup .contact {
    padding: 5vw 4vw 30vw;
    background-size: 140% auto;
  }

  .hotsoup .contact::before {
    width: 20vw;
    bottom: 15vw;
  }

  .hotsoup .contact h2 {
    font-size: 4vw;
    margin: 0 4vw 0 0;
    width: 6em;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
  }

  .hotsoup .contact h2::before {
    width: 5.5em;
    margin: 0 auto;
  }

  .hotsoup .contact dl {
    font-size: 3.2vw;
    flex: 1;
    margin-bottom: 0;
  }

  .hotsoup .contact .note li {
    font-size: 3vw;
  }

  .modal__container {
    width: 90vw;
    max-width: 500px;
  }

  .modal__close {
    position: fixed;
  }

  .hotsoup .modal-box {
    background-size: 150% auto;
    font-size: 3.5vw;
  }


  .hotsoup .modal-box .txt-hotel {
    font-size: 4.3vw;
    margin: 3vw 0;
    padding-bottom: 3vw;
  }

  .hotsoup .modal-box .txt-menu {
    padding: 0 3vw;
    text-align: center;
    font-size: 6vw;
    margin: 0 0 3vw;
    min-height: 0;
  }

  .hotsoup .modal-box .menu-info {
    padding: 0 4vw;
    font-size: 3.2vw;
  }

  .hotsoup .modal-box .menu-info+.menu-info::before {
    width: calc(100% + 8vw);
    margin: 0 0 5vw -4vw;
  }



  .hotsoup .modal-box .menu-info dt {
    font-size: 4.3vw;
    margin-bottom: 3vw;
  }

  .hotsoup .modal-box .img-menu {
    margin: 4vw -4vw 0;
  }
}

@media (max-width: 550px) {

  .modal__close {
    font-size: 8vw;
    right: 3vw;
  }
}