@charset "utf-8";



:root {
 --primary-font-size: 16px;
 --primary-font-clr: #646464;
 --active-font-clr: #781100;
 --active-clor: #bd272d;

 --sanserif-ff: "Helvetica Neue", "Arial", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, "ヒラギノ角ゴ Pro W3", メイリオ, sans-serif;
 --sanserif-ff-ja: "Helvetica Neue", "Arial", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, "ヒラギノ角ゴ Pro W3", メイリオ, sans-serif;
 --yuGothic-ff-ja: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, "ヒラギノ角ゴ Pro W3", メイリオ, sans-serif;

 --primary-shadow: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.6));

 --input-ttl-font-size: 24px;
 --input-font-size: 21px;

 --green: #0c9;
 --orange: #FF7557;
 --gray: #E6ECEF;
 --black: #646464;
 --blue: #00B4D2;

 --list-padding: 55px;
 --news-ttl-font-size: 21px;
}

@media (max-width:767px) {
 :root {
  --primary-font-size: 15px;
  --sanserif-ff-ja: -apple-system, "BlinkMacSystemFont", "Helvetica Neue", Helvetica, "Arial", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  --list-padding: 15px;
  --news-ttl-font-size: 18px;
 }
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: var(--sanserif-ff-ja);
 font-weight: 400;
}

html {
 height: 100%;
 color: var(--black);
}

html {
 scroll-behavior: smooth;
}

body {
 margin: 0;
 width: 100%;
 position: relative;
 font-size: var(--primary-font-size);
 background-color: #fff;
 font-family: var(--sanserif-ff-ja);
 font-feature-settings: "palt";
 -webkit-font-smoothing: antialiased
}

a {
 cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 color: var(--primary-font-clr);
 font-family: var(--sanserif-ff-ja);
 font-feature-settings: "palt";
 -webkit-font-smoothing: antialiased
}

p {
 color: var(--primary-font-clr);
 font-family: var(--sanserif-ff-ja);
 font-weight: 400;
 font-size: var(--primary-font-size);
 line-height: 1.6;
 letter-spacing: 0;
 font-feature-settings: "palt";
 user-select: none;
 -webkit-font-smoothing: antialiased
}

img {
 max-width: 100%;
}

.sponly {
 display: none;
}

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

 .sponly {
  display: block;
 }
}

/* 予約ページ */

.modal-close {
 display: block;
 font-size: 50px;
 font-weight: 100;
 line-height: 0;
 color: #212121;
 position: absolute;
 top: 20px;
 right: 20px;
 transform: rotate(45deg);
}

#menuWrap {
 position: fixed;
 top: 0;
 right: 0;
 width: 100vw;
 height: 100vh;
 z-index: 999;
 background-color: rgba(0, 0, 0, 0.5);
 pointer-events: none;
 overflow-y: auto;
 display: none;
 opacity: 0;
 animation: fadeOut 1s ease 0s 1 normal forwards;
 overscroll-behavior-y: contain;
 overflow-y: auto;
}


#menuWrap.active {
 pointer-events: all;
 display: block;
 opacity: 1;
 animation: fadeIn 1s ease 0s 1 normal forwards;
}

@keyframes fadeIn {
 0% {
  opacity: 0
 }

 100% {
  opacity: 1
 }
}

#modal-contentsWrapper {
 width: min(100%, 600px);
 /* min-height: 50vh; */
 background-color: #fff;
 display: block;
 margin: 100px auto;
 position: relative;
 padding: 80px 30px 70px;
}

#modal-contentsWrapper p.modal-ttl {
 font-size: clamp(1.3125rem, 0.5833rem + 3.1111vw, 1.75rem);
 font-weight: bold;
 letter-spacing: 0.03em;
 text-align: center;
 margin-bottom: 1rem;
}

#modal-contentsWrapper p {
 letter-spacing: 0.03em;
 text-align: center;
 line-height: 1.5;
 margin-bottom: 2rem;
}

#modal-contentsWrapper p span {
 font-size: 80%;
}

#modal-contentsWrapper ul {
 margin-block: 1rem;
}

#modal-contentsWrapper ul li:not(:last-child) {
 margin-bottom: 2rem;
}

#modal-contentsWrapper ul li p {
 margin-bottom: 0;
}

#modal-contentsWrapper ul li a {
 width: fit-content;
 font-size: clamp(1rem, 0.7917rem + 0.8889vw, 1.125rem);
 font-weight: bold;
 text-align: center;
 padding: 10px 30px;
 border-radius: 50px;
 background-color: #00B4D2;
 display: block;
 margin-inline: auto;
 color: #fff;
 transition: 0.5s;
}

#modal-contentsWrapper ul li a:hover {
 opacity: 0.8;
}