@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=M+PLUS+Rounded+1c:wght@400;700&family=Noto+Sans+JP:wght@100..900&display=swap&subset=japanese");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1.15;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

@keyframes zoomPC {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zoomSD {
  0% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
:root {
  --bk: #000;
  --bk00: rgb(0 0 0 / 0);
  --bk05: rgb(0 0 0 / .05);
  --bk10: rgb(0 0 0 / .10);
  --bk15: rgb(0 0 0 / .15);
  --bk20: rgb(0 0 0 / .20);
  --bk25: rgb(0 0 0 / .25);
  --bk30: rgb(0 0 0 / .30);
  --bk35: rgb(0 0 0 / .35);
  --bk40: rgb(0 0 0 / .40);
  --bk45: rgb(0 0 0 / .45);
  --bk50: rgb(0 0 0 / .50);
  --bk55: rgb(0 0 0 / .55);
  --bk60: rgb(0 0 0 / .60);
  --bk65: rgb(0 0 0 / .65);
  --bk70: rgb(0 0 0 / .70);
  --bk75: rgb(0 0 0 / .75);
  --bk80: rgb(0 0 0 / .80);
  --bk85: rgb(0 0 0 / .85);
  --bk90: rgb(0 0 0 / .90);
  --bk95: rgb(0 0 0 / .95);
  --wh: #fff;
  --wh00: rgb(255 255 255 / 0);
  --wh05: rgb(255 255 255 / .05);
  --wh10: rgb(255 255 255 / .10);
  --wh15: rgb(255 255 255 / .15);
  --wh20: rgb(255 255 255 / .20);
  --wh25: rgb(255 255 255 / .25);
  --wh30: rgb(255 255 255 / .30);
  --wh35: rgb(255 255 255 / .35);
  --wh40: rgb(255 255 255 / .40);
  --wh45: rgb(255 255 255 / .45);
  --wh50: rgb(255 255 255 / .50);
  --wh55: rgb(255 255 255 / .55);
  --wh60: rgb(255 255 255 / .60);
  --wh65: rgb(255 255 255 / .65);
  --wh70: rgb(255 255 255 / .70);
  --wh75: rgb(255 255 255 / .75);
  --wh80: rgb(255 255 255 / .80);
  --wh85: rgb(255 255 255 / .85);
  --wh90: rgb(255 255 255 / .90);
  --wh95: rgb(255 255 255 / .95);
  --key: #16a34a;
  --key00: rgb(22 163 74 / 0);
  --key05: rgb(22 163 74 / .05);
  --key10: rgb(22 163 74 / .10);
  --key15: rgb(22 163 74 / .15);
  --key20: rgb(22 163 74 / .20);
  --key25: rgb(22 163 74 / .25);
  --key30: rgb(22 163 74 / .30);
  --key35: rgb(22 163 74 / .35);
  --key40: rgb(22 163 74 / .40);
  --key45: rgb(22 163 74 / .45);
  --key50: rgb(22 163 74 / .50);
  --key55: rgb(22 163 74 / .55);
  --key60: rgb(22 163 74 / .60);
  --key65: rgb(22 163 74 / .65);
  --key70: rgb(22 163 74 / .70);
  --key75: rgb(22 163 74 / .75);
  --key80: rgb(22 163 74 / .80);
  --key85: rgb(22 163 74 / .85);
  --key90: rgb(22 163 74 / .90);
  --key95: rgb(22 163 74 / .95);
  --dark: #10532e;
  --yellow: #f7ef90;
  --line: #06c755;
  --text: #444;
  --required: #c00;
}

html {
  scroll-behavior: smooth;
}

html, body, input, button, textarea, select {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.3333333333vw;
  font-weight: 400;
  font-feature-settings: "palt";
}
@media (min-width: 769px) {
  html, body, input, button, textarea, select {
    font-size: 1.25vw;
  }
}
@media (min-width: 1281px) {
  html, body, input, button, textarea, select {
    font-size: 1rem;
  }
}

body {
  color: var(--bk70);
  background-color: #dcfce7;
  -webkit-text-size-adjust: 100%;
}
body::-webkit-scrollbar {
  width: 0.25rem;
}
body::-webkit-scrollbar-track {
  background-color: var(--bk10);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--bk30);
}
body * {
  box-sizing: border-box;
  letter-spacing: 0.05em;
}
body *::before, body *::after {
  box-sizing: border-box;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  background-color: var(--bk60);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.2, 1, 0.2, 1);
  backdrop-filter: blur(2.0833333333vw);
  -webkit-backdrop-filter: blur(2.0833333333vw);
}
@media (min-width: 769px) {
  body::before {
    backdrop-filter: blur(0.625rem);
  }
}
body.open {
  overflow: hidden;
}
body.open::before {
  opacity: 1;
}
body.open .globalnav {
  transform: translateY(-100%);
}
@media (min-width: 769px) {
  body.open .globalnav {
    transform: translateX(-100%);
  }
}
body.open .menunav button .icon {
  background-color: transparent !important;
}
body.open .menunav button .icon::before, body.open .menunav button .icon::after {
  top: 0 !important;
}
body.open .menunav button .icon::before {
  transform: translateX(0) rotate(45deg);
}
body.open .menunav button .icon::after {
  transform: translateX(0) rotate(-45deg);
}

::selection {
  color: var(--wh);
  background-color: var(--key);
}

a {
  transition: opacity 0.5s cubic-bezier(0.2, 1, 0.2, 1), background 0.5s cubic-bezier(0.2, 1, 0.2, 1), transform 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}
a:link, a:visited {
  color: var(--bk70);
  text-decoration: underline;
}
a:focus, a:active {
  color: var(--bk70);
  text-decoration: none;
}
@media (any-hover: hover) {
  a:hover, a:focus-visible {
    color: var(--key);
    text-decoration: none;
  }
}

img, svg, picture {
  max-width: 100%;
  vertical-align: bottom;
}

picture {
  display: block;
}

picture img {
  width: 100%;
}

strong {
  font-weight: 700;
}

sup {
  vertical-align: super;
  font-size: 60%;
}

input[type=submit], input[type=button], button {
  -webkit-appearance: button;
  appearance: button;
  outline: none;
  padding: 0;
  border: 0 none;
  border-radius: 0;
  background-color: transparent;
  transition: all 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}
input[type=submit]::-webkit-search-decoration, input[type=button]::-webkit-search-decoration, button::-webkit-search-decoration {
  display: none;
}
input[type=submit]:focus, input[type=button]:focus, button:focus {
  outline-offset: -2px;
}

.wrapper {
  position: relative;
  overflow: clip;
}

.sp {
  display: block;
}
@media (min-width: 769px) {
  .sp {
    display: none;
  }
}

span.sp {
  display: inline;
}
@media (min-width: 769px) {
  span.sp {
    display: none;
  }
}

.pc {
  display: none;
}
@media (min-width: 769px) {
  .pc {
    display: block;
  }
}

span.pc {
  display: none;
}
@media (min-width: 769px) {
  span.pc {
    display: inline;
  }
}

.iv {
  opacity: 0;
  transition: opacity 0.7s linear 0.1s, transform 0.7s cubic-bezier(0.2, 1, 0.2, 1) 0.1s, filter 0.7s cubic-bezier(0.2, 1, 0.2, 1) 0.1s;
}
.iv.inview {
  opacity: 1;
}
.iv.up {
  transform: translateY(12.5vw);
}
@media (min-width: 769px) {
  .iv.up {
    transform: translateY(3.75rem);
  }
}
.iv.up.inview {
  transform: translateY(0);
}
.iv.down {
  transform: translateY(-12.5vw);
}
@media (min-width: 769px) {
  .iv.down {
    transform: translateY(-3.75rem);
  }
}
.iv.down.inview {
  transform: translateY(0);
}
.iv.lin {
  transform: translateX(-12.5vw);
}
@media (min-width: 769px) {
  .iv.lin {
    transform: translateX(-3.75rem);
  }
}
.iv.lin.inview {
  transform: translateX(0);
}
.iv.rin {
  transform: translateX(12.5vw);
}
@media (min-width: 769px) {
  .iv.rin {
    transform: translateX(3.75rem);
  }
}
.iv.rin.inview {
  transform: translateX(0);
}
.iv.zoom {
  transform: scale(0.75);
}
.iv.zoom.inview {
  transform: scale(1);
}
.iv.blur {
  filter: blur(4.1666666667vw);
}
@media (min-width: 769px) {
  .iv.blur {
    filter: blur(1.25rem);
  }
}
.iv.blur.inview {
  filter: blur(0);
}

/* Header
---------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 13;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 12.5vw;
  background-color: var(--key);
}
@media (min-width: 769px) {
  .header {
    justify-content: space-between;
    height: 5rem;
    padding: 1rem;
  }
}
@media (any-hover: hover) {
  .header .logo:hover {
    opacity: 0.6;
  }
}
.header .logo h1 {
  position: relative;
  height: 6.6666666667vw;
  aspect-ratio: 8/1;
  font-size: 0;
}
@media (min-width: 769px) {
  .header .logo h1 {
    height: 2rem;
  }
}
.header .logo h1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--wh);
  mask: url("../images/logo.svg") no-repeat 50% 50%/contain;
}

.globalnav {
  position: fixed;
  top: 100%;
  left: 0;
  z-index: 12;
  width: 100%;
  height: 100%;
  padding-top: 16.6666666667vw;
  background-color: var(--dark);
  transition: transform 0.5s cubic-bezier(0.2, 1, 0.2, 1);
  overflow-y: auto;
}
@media (min-width: 769px) {
  .globalnav {
    top: 0;
    left: 100%;
    width: 22.5rem;
    padding-top: 6.25rem;
  }
}
.globalnav ul {
  padding: 0 6.6666666667vw;
}
@media (min-width: 769px) {
  .globalnav ul {
    padding: 0 2rem;
  }
}
.globalnav ul a {
  display: block;
  padding: 4.1666666667vw;
  font-size: 3.3333333333vw;
  font-weight: 700;
  color: var(--wh);
  text-decoration: none;
}
@media (min-width: 769px) {
  .globalnav ul a {
    padding: 1.25rem;
    font-size: 1rem;
  }
}
@media (any-hover: hover) {
  .globalnav ul a:hover, .globalnav ul a:focus-visible {
    background-color: var(--wh10);
  }
}

/* Footer
---------------------------------------------------------------- */
.footer {
  background-color: var(--dark);
  color: var(--wh);
  padding: 10vw 5vw 4.1666666667vw;
}
@media (min-width: 769px) {
  .footer {
    padding: 4rem 2.5rem 1.5rem;
  }
}
@media (min-width: 769px) {
  .footer .contents {
    display: flex;
    justify-content: center;
  }
}
.footer .info {
  text-align: center;
}
@media (min-width: 769px) {
  .footer .info {
    width: 45rem;
  }
}
.footer .logo {
  display: block;
  margin-bottom: 5vw;
  font-size: 0;
  color: var(--wh);
}
@media (min-width: 769px) {
  .footer .logo {
    margin-bottom: 1.5rem;
  }
}
.footer .logo svg {
  display: block;
  width: 100%;
  height: 6.6666666667vw;
}
@media (min-width: 769px) {
  .footer .logo svg {
    height: 2rem;
  }
}
.footer .rooms {
  display: flex;
  justify-content: center;
  gap: 13.3333333333vw;
  margin-bottom: 5vw;
}
@media (min-width: 769px) {
  .footer .rooms {
    gap: 4rem;
    margin-bottom: 2.5rem;
  }
}
.footer .rooms li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6666666667vw;
}
@media (min-width: 769px) {
  .footer .rooms li {
    gap: 0.5rem;
  }
}
.footer .rooms li:nth-child(2) {
  transition-delay: 0.2s;
}
.footer .rooms li .name {
  font-size: 3.3333333333vw;
  font-weight: 700;
  margin-bottom: 1.6666666667vw;
}
@media (min-width: 769px) {
  .footer .rooms li .name {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
  }
}
.footer .rooms li .staff, .footer .rooms li .address, .footer .rooms li .hours {
  color: var(--wh80);
  font-size: 2.9166666667vw;
}
@media (min-width: 769px) {
  .footer .rooms li .staff, .footer .rooms li .address, .footer .rooms li .hours {
    font-size: 1rem;
  }
}
.footer .rooms li .tel {
  display: flex;
  align-items: center;
  gap: 1.6666666667vw;
  margin-top: 0.8333333333vw;
  color: var(--wh);
  font-family: "Comfortaa", sans-serif;
  font-size: 3.75vw;
  font-weight: 700;
  text-decoration: none;
}
@media (min-width: 769px) {
  .footer .rooms li .tel {
    pointer-events: none;
    margin-top: 0.5rem;
    gap: 0.5rem;
    font-size: 1.5rem;
  }
}
.footer .rooms li .tel::before {
  content: "";
  width: 0.75em;
  aspect-ratio: 1/1;
  margin-bottom: 0.125em;
  background: var(--wh);
  mask: url("../images/icon_tel.svg") no-repeat 50% 50%/contain;
}
.footer .copyright {
  margin-top: 6.6666666667vw;
  color: var(--wh50);
  font-family: "Comfortaa", sans-serif;
  font-size: 2.9166666667vw;
  text-align: center;
}
@media (min-width: 769px) {
  .footer .copyright {
    margin-top: 2.5rem;
    font-size: 0.875rem;
  }
}

.floating {
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 14;
  width: 100%;
  background-color: var(--wh);
}
@media (min-width: 769px) {
  .floating {
    position: fixed;
    top: 0;
    right: 0;
    bottom: initial;
    left: initial;
    width: 32.5rem;
    background-color: transparent;
  }
}
.floating ul {
  display: flex;
}
@media (min-width: 769px) {
  .floating ul {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    height: 5rem;
  }
}
.floating ul li {
  flex-grow: 1;
}
@media (min-width: 769px) {
  .floating ul li {
    flex-grow: 0;
  }
}
.floating ul a, .floating ul .menunav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.6666666667vw;
  width: 100%;
  height: 16.6666666667vw;
  color: var(--key);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}
@media (min-width: 769px) {
  .floating ul a, .floating ul .menunav {
    gap: 0.5rem;
    width: 5rem;
    height: 5rem;
  }
}
@media (any-hover: hover) {
  .floating ul a:hover, .floating ul .menunav:hover {
    opacity: 0.6;
  }
}
.floating ul a .label, .floating ul .menunav .label {
  font-size: 2.9166666667vw;
  font-weight: 700;
}
@media (min-width: 769px) {
  .floating ul a .label, .floating ul .menunav .label {
    font-size: 0.875rem;
  }
}
@media (min-width: 769px) {
  .floating ul .tel a {
    flex-direction: row;
    width: 17.5rem;
    height: 1.875rem;
    pointer-events: none;
  }
  .floating ul .tel a .label {
    padding-bottom: 0.25rem;
    color: var(--wh);
    font-size: 1rem;
  }
}
.floating ul .tel a::before {
  content: "";
  width: 6.6666666667vw;
  aspect-ratio: 1/1;
  background-color: var(--key);
  mask: url("../images/icon_phone.svg") no-repeat 50% 50%/contain;
}
@media (min-width: 769px) {
  .floating ul .tel a::before {
    display: none;
  }
}
.floating ul .tel a .num {
  display: none;
}
@media (min-width: 769px) {
  .floating ul .tel a .num {
    display: block;
    font-family: "Comfortaa", sans-serif;
    color: var(--wh);
    font-size: 1.5rem;
  }
}
@media (min-width: 769px) {
  .floating ul .mail a {
    color: var(--wh);
    background-color: var(--dark);
  }
}
.floating ul .mail a::before {
  content: "";
  width: 6.6666666667vw;
  aspect-ratio: 1/1;
  background-color: var(--key);
  mask: url("../images/icon_write.svg") no-repeat 50% 50%/contain;
}
@media (min-width: 769px) {
  .floating ul .mail a::before {
    width: 2rem;
    background-color: var(--wh);
  }
}
.floating ul .line a {
  color: var(--line);
}
@media (min-width: 769px) {
  .floating ul .line a {
    background-color: var(--wh);
  }
}
.floating ul .line a::before {
  content: "";
  width: 6.6666666667vw;
  aspect-ratio: 1/1;
  background: url("../images/sns_line.svg") no-repeat 50% 50%/contain;
}
@media (min-width: 769px) {
  .floating ul .line a::before {
    width: 2rem;
  }
}
@media (min-width: 769px) {
  .floating ul .menunav {
    color: var(--wh);
    background-color: var(--dark);
  }
}
.floating ul .menunav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.6666666667vw;
  aspect-ratio: 1/1;
  background: none;
  border: 0;
  pointer-events: none;
}
@media (min-width: 769px) {
  .floating ul .menunav button {
    width: 2rem;
  }
}
.floating ul .menunav button .icon {
  position: relative;
  display: block;
  width: 100%;
  height: 0.4166666667vw;
  border-radius: 0.2083333333vw;
  background-color: var(--key);
  transition: background-color 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}
@media (min-width: 769px) {
  .floating ul .menunav button .icon {
    height: 0.125rem;
    border-radius: 0.0625rem;
    background-color: var(--wh);
  }
}
.floating ul .menunav button .icon::before, .floating ul .menunav button .icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.4166666667vw;
  border-radius: 0.2083333333vw;
  background-color: var(--key);
  transition: all 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}
@media (min-width: 769px) {
  .floating ul .menunav button .icon::before, .floating ul .menunav button .icon::after {
    height: 0.125rem;
    border-radius: 0.0625rem;
    background-color: var(--wh);
  }
}
.floating ul .menunav button .icon::before {
  top: -2.2916666667vw;
}
@media (min-width: 769px) {
  .floating ul .menunav button .icon::before {
    top: -0.6875rem;
  }
}
.floating ul .menunav button .icon::after {
  top: 2.2916666667vw;
}
@media (min-width: 769px) {
  .floating ul .menunav button .icon::after {
    top: 0.6875rem;
  }
}

/* Form validation (jquery.validationEngine)
---------------------------------------------------------------- */
.formError {
  position: absolute;
  z-index: 20;
  top: initial !important;
  right: 0 !important;
  bottom: calc(100% - 8.3333333333vw) !important;
  left: initial !important;
  margin-top: 0 !important;
}
@media (min-width: 769px) {
  .formError {
    bottom: calc(100% - 2.5rem) !important;
  }
}
@media (any-hover: hover) {
  .formError:hover {
    cursor: pointer;
  }
}
.formError .formErrorContent {
  position: relative;
  padding: 1.6666666667vw 3.3333333333vw;
  border-radius: 1.6666666667vw;
  background-color: var(--required);
  color: var(--wh);
  font-size: 2.5vw;
  line-height: 1.6;
}
@media (min-width: 769px) {
  .formError .formErrorContent {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
  }
}
.formError .formErrorArrow {
  display: none;
}
.formError::before {
  content: "";
  position: absolute;
  bottom: -1.4583333333vw;
  right: 3.3333333333vw;
  width: 3.3333333333vw;
  aspect-ratio: 2/1;
  background-color: var(--required);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media (min-width: 769px) {
  .formError::before {
    bottom: -0.4375rem;
    right: 1rem;
    width: 1rem;
  }
}