/* ==========================================================================
  base
========================================================================== */
html {
  height: -webkit-fill-available;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 13px;
  color: #221714;
  background-color: #faf5f0;
  letter-spacing: 0.1em;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: -webkit-fill-available;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  text-spacing-trim: space-all;
}

html.is-menu-open,
body.is-menu-open {
  overflow: hidden;
  height: 100%;
}

img {
  vertical-align: bottom;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: #221714;
}

@media (min-width: 540px) {
  a[href^="tel:"] {
    pointer-events: none;
    text-decoration: none;
  }
}

.popup-wrap {
  width: 100%;
  height: 100dvh;
  background-color: rgba(238, 174, 175, 0.9);
  position: fixed;
  inset: 0;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.35s ease, visibility 0.35s ease;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.popup-wrap.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.popup-wrap.is-open .popup-inner {
  -webkit-transform: translate(-50%, -50%) translateY(0);
          transform: translate(-50%, -50%) translateY(0);
  opacity: 1;
}

.popup-wrap .popup-close {
  width: 100px;
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
}

.popup-wrap .popup-inner {
  width: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) translateY(12px);
          transform: translate(-50%, -50%) translateY(12px);
  opacity: 0;
  -webkit-transition: opacity 0.35s ease, -webkit-transform 0.35s ease;
  transition: opacity 0.35s ease, -webkit-transform 0.35s ease;
  transition: transform 0.35s ease, opacity 0.35s ease;
  transition: transform 0.35s ease, opacity 0.35s ease, -webkit-transform 0.35s ease;
}

@media (max-width: 767px) {
  .popup-wrap .popup-inner {
    width: 90%;
  }
}

.popup-wrap .popup-txtWrap {
  background-color: #fff;
  border-radius: 80px;
  padding: 50px;
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .popup-wrap .popup-txtWrap {
    border-radius: 60px;
    padding: 30px;
    font-size: 13px;
  }
}

.popup-wrap .popup-turtle {
  width: 200px;
  margin: 30px auto 0;
}

@media (max-width: 767px) {
  .popup-wrap .popup-turtle {
    width: 130px;
  }
}