@charset "utf-8";
body {
  font-family: var(--serif);
  color: var(--text-dark);
}
.main {
  padding: var(--space-l) 0;
  background-color: var(--cream);
}
.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-l) 4%;
  background-color: inherit;
}
.bg-white {
  background-color: var(--white);
  padding: var(--space-l) 4%;
  .wrapper {
    background-color: white;
  }
}
.grid {
  display: grid;
}
.item {
  padding: var(--space-xs) var(--space-s);
}
.title {
  margin-bottom: var(--space-s);
}
.section-label {
  font-size: var(--text-xs);
  font-family: var(--sans);
  color: var(--green-muted);
  letter-spacing: 2px;
}
/* --------------------
header
----------------------*/
.header {
  background-color: var(--cream);
  padding: var(--space-xs);
  border-bottom: 1px solid var(--warm-beige);
}
.logo {
  color: var(--brown-dark);
  position: relative;
}
.logo::after {
  content: "YASURAGI SEITAI-IN";
  position: absolute;
  bottom: -40%;
  left: 0;
  font-size: var(--text-s);
  color: var(--brown-light);
  letter-spacing: 3px;
}
.ham {
  display: block;
  border: none;
  width: 31px;
  height: 31px;
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 30;
  cursor: pointer;
  background-color: transparent;
}
.ham span {
  position: absolute;
  width: 100%;
  height: 2px;
  right: 0;
}
.ham1 {
  top: calc(50% - 10% / 2 - 26%);
  transition: 0.2s;
  background-color: var(--brown-dark);
}
.ham2 {
  top: calc(50% - 10% / 2);
  background-color: var(--brown-dark);
}
.ham3 {
  top: calc(50% - 10% / 2 + 25%);
  transition: 0.5s;
  background-color: var(--brown-dark);
}
.open .ham1 {
  top: calc(50% - 10% / 2);
  background-color: var(--brown-dark);
  transform: rotate(135deg);
}
.open .ham2 {
  opacity: 0;
}
.open .ham3 {
  top: calc(50% - 10% / 2);
  background-color: var(--brown-dark);
  transform: rotate(-135deg);
}
.main-navigation {
  display: none;
  position: fixed;
  background-color: var(--warm-beige);
  width: 100%;
  height: 100vh;
  padding: var(--space-m) 0;
  top: 0;
  right: -100%;
  transition: 1s ease-in;
  z-index: 20;
  & li {
    line-height: 3;
    text-align: center;
  }
  & a {
    font-size: var(-title-h2);
  }
  & a:hover {
    color: var(--brown-mid);
  }
}

.open .main-navigation {
  display: block;
  right: 0;
}

/* --------------------
main
----------------------*/
/* section-hero */
.hero {
  background-image: url(assets/img/mainvisual.webp);
  background-position: 50% 50%;
  background-size: cover;
  height: 550px;
  position: relative;
  .inner {
    position: absolute;
    bottom: 10%;
    left: 5%;
    background-color: #fdfcfa70;
    padding: var(--space-xs);
  }

  .section-label {
    margin-bottom: var(--space-m);
  }
}
.catchphrase {
  font-weight: bold;
  /* font-size: clamp(1.5rem, 1.167rem + 1.67vw, 2rem); */
  font-size: var(--title-h1);
  margin-bottom: var(--space-s);
  & span {
    color: var(--green-muted);
  }
}
.catchphrase + p {
  line-height: 25px;
}
.catchphrase + p,
.title + p {
  font-family: var(--sans);
  font-size: var(--text-s);
  letter-spacing: clamp(0.063rem, 0.042rem + 0.1vw, 0.094rem);
  margin-bottom: var(--space-s);
}
.button {
  & a {
    display: inline-block;
    padding: var(--space-xxs) var(--space-xs);
    border: 1px solid var(--brown-dark);
    font-family: var(--sans);
    font-size: var(--text-s);
    transition: 0.2s ease;
  }
  .reservation-button {
    background-color: var(--brown-dark);
    color: var(--white);
    margin-right: var(--space-xxs);
  }
  .reservation-button:hover {
    background-color: var(--brown-deep);
  }
  .access-button:hover {
    background-color: var(--brown-mid);
    color: var(--white);
    border: 1px solid var(--brown-mid);
  }
}
/* section concept */
.concept {
  .item {
    background-color: var(--cream);
    margin-bottom: var(--space-xxs);
  }
  .number {
    font-size: 2rem;
    color: var(--warm-beige);
  }
  & h3 {
    margin-bottom: var(--space-xs);
  }
}
/* section price */
.price {
  .item {
    border: 1px solid var(--warm-beige);
    background-color: var(--white);
    border-radius: 3px;
  }
  & span {
    background-color: var(--green-soft);
    color: var(--white);
    font-size: var(--text-xs);
    padding: 3px 5px;
    margin-left: var(--space-xxs);
  }
  & h3 + p {
    margin-bottom: var(--space-xs);
    font-family: var(--sans);
  }
  .small {
    font-size: var(--text-xs);
    font-family: var(--sans);
  }
  .price {
    font-size: var(--title-h1);
  }
  .price::after {
    content: " 円（税込）";
    font-size: var(--text-s);
  }
}
/* section voice */
.voice.bg {
  background-color: var(--warm-beige);
}
.voice {
  .item {
    background-color: var(--white);
    padding-top: var(--space-m);
    border-radius: 3px;
    margin-bottom: var(--space-xxs);
  }
  .star {
    color: var(--brown-light);
    margin-bottom: var(--space-xs);
  }
  .star + p {
    margin-bottom: var(--space-s);
  }
}
/* section profile */
.profile {
  .image {
    margin-bottom: var(--space-s);
  }
  & img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    border-radius: 3px;
    object-position: 50% 35%;
  }
  & h3 {
    margin-bottom: var(--space-s);
  }
  & h3 span {
    font-size: var(--text-xs);
    color: var(--text-light);
    font-family: var(--sans);
    letter-spacing: 2px;
  }
  .introduction {
    font-family: var(--sans);
    font-size: var(--text-s);
    line-height: 1.8;
    & p {
      margin-bottom: var(--space-xs);
    }
  }
  & ul {
    font-family: var(--sans);
    color: var(--text-light);
    font-size: var(--text-s);
    line-height: 1.8;
  }
  & li::before {
    content: "- ";
  }
}
/* section access */
.access {
  background-color: var(--brown-deep);
  color: var(--white);
  .section-label,
  .title + p {
    color: var(--text-light);
  }
  .map {
    width: 100%;
    height: 250px;
    border-radius: 3px;
    background-color: var(--brown-dark);
    margin-bottom: var(--space-m);
    align-items: center;
    justify-content: space-around;
    font-size: 3rem;
    color: var(--brown-mid);
  }
  .lists.grid {
    grid-template-columns: 1fr 3fr;
    font-size: var(--text-s);
    font-family: var(--sans);
    & dt,
    & dd {
      padding: var(--space-s) var(--space-xs);
      border-bottom: 1px solid #fdfcfa56;
    }
    & dt {
      color: #fdfcfa56;
    }
  }
}
/* section reservation */
.reservation {
  & h2,
  & div {
    text-align: center;
  }
  & div {
    padding: var(--space-m) var(--space-s);
    background-color: var(--white);
    font-family: var(--sans);
    border: 1px solid var(--warm-beige);
  }
  & div p:first-child,
  & div p:last-child {
    font-size: var(--text-xs);
    margin-bottom: var(--space-s);
  }
  .tel {
    font-size: 2rem;
    letter-spacing: 2px;
  }
}
/* --------------------
footer
----------------------*/
.footer {
  background-color: var(--brown-deep);
  color: var(--text-light);
  text-align: center;
  font-family: var(--sans);
  font-size: var(--text-s);
  .wrapper p:first-child {
    color: var(--white);
    font-size: var(--title-h2);
    font-family: var(--serif);
  }
}