@charset "utf-8";

h2 {
  margin-top: 100px;
}

/* タイトルのためのCSS */
.menu-menu {
  text-align: center;
}
.menu-title {
  margin-bottom: 80px;
}

.menu-menu .menu-title {
  position: relative;
}

.menu-menu .menu-title::after {
  position: absolute;
  content: attr(title-ja);
  font-family: "Hannari", "Hina Mincho", sans-serif;
  font-size: 16px;
  letter-spacing: 0.1rem;

  position: absolute;
  bottom: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
}

.menu-menu .content p {
  text-align: left;
  margin-right: 20px;
}

table {
  width: 100%;
  margin: 0 auto;
}

/* set menu */
.setmenu .tr {
  margin-bottom: 10px;
}

/* spa & treatment 文字間 */
.spa .content p,
.spa .col-left,
.treatment .content p,
.treatment .col-left {
  margin-bottom: 40px;
}

.spa .col-left,
.treatment .col-left {
  margin-right: 20px;
  width: 50%;
}

/* color */

.color table:not(:last-child),
.parm table:not(:last-child) {
  margin-bottom: 30px;
}

.line {
  border-bottom: 1px solid #fff;
}

.menu-box-inside {
  border: #fff 3px solid;
  padding: 60px;
}

.caption {
  display: block;
  margin-bottom: 20px;

  border: #fff 1px solid;
  padding: 5px;
  text-align: left;
  width: 200px;
}

/*-------------------------------------------
event
-------------------------------------------*/
.event-text {
  width: 432px;
  margin: 0 auto 40px auto;
  text-align: left;
}

.event-text p {
  margin-bottom: 30px;
}

.event .content {
  gap: 20px;
}

.event .content,
.event .menu-notice {
  margin-bottom: 40px;
}

/*-------------------------------------------
hair style　garally
-------------------------------------------*/

.menu-hair-styles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex-wrap: wrap;
  gap: 20px;
}

@media (max-width: 768px) {
  /* green-box */
  .menu-box {
    padding: 30px 10px;
  }
  .menu-box-inside {
    border: #fff 3px solid;
    padding: 10px;
  }
  .event-text {
    width: 100%;
    margin: 0 auto 40px auto;
    text-align: left;
  }
  .menu-notice {
    width: 100%;
    margin: 0 auto;
    text-align: left;
    white-space: initial;
  }
  .menu-hair-styles {
    grid-template-columns: repeat(1, 1fr);
  }

  .tr .content {
    align-items: flex-start;
  }

  .setmenu .tr {
    margin-bottom: 20px;
  }

  .spa .col-left,
  .treatment .col-left {
    margin-right: 0px;
    width: 100%;
  }
}