@charset "utf-8";

/* responsive ----*/
/* spシェアだと430px */
@media screen and (max-width: 700px) {
  /* common------------------------------------ */
  .flex-container {
    flex-direction: column;
  }
  .item,
  .item30,
  .item40,
  .item50,
  .item70 {
    width: 100%;
  }
  #header,
  #header-other,
  #footer {
    .logo {
      scale: 0.6;
    }
  }
  .logo::after {
    font-size: 1.5rem;
    width: max-content;
    bottom: -3rem;
    left: 0;
  }
  .wrapper {
    margin: 0 0.5rem;
  }

  /* ハンバーガーメニュー -------- */
  .ham {
    width: 31px;
    height: 31px;
    position: fixed;
    right: 2rem;
    top: 1rem;
    z-index: 30;
    cursor: pointer;
    background-color: transparent;
  }
  .ham span {
    position: absolute;
    width: 100%;
    height: 2px;
  }
  .ham1 {
    top: calc(50% - 10% / 2 - 25%);
    transition: 0.2s;
    background-color: #333;
  }
  .ham2 {
    top: calc(50% - 10% / 2);
    background-color: #333;
  }
  .ham3 {
    top: calc(50% - 10% / 2 + 25%);
    transition: 0.5s;
    background-color: #333;
  }

  .open .ham1 {
    top: calc(50% - 10% / 2);
    background-color: #333;
    transform: rotate(135deg);
  }
  .open .ham2 {
    opacity: 0;
  }
  .open .ham3 {
    top: calc(50% - 10% / 2);
    background-color: #333;
    transform: rotate(-135deg);
  }
  .main-navigation {
    position: fixed;
    background-color: var(--bg2-color);
    width: 100%;
    height: 50vh;
    padding: 7rem 1rem;
    top: -60%;
    left: 0;
    transition: 1s;
    z-index: 5;
    text-align: center;
  }
  .nav-menu {
    flex-direction: column;
  }
  .nav-menu li {
    line-height: 2;
  }
  .nav-menu a {
    font-size: 1rem;
    padding-left: 1rem;
    color: #333;
  }

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

  /* header.php(トップページの時）--------------- */
  #header {
    padding: 0.5rem 0;
    display: flex;
    height: 5rem;
    .contact {
      background-color: transparent;
      padding: 0;
      font-size: 0.8rem;
    }
    .blank {
      display: none;
    }
    .logo {
      top: -1rem;
      scale: 0.5;
    }
    .logo::after {
      font-size: 1.5rem;
      bottom: -5rem;
      left: 11rem;
    }
  }
  .anime,
  .anime li,
  .anime img {
    height: 50vh;
  }

  /* header.php(トップページ以外の時）----------- */
  .header {
    justify-content: left;
  }
  #header-other {
    padding: 0.5rem 0;
    .logo::after {
      font-size: 1.5rem;
      bottom: -2rem;
      left: 10rem;
      width: max-content;
    }
  }

  /* footer.php-------------------------------- */
  #footer {
    .logo {
      margin-left: -8rem;
    }
    .logo::after {
      bottom: 2rem;
      left: 10rem;
    }
    .item {
      margin-bottom: 1rem;
    }
  }

  /* front-page.php---------------------------- */
  #front-page {
    .flow {
      .revers {
        flex-direction: column;
      }
    }
  }
  /* page-menu.php----------------------------- */
  #page-menu {
    line-height: 2.5;
    .blank {
      display: block;
    }
    & tbody tr:first-of-type {
      line-height: 1.8;
    }
    .reference {
      line-height: 1.5;
    }
  }
  /* page-staff.php----------------------------- */
  #page-staff {
    & img {
      width: 60%;
    }
  }

  /* page-reservation.php----------------------- */
  #page-reserve {
    .item {
      width: 100%;
      margin-bottom: 2rem;
    }
    .item::after {
      content: "▼";
      right: 16rem;
      bottom: -2rem;
    }
  }
  /* page-policy.php----------------------------- */
  #page-policy p {
    margin-bottom: 2rem;
  }
}
/* ************************************************************** */

@media screen and (min-width: 1500px) {
  #booking-package_inputFormPanel {
    margin: 0 clamp(3rem, -30.333rem + 53.33vw, 15rem);
    & textarea {
      height: 8rem;
    }
  }

  #booking-package {
    font-size: 0.9rem !important;
    & input,
    & textarea {
      font-size: 0.8rem;
    }
    & input[type="text"] {
      padding: 1rem !important;
    }
    & input[type="checkbox"] {
      width: 1rem;
      height: 1rem;
      padding: 1rem !important;
    }
    & button {
      padding: 1rem;
      font-size: 0.9rem !important;
    }
  }

  #booking-package_schedulePage .courseListPanel {
    top: 2rem !important;
    min-height: max-content !important;
  }
}

.service_name_cost {
  font-weight: bold;
}
.service_name_cost::before {
  content: "■";
}
.reserve-page {
  .addedService,
  .bookingDate {
    margin-left: 2rem;
  }
}
.no-flow {
  display: none;
}
/* **************************************************** */
@media screen and (max-width: 430px) {
  #header,
  #header-other {
    padding: 0.5rem 4rem 0 0;
  }
  #header-other .ham {
    right: 1rem;
  }
  .contact {
    text-align: right;
  }
  #footer {
    .logo {
      margin-left: -6rem;
    }
  }
  #page-reserve .item::after {
    right: 12rem;
  }
}