@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Roboto:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");
.ex {
  margin: 150px auto;
  width: 1000px; }
  @media (max-width: 1100px) {
    .ex {
      width: 90%;
      margin: 40px auto; } }

.gallery {
  width: 100%; }
  @media (max-width: 1100px) {
    .gallery {
      margin: 40px auto; } }

.gallery img {
  width: 100%;
  height: auto;
  margin: 90px auto; }
  @media (max-width: 1100px) {
    .gallery img {
      margin: 20px auto; } }

.set a:hover {
  border-bottom: solid 1px black;
  /*実線 1px 黒*/ }

html {
  font-size: 62.5%; }

body {
  margin: 0;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none; }

a {
  color: black;
  text-decoration: none; }

.br_sp {
  display: none; }
  @media (max-width: 768px) {
    .br_sp {
      display: block; } }

.br_pc {
  display: block; }
  @media (max-width: 768px) {
    .br_pc {
      display: none; } }

.br_sp_m {
  display: none; }
  @media (max-width: 500px) {
    .br_sp_m {
      display: block; } }

p {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.8rem;
  font-weight: 300;
  margin: 0;
  line-height: 3rem; }
  @media (max-width: 768px) {
    p {
      font-size: 1.4rem; } }

h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 4rem;
  font-weight: 300;
  color: white; }
  @media (max-width: 768px) {
    h1 {
      font-size: 3rem; } }

.system_top h1 {
  color: black; }

.title {
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  font-weight: 300;
  color: white; }
  @media (max-width: 768px) {
    .title {
      font-size: 2rem; } }

h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 3.5rem;
  font-weight: 300;
  text-align: center;
  letter-spacing: 3px; }
  @media (max-width: 768px) {
    h2 {
      font-size: 2rem; } }

.concept p {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.9rem;
  font-weight: 300;
  margin: 0;
  line-height: 4rem;
  letter-spacing: 1px; }
  @media (max-width: 768px) {
    .concept p {
      font-size: 1.4rem;
      line-height: 2.5rem; } }

h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 3.5rem;
  font-weight: 300; }
  @media (max-width: 768px) {
    h3 {
      font-size: 1.9rem; } }

h4 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 3.5rem;
  font-weight: 400;
  margin: 15px 0; }
  @media (max-width: 768px) {
    h4 {
      font-size: 2.5rem; } }

h5 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 3.5rem;
  font-weight: 400;
  margin: 75px 0 15px; }
  @media (max-width: 768px) {
    h5 {
      font-size: 2.5rem; } }

h6 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 3rem;
  font-weight: 300;
  margin: 90px 0 15px; }
  @media (max-width: 768px) {
    h6 {
      font-size: 2rem;
      margin: 50px 0 15px; } }

.tel a {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 3.9rem;
  font-weight: 400; }
  @media (max-width: 768px) {
    .tel a {
      font-size: 3rem; } }

.note_p {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 10px;
  line-height: 2; }

.note_p_small {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.3rem;
  font-weight: 300; }

.mail a {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2.5rem;
  font-weight: 300; }
  @media (max-width: 768px) {
    .mail a {
      font-size: 2rem; } }

.ex_p {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 4.5rem;
  margin: 0 0 100px; }
  @media (max-width: 768px) {
    .ex_p {
      font-size: 1.5rem;
      margin: 0 0 50px;
      line-height: 3rem; } }

.price_copy {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 3rem;
  margin: 0 0 50px; }
  @media (max-width: 768px) {
    .price_copy {
      font-size: 1.6rem;
      margin: 0;
      line-height: 3rem; } }

.t_small {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  text-align: right;
  margin: 5px 0 0; }

.concept {
  margin: 70px auto;
  width: 660px; }
  @media (max-width: 768px) {
    .concept {
      width: 90%;
      margin: 40px auto; } }

.top {
  background: url("../img/top.jpg");
  width: 100%;
  /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height: 100vh;
  /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat;
  /*背景画像をリピートしない*/
  background-position: center;
  /*背景画像の位置を中央に*/
  background-size: cover;
  /*背景画像が.slider-item全体を覆い表示*/ }
  @media (max-width: 768px) {
    .top {
      background: url("../img/sp_top.jpg");
      background-repeat: no-repeat;
      /*背景画像をリピートしない*/
      background-position: center;
      /*背景画像の位置を中央に*/
      background-size: cover;
      /*背景画像が.slider-item全体を覆い表示*/ } }

.gym_top {
  background: url("../img/gym.jpg");
  width: 100%;
  /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height: 100vh;
  /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat;
  /*背景画像をリピートしない*/
  background-position: center;
  /*背景画像の位置を中央に*/
  background-size: cover;
  /*背景画像が.slider-item全体を覆い表示*/ }
  @media (max-width: 768px) {
    .gym_top {
      background: url("../img/sp_gym.jpg");
      background-repeat: no-repeat;
      /*背景画像をリピートしない*/
      background-position: center;
      /*背景画像の位置を中央に*/
      background-size: cover;
      /*背景画像が.slider-item全体を覆い表示*/ } }

.diet_top {
  background: url("../img/diet.jpg");
  width: 100%;
  /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height: 100vh;
  /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat;
  /*背景画像をリピートしない*/
  background-position: center;
  /*背景画像の位置を中央に*/
  background-size: cover;
  /*背景画像が.slider-item全体を覆い表示*/ }
  @media (max-width: 768px) {
    .diet_top {
      background: url("../img/sp_diet.jpg");
      background-repeat: no-repeat;
      /*背景画像をリピートしない*/
      background-position: center;
      /*背景画像の位置を中央に*/
      background-size: cover;
      /*背景画像が.slider-item全体を覆い表示*/ } }

.facial_top {
  background: url("../img/este.jpg");
  width: 100%;
  /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height: 100vh;
  /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat;
  /*背景画像をリピートしない*/
  background-position: center;
  /*背景画像の位置を中央に*/
  background-size: cover;
  /*背景画像が.slider-item全体を覆い表示*/ }
  @media (max-width: 768px) {
    .facial_top {
      background: url("../img/sp_este.jpg");
      background-repeat: no-repeat;
      /*背景画像をリピートしない*/
      background-position: center;
      /*背景画像の位置を中央に*/
      background-size: cover;
      /*背景画像が.slider-item全体を覆い表示*/ } }

.depilation_top {
  background: url("../img/depilation.jpg");
  width: 100%;
  /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height: 100vh;
  /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat;
  /*背景画像をリピートしない*/
  background-position: center;
  /*背景画像の位置を中央に*/
  background-size: cover;
  /*背景画像が.slider-item全体を覆い表示*/ }
  @media (max-width: 768px) {
    .depilation_top {
      background: url("../img/sp_depilation.jpg");
      background-repeat: no-repeat;
      /*背景画像をリピートしない*/
      background-position: center;
      /*背景画像の位置を中央に*/
      background-size: cover;
      /*背景画像が.slider-item全体を覆い表示*/ } }

.system_top {
  background: url("../img/system.jpg");
  width: 100%;
  /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height: 100vh;
  /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat;
  /*背景画像をリピートしない*/
  background-position: center;
  /*背景画像の位置を中央に*/
  background-size: cover;
  /*背景画像が.slider-item全体を覆い表示*/ }
  @media (max-width: 768px) {
    .system_top {
      background: url("../img/sp_system.jpg");
      background-repeat: no-repeat;
      /*背景画像をリピートしない*/
      background-position: center;
      /*背景画像の位置を中央に*/
      background-size: cover;
      /*背景画像が.slider-item全体を覆い表示*/ } }

.top_copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center; }

.top_p {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  writing-mode: vertical-rl;
  color: black;
  z-index: 10000;
  letter-spacing: 2.8rem;
  white-space: nowrap; }
  @media (max-width: 768px) {
    .top_p {
      font-size: 1.2rem;
      letter-spacing: 1.5rem;
      color: white; } }

.copyright {
  background-color: #9CB7A5; }

.copyright p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: center;
  padding: 2.5rem;
  color: white;
  margin: 0; }
  @media (max-width: 768px) {
    .copyright p {
      padding: 1.5rem; } }

.info {
  margin: 300px auto 70px;
  width: 1000px; }
  @media (max-width: 1100px) {
    .info {
      width: 90%;
      margin: 80px auto 70px; } }

.access {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 120px auto 5%; }
  @media (max-width: 1100px) {
    .access {
      display: block;
      margin: 5% auto; } }

.access_detail {
  width: 60%; }
  @media (max-width: 1100px) {
    .access_detail {
      width: 100%; } }

.logo {
  width: 134px;
  margin: 0 0 20px; }

.logo img {
  width: 100%;
  height: auto; }

.map {
  width: 100%;
  position: relative;
  padding-top: 30%; }
  @media (max-width: 1100px) {
    .map {
      padding-top: 60%;
      margin: 30px auto 10px; } }

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.address {
  margin: 10px 0; }

.haco {
  border: 1px solid black;
  display: inline;
  padding: 3px 15px 5px;
  margin: 10px 20px 0 0; }

.tel {
  margin: 10px 0 20px 0; }

.mail {
  border: 1px solid black;
  display: inline;
  padding: 13px 15px;
  margin: 10px 10px 0 0; }

.mail_box {
  text-align: center;
  margin: 150px auto; }
  @media (max-width: 768px) {
    .mail_box {
      margin: 100px auto; } }

.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 70px;
  z-index: 999999; }
  @media (max-width: 768px) {
    .header {
      height: 55px; } }

.header_inner {
  padding: 5px 30px;
  margin-left: auto;
  margin-right: auto; }

.title {
  font-size: 2rem;
  font-weight: 600; }

.nav_list {
  text-align: right; }
  @media (max-width: 768px) {
    .nav_list {
      margin: 0;
      padding: 0;
      list-style: none; } }

.nav_list li {
  display: inline-block;
  text-align: right;
  padding-left: 20px; }
  @media (max-width: 768px) {
    .nav_list li {
      display: block; } }

.nav_list li a {
  color: #000;
  font-weight: 400;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.5rem; }
  @media (max-width: 768px) {
    .nav_list li a {
      font-size: 1.8rem; } }

@media (max-width: 768px) {
  .nav {
    position: fixed;
    right: -768px;
    /* 右から出てくる */
    top: 0;
    width: 100%;
    /* スマホに収まるサイズ */
    height: 100vh;
    padding-top: 60px;
    background-color: #fff;
    transition: all .6s;
    z-index: 200;
    overflow-y: auto;
    /* メニューが多くなったらスクロールできるように */ } }

.hamburger {
  display: none; }
  @media (max-width: 768px) {
    .hamburger {
      display: block;
      position: absolute;
      right: 8px;
      top: 6px;
      width: 40px;
      /* クリックしやすい幅 */
      height: 40px;
      /* クリックしやすい高さ */
      cursor: pointer;
      z-index: 300; } }

.nav_item {
  text-align: center;
  padding: 0 14px; }

.nav_item a {
  display: block;
  padding: 8px 0;
  text-decoration: none;
  color: #333; }
  @media (max-width: 768px) {
    .nav_item a {
      padding: 18px 10px; } }

.hamburger_border {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 2px;
  background-color: #333;
  transition: all .6s; }

.hamburger_border_top {
  top: 14px; }

.hamburger_border_center {
  top: 20px; }

.hamburger_border_bottom {
  top: 26px; }

.black_bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #333;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer; }

/* 表示された時用のCSS */
.nav-open .nav {
  right: 0; }

.nav-open .black_bg {
  opacity: .8;
  visibility: visible; }

.nav-open .hamburger_border_top {
  transform: rotate(45deg);
  top: 20px; }

.nav-open .hamburger_border_center {
  width: 0;
  left: 50%; }

.nav-open .hamburger_border_bottom {
  transform: rotate(-45deg);
  top: 20px; }

.header.change-color {
  background-color: #fff;
  transition: 0.3s;
  height: 70px; }

/* 下層ページのヘッダー設定 */
.un-header .header_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.un-header {
  background-color: white; }

@media (max-width: 768px) {
  .header_logo {
    margin: 1rem 0 0 0; } }

.price {
  margin: 250px auto;
  width: 1000px; }
  @media (max-width: 1100px) {
    .price {
      width: 90%;
      margin: 100px auto; } }

.price_system {
  margin: 120px auto;
  width: 1000px; }
  @media (max-width: 1100px) {
    .price_system {
      width: 90%;
      margin: 70px auto; } }

table th, table td {
  border-bottom: solid 0.5px black;
  /*実線 0.5px 黒*/
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  margin: 15px 0;
  padding: 15px 0; }
  @media (max-width: 768px) {
    table th, table td {
      font-size: 1.3rem; } }

table {
  width: 100%;
  border-collapse: collapse; }

table th {
  text-align: left; }

table td {
  text-align: right; }