@charset "UTF-8";

:root {
  --body: #000;
  --link: #000;
}

/*--------------------------------------------
CONTROLLER
---------------------------------------------*/

#controller .wrap > ul > li {
  display: flex;
  align-items: flex-start;
  position: relative;
  width: 100%;
}

#controller button {
  letter-spacing: 0.1em;
  display: block;
  line-height: 1;
  transition: color 0.3s ease-in;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: color;
  color: #b1b1b1;
}

#controller button.is-open {
  color: #000;
}

#controller ul ul {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  max-width: 0;
  overflow: hidden;
}

#controller button.is-open + ul {
  max-width: 100%;
  transition: max-width 0.3s ease-in;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: max-width;
}

#controller li li {
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  margin-right: 0.5em;
}

#controller li li + li:not(.no-slush):before {
  content: "/";
  white-space: pre;
}

#controller li li a {
  display: block;
  margin-left: 0.5em;
}

@media screen and (max-width: 799px) {
  #controller .wrap {
    padding-top: calc( 33 * 100vw / 375 );
    padding-bottom: calc( 40 * 100vw / 375 );
  }

  #controller .wrap > ul > li + li {
    margin-top: calc( 6 * 100vw / 375 );
  }

  #controller button {
    font-size: 1.8rem;
  }

  #controller ul ul {
    left: calc( 91 * 100% / 325 );
    margin-top: calc( -3 * 100vw / 375 );
  }

  #controller li li {
    font-size: 1.2rem;
    line-height: 1.5;
    z-index: 200;
  }

  #controller li li a {
    z-index: 300;
  }

  /*--店舗一覧のエリア別の店舗表示の高さ調整（height調整してください）　SP---------------*/

  /*---TOKYO-------*/

  /*---（英語）-------*/

  /*---　　-------*/

  #controller .wrap > ul > li:nth-child(2) ul,
  html[lang=en] #controller .wrap > ul > li:nth-child(2) ul,
  #controller .wrap > ul > li:nth-child(3) ul,
  html[lang=en] #controller .wrap > ul > li:nth-child(3) ul,
  #controller .wrap > ul > li:nth-child(4) ul,
  html[lang=en] #controller .wrap > ul > li:nth-child(4) ul,
  #controller .wrap > ul > li:nth-child(5) ul,
  html[lang=en] #controller .wrap > ul > li:nth-child(5) ul {
    height: calc( 18 * 100vw / 375 );
  }

  /*---（英語）-------*/

  /*---NAGOYA-------*/

  /*---（英語）-------*/

  /*---FUKUOKA-------*/

  /*---（英語）-------*/

  /*---SENDAI-------*/

  /*---（英語）-------*/
}

@media print, screen and (min-width: 800px) {
  #controller .wrap {
    padding-top: 87px;
    padding-bottom: 83px;
  }

  #controller .wrap > ul > li + li {
    margin-top: 17px;
  }

  #controller button {
    font-size: 2.8rem;
  }

  #controller ul ul {
    left: 146px;
    margin-top: calc( 3px - 8.5px );
    width: 384px;
  }

  html[lang=en] #controller ul ul {
    left: 146px;
    padding-top: calc( 3px - 8.5px );
    width: 640px;
  }

  #controller li li {
    font-size: 1.9rem;
    line-height: 1.89;
    height: 35px;
    z-index: 200;
  }

  #controller li li a {
    z-index: 300;
  }

  #controller .wrap > ul > li:nth-child(1) ul {
    height: auto;
  }

  /*--店舗一覧のエリア別の店舗表示の高さ調整（height調整してください）　PC---------------*/

  /*---TOKYO-------*/

  /*---（英語）-------*/

  html[lang=en] #controller .wrap > ul > li:nth-child(1) ul {
    height: auto;
  }

  /*---OSAKA-------*/

  #controller .wrap > ul > li:nth-child(2) ul,
  html[lang=en] #controller .wrap > ul > li:nth-child(2) ul,
  #controller .wrap > ul > li:nth-child(3) ul,
  html[lang=en] #controller .wrap > ul > li:nth-child(3) ul,
  #controller .wrap > ul > li:nth-child(4) ul,
  html[lang=en] #controller .wrap > ul > li:nth-child(4) ul,
  #controller .wrap > ul > li:nth-child(5) ul,
  html[lang=en] #controller .wrap > ul > li:nth-child(5) ul {
    height: 35px;
  }

  /*---（英語）-------*/

  /*---NAGOYA-------*/

  /*---（英語）-------*/

  /*---FUKUOKA-------*/

  /*---（英語）-------*/

  /*---SENDAI-------*/

  /*---OSAKA（英語）-------*/
}

/*--------------------------------------------
LOCAITONS
---------------------------------------------*/

#locaitons a {
  display: block;
}

#locaitons h2 {
  text-align: center;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

#locaitons picture {
  overflow: hidden;
  width: 100%;
}

#locaitons picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  font-family: "object-fit: cover; object-position: center;";
}

#locaitons p {
  letter-spacing: 0.04em;
  line-height: 1.5;
}

#locaitons a > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  line-height: 26px;
}

#locaitons ul ul {
  position: relative;
}

#locaitons ul ul ul {
  right: 0;
  position: absolute;
}

#locaitons ul ul ul li {
  display: block;
  float: left;
  width: 45px;
  margin-left: 1vw;
}

#locaitons ul ul ul li img {
  display: block;
  margin: 0 auto;
}

#locaitons ul ul ul li p {
  text-align: center;
  margin-top: -7px;
}

#locaitons p {
  flex-grow: 1;
}

#locaitons .wrap > ul > li:not(.is-open) {
  display: none;
}

@media screen and (max-width: 799px) {
  #locaitons .wrap {
    padding-top: calc( 74 * 100vw / 375 );
    padding-bottom: calc( 52 * 100vw / 375 );
  }

  #locaitons h2 {
    font-size: 1.9rem;
  }

  #locaitons .wrap > ul > li > ul > li + li {
    margin-top: calc( 63 * 100vw / 375 );
  }

  #locaitons picture {
    margin-top: calc( 15 * 100vw / 375 );
    height: calc( 173 * 100vw / 375 );
  }

  #locaitons a > div {
    padding-top: calc( 18 * 100vw / 375 );
  }

  #locaitons ul ul ul {
    margin-left: calc( 7 * 100% / 325 );
    margin-top: 0.5vh;
  }

  #locaitons ul ul ul li {
    width: 45px;
    margin-left: 0;
  }

  #locaitons ul ul ul li img {
    width: 30px;
  }

  #locaitons ul ul ul li .service_name {
    margin-top: -5px;
  }

  #locaitons ul ul ul li + li {
    margin-left: calc( 7 * 100vw / 375 );
  }

  #locaitons .lodging img {
    height: calc( 23 * 100vw / 375 );
  }

  #locaitons .snooze img,
  #locaitons .shower img,
  #locaitons .desk img {
    height: calc( 24 * 100vw / 375 );
  }

  #locaitons p {
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 2vh;
  }
}

@media print, screen and (min-width: 800px) {
  #locaitons .wrap {
    padding-top: 200px;
    padding-bottom: calc( 190px - 5.5px );
  }

  #locaitons h2 {
    font-size: 2.8rem;
  }

  #locaitons .wrap > ul > li > ul > li + li {
    margin-top: calc( 186px - 5.5px );
  }

  #locaitons picture {
    margin-top: 26px;
    height: 419px;
  }

  #locaitons a > div {
    padding-top: 32px;
  }

  #locaitons ul ul ul {
    margin-top: 4px;
    margin-left: 10px;
  }

  #locaitons ul ul ul li p {
    font-size: 1rem;
  }

  #locaitons .lodging img {
    height: 52px;
  }

  #locaitons .snooze img,
  #locaitons .shower img {
    height: 53px;
  }

  #locaitons .desk img {
    height: 54px;
  }

  #locaitons p {
    font-size: 1.4rem;
    line-height: 1.79;
    margin-top: calc( 12px - 5.5px );
  }
}