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

/*--------------------------------------------
BODY
---------------------------------------------*/

@media print, screen and (min-width: 800px) {
  body {
    padding-top: 0;
  }
}

/*--------------------------------------------
HEADER
---------------------------------------------*/

@media screen and (max-width: 799px) {
  #header #navSns path {
    fill: #fff;
  }
}

@media screen and (min-width: 800px) and (max-width: 1279px) {
  #header #menuBtn {
    background-image: url("/images/ui/icon/menu_white.svg");
  }

  #header #menuBtn span span {
    background-color: #fff;
  }
}

@media print, screen and (min-width: 800px) {
  #header {
    background-color: transparent;
    transition: background-color 0.3s ease-in;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: background-color;
  }

  #header path {
    transition: fill 0.3s ease-in;
  }

  #header #navGlobal a,
  #header #navLanguage a,
  #header #navSub a {
    transition: color 0.3s ease-in;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: color;
  }

  #header #navLanguage li + li:before {
    transition: background-color 0.3s ease-in;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: background-color;
  }

  #header #mypageBtn span,
  #header #mypageBtnLoggedIn span {
    transition: color 0.3s ease-in;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: color;
  }

  #header:not(.is-scroll) path {
    fill: #fff;
  }

  #header:not(.is-scroll) #navLanguage a,
  #header:not(.is-scroll) #navGlobal a,
  #header:not(.is-scroll) #navLanguage a.is-active,
  #header:not(.is-scroll) #navSub a {
    color: #fff;
  }

  #header:not(.is-scroll) #navLanguage li + li:before {
    background-color: #fff;
  }

  #header:not(.is-scroll) #mypageBtn:before,
  #header:not(.is-scroll) #mypageBtnLoggedIn:before {
    background-image: url("/images/ui/icon/mypage_white.svg");
  }

  #header:not(.is-scroll) #mypageBtn span,
  #header:not(.is-scroll) #mypageBtnLoggedIn span {
    color: #fff;
  }

  #header.is-scroll {
    background-color: #fff;
  }
}

@media screen and (min-width: 800px) and (max-width: 1279px) {
  body:not(.is-open) #header.is-scroll #menuBtn {
    background-image: url("/images/ui/icon/menu.svg");
  }

  body:not(.is-open) #header.is-scroll #menuBtn span span {
    background-color: #000;
  }
}

/*--------------------------------------------
MV
---------------------------------------------*/

@media screen and (max-width: 799px) {
  #mv h1 {
    margin-top: calc( ( -31 - 37.5 ) * 100vw / 375 );
    margin-right: calc( 33.4 * 100% / 375 );
  }

  #mv h1 img {
    height: calc( 62 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #mv {
    height: 100vh;
  }

  #mv picture {
    height: 100vh;
  }

  #mv .box {
    height: 100%;
  }

  #mv h1 {
    margin-top: -53.5px;
    margin-right: 18.4px;
  }

  #mv h1 img {
    height: 107px;
  }
}

/*--------------------------------------------
RESERVATION
---------------------------------------------*/

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

@media print, screen and (min-width: 800px) {
  #reservation .wrap {
    padding-top: 97.5px;
    padding-bottom: 112px;
  }
}

/*--------------------------------------------
NAP
---------------------------------------------*/

@media screen and (max-width: 799px) {
  #nap .wrap {
    padding-top: calc( 38 * 100vw / 375 );
    padding-bottom: calc( ( 55 - 2 ) * 100vw / 375 );
  }

  #nap .fieldset02 {
    margin-top: calc( ( 46 - 2 ) * 100vw / 375 );
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #nap .fieldset03 {
    margin-top: calc( ( 52 - 2 ) * 100vw / 375 );
  }

  #nap .btn-submit01 {
    margin-top: calc( 50 * 100vw / 375 );
  }
}

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

  #nap .fieldset02 {
    margin-top: calc( 58px - 2.5px );
  }

  #nap .fieldset03 {
    margin-top: calc( 83px - 2.5px );
    display: flex;
    justify-content: center;
  }

  #nap .btn-submit01 {
    margin-top: 67px;
  }
}

#napInput #btnLocations {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: 0.15em;
  text-indent: 0.15em;
}

#napInput .napdate label {
  font-weight: 700;
  letter-spacing: 0.11em;
}

#napInput .napdate dd:nth-of-type(1) button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.001em;
}

#napInput .napdate dd:nth-of-type(1) button:after {
  content: "";
  display: block;
  background: url("/images/ui/icon/down02.svg") center/contain no-repeat;
  flex-shrink: 0;
}

#napInput .checkinoutTime > div + div:before {
  content: "";
  display: block;
  background: url("/images/ui/icon/down03.svg") center/contain no-repeat;
  margin-left: auto;
  margin-right: auto;
}

#napInput .checkinoutTime dt label {
  display: block;
  letter-spacing: 0.11em;
  font-weight: 700;
}

#napInput .checkinoutTime dd:first-of-type button {
  font-size: 1.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.15em;
  text-indent: 0.15em;
  text-align: center;
}

#napInput .checkinoutTime dd:first-of-type button::after {
  content: "";
  display: block;
  background: url("/images/ui/icon/down02.svg") center/contain no-repeat;
  flex-shrink: 0;
}

#napInput .checkinoutTime #checkin_time,
#napInput .checkinoutTime #checkout_time {
  background-color: #fff;
  border: 0;
  font-weight: 600;
  letter-spacing: 0.15em;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-repeat: no-repeat;
  background-image: url("/images/ui/icon/down02.svg");
}

#napInput .nop {
  display: flex;
  align-items: flex-start;
}

#napInput .nop dt label {
  display: block;
  letter-spacing: 0.071em;
  font-size: 1.1rem;
}

#napInput .nop .male,
#napInput .nop .female {
  background-repeat: no-repeat;
}

#napInput .nop .male {
  background-image: url("/images/ui/icon/male.svg");
}

#napInput .nop .female {
  background-image: url("/images/ui/icon/female.svg");
}

#napInput .nop .female input {
  color: #fe1a0e;
}

#napInput .nop input {
  background-color: transparent;
  font-weight: 300;
  text-align: right;
  display: block;
  padding-left: 0;
  padding-right: 0;
  width: 2em;
  text-align: center;
}

#napInput .nop input[type=number] {
  -moz-appearance: textfield;
}

#napInput .nop input::-webkit-outer-spin-button,
#napInput .nop input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

#napInput .nop button {
  font-size: 0;
  vertical-align: top;
  display: block;
}

#napInput > a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.11em;
  text-indent: 0.11em;
  font-size: 1.2rem;
  color: #1a1311;
}

#napInput > a:after {
  content: "";
  display: block;
  background: url("/images/ui/icon/arrow01.svg") 0 0/contain no-repeat;
  flex-shrink: 0;
}

@media screen and (max-width: 799px) {
  #napInput #btnLocations {
    font-size: 1.8rem;
    height: calc( 41 * 100vw / 375 );
  }

  #napInput #btnLocations:after {
    width: calc( 15 * 100vw / 375 );
    height: calc( 8 * 100vw / 375 );
    margin-left: calc( 12 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #napInput #btnLocations {
    font-size: 2.2rem;
    height: 53px;
  }

  #napInput #btnLocations:after {
    width: 19px;
    height: 10px;
    margin-left: 10px;
  }
}

@media screen and (max-width: 799px) {
  #napInput .napdate label {
    font-size: 1.1rem;
  }

  #napInput .napdate dd {
    margin-top: calc( 2 * 100vw / 375 );
  }

  #napInput .napdate dd:nth-of-type(1) button {
    height: calc( 32 * 100vw / 375 );
    font-size: 1.9rem;
  }

  #napInput .napdate dd:nth-of-type(1) button:after {
    width: calc( 15 * 100vw / 375 );
    height: calc( 8 * 100vw / 375 );
    margin-left: calc( 9 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #napInput .napdate {
    text-align: center;
  }

  #napInput .napdate label {
    font-size: 1.2rem;
    text-indent: 0.11em;
  }

  #napInput .napdate dt + dd {
    margin-top: 8px;
  }

  #napInput .napdate dd:nth-of-type(1) button {
    margin-top: calc( 2px - 2.5px );
    font-size: 1.9rem;
    width: 268px;
    height: 32px;
  }

  #napInput .napdate dd:nth-of-type(1) button:after {
    width: 19px;
    height: 10px;
    margin-left: 4px;
  }
}

@media screen and (max-width: 799px) {
  #napInput .checkinoutTime {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #napInput .checkinoutTime > div + div:before {
    margin-top: calc( 7 * 100vw / 375 );
    margin-bottom: calc( ( 13.5 - 2 ) * 100vw / 375 );
    width: calc( 18 * 100vw / 375 );
    height: calc( 21 * 100vw / 375 );
  }

  #napInput .checkinoutTime dt label {
    text-align: center;
  }

  #napInput .checkinoutTime dd:first-of-type {
    margin-top: calc( 2 * 100vw / 375 );
  }

  #napInput .checkinoutTime dd:first-of-type button {
    margin-top: calc( 2 * 100vw / 375 );
    justify-content: center;
    height: calc( 32 * 100vw / 375 );
  }

  #napInput .checkinoutTime dd:first-of-type button::after {
    width: calc( 15 * 100vw / 375 );
    height: calc( 8 * 100vw / 375 );
    margin-left: calc( 13 * 100vw / 375 );
  }

  #napInput .checkinoutTime #checkin_time,
  #napInput .checkinoutTime #checkout_time {
    font-size: 1.9rem;
    margin-top: calc( 4 * 100vw / 375 );
    width: calc( 155 * 100vw / 375 );
    height: calc( 32 * 100vw / 375 );
    background-position: right calc( 15 * 100vw / 375 ) top 50%;
    background-size: auto calc( 8 * 100vw / 375 );
    padding-left: calc( 27 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #napInput .checkinoutTime > div + div:before {
    margin-top: 8px;
    margin-bottom: 18px;
    width: 18px;
    height: 21px;
  }

  #napInput .checkinoutTime dt label {
    font-size: 1.2rem;
    padding-left: 28px;
  }

  #napInput .checkinoutTime dd:first-of-type button {
    width: 149px;
    height: 32px;
  }

  #napInput .checkinoutTime dd:first-of-type button::after {
    width: 19px;
    height: 10px;
    margin-left: 11px;
  }

  #napInput .checkinoutTime #checkin_time,
  #napInput .checkinoutTime #checkout_time {
    font-size: 1.9rem;
    margin-top: 4px;
    width: 149px;
    height: 32px;
    background-position: right 12px top 50%;
    background-size: auto 10px;
    padding-left: 21px;
  }
}

@media screen and (max-width: 799px) {
  #napInput .nop {
    margin-top: calc( ( 47 - 2 ) * 100vw / 375 );
    justify-content: center;
  }

  #napInput .nop > div + div {
    margin-left: calc( 48.6 * 100vw / 375 );
  }

  #napInput .nop .male,
  #napInput .nop .female {
    margin-top: calc( 9 * 100vw / 375 );
    background-size: auto calc( 53 * 100vw / 375 );
    background-position: calc( 16 * 100vw / 375 ) 50%;
  }

  #napInput .nop input {
    font-size: 3.1rem;
    margin-left: calc( 23 * 100vw / 375 );
  }

  #napInput .nop button {
    margin-left: calc( 39 * 100vw / 375 );
    width: calc( 30 * 100vw / 375 );
    height: calc( 31 * 100vw / 375 );
  }

  #napInput .nop button img {
    height: calc( 10 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #napInput .nop {
    padding-top: 10px;
    margin-left: 52px;
  }

  #napInput .nop > div + div {
    margin-left: 61px;
  }

  #napInput .nop .male,
  #napInput .nop .female {
    margin-top: 16px;
    background-size: auto 86px;
    background-position: 10px 0;
  }

  #napInput .nop input {
    font-size: 3.5rem;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 35px;
  }

  #napInput .nop button {
    margin-left: 62px;
  }

  #napInput .nop button img {
    height: 14px;
  }
}

@media screen and (max-width: 799px) {
  #napInput > a {
    margin-top: calc( 9 * 100vw / 375 );
  }

  #napInput > a:after {
    width: calc( 4 * 100vw / 375 );
    height: calc( 8 * 100vw / 375 );
    margin-left: calc( 7 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #napInput > a {
    margin-top: 7px;
  }

  #napInput > a:after {
    width: 4px;
    height: 8px;
    margin-left: 11px;
  }
}

/*--------------------------------------------
LOCATIONS
---------------------------------------------*/

#locations h3 {
  position: absolute;
  letter-spacing: 0.11em;
  color: #fff;
  z-index: 1;
}

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

  #locations #slider02 {
    margin-top: calc( 37 * 100vw / 375 );
  }

  #locations h3 {
    font-size: 1.4rem;
    left: calc( 17 * 100vw / 375 );
    bottom: calc( 12 * 100vw / 375 );
  }

  #locations .link01 {
    margin-top: calc( 35 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #locations .wrap {
    padding-top: 161px;
    padding-bottom: 168px;
  }

  #locations #slider02 {
    margin-top: 61px;
  }

  #locations h3 {
    font-size: 1.2rem;
    left: 30px;
    bottom: 21px;
  }

  #locations .link01 {
    margin-top: 49px;
  }
}

/*--------------------------------------------
CONCEPT
---------------------------------------------*/

#concept picture {
  margin-left: auto;
  margin-right: auto;
}

#concept picture img {
  width: 100%;
  height: auto;
}

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

  #concept .text01 {
    margin-top: calc( ( 37 - 6.5 ) * 100vw / 375 );
  }

  #concept picture {
    margin-top: calc( ( 56 - 6.5 ) * 100vw / 375 );
    width: calc( 256 * 100% / 325 );
  }

  #concept .link01 {
    margin-top: calc( 64 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #concept .wrap {
    padding-top: 163px;
    padding-bottom: 171px;
  }

  #concept .text01 {
    margin-top: calc( 49px - 9.5px );
  }

  #concept picture {
    margin-top: calc( 130px - 9.5px );
    width: 514px;
  }

  #concept .link01 {
    margin-top: 110px;
  }
}

/*--------------------------------------------
COMMITTED
---------------------------------------------*/

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

  #committed .title02 {
    margin-top: calc( 60 * 100vw / 375 );
  }

  #committed .text01 {
    margin-top: calc( ( 37 - 6.5 ) * 100vw / 375 );
  }

  #committed .slider01 {
    margin-top: calc( ( 48 - 6.5 ) * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #committed .wrap {
    padding-top: 163px;
    padding-bottom: 138px;
  }

  #committed .title02 {
    margin-top: 106px;
  }

  #committed .text01 {
    margin-top: calc( 51px - 9.5px );
  }

  #committed .slider01 {
    margin-top: calc( 24px - 9.5px );
  }
}

/*--------------------------------------------
SHOWER
---------------------------------------------*/

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

  #shower .text01 {
    margin-top: calc( ( 37 - 6.5 ) * 100vw / 375 );
  }

  #shower .slider01 {
    margin-top: calc( ( 48 - 6.5 ) * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #shower .wrap {
    padding-top: 141px;
    padding-bottom: 138px;
  }

  #shower .text01 {
    margin-top: calc( 51px - 9.5px );
  }

  #shower .slider01 {
    margin-top: calc( 24px - 9.5px );
  }
}

/*--------------------------------------------
WORK
---------------------------------------------*/

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

  #work .text01 {
    margin-top: calc( ( 37 - 6.5 ) * 100vw / 375 );
  }

  #work .slider01 {
    margin-top: calc( ( 48 - 6.5 ) * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #work .wrap {
    padding-top: 148px;
    padding-bottom: 138px;
  }

  #work .text01 {
    margin-top: calc( 51px - 9.5px );
  }

  #work .slider01 {
    margin-top: calc( 24px - 9.5px );
  }
}

/*--------------------------------------------
HYGIENE
---------------------------------------------*/

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

  #hygiene .text01 {
    margin-top: calc( ( 37 - 6.5 ) * 100vw / 375 );
  }

  #hygiene .slider01 {
    margin-top: calc( ( 48 - 6.5 ) * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #hygiene .wrap {
    padding-top: 128px;
    padding-bottom: 138px;
  }

  #hygiene .text01 {
    margin-top: calc( 51px - 9.5px );
  }

  #hygiene .slider01 {
    margin-top: calc( 24px - 9.5px );
  }
}

/*--------------------------------------------
SERVICE
---------------------------------------------*/

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

  #service .link01 {
    margin-top: calc( ( 47 - 4.5 ) * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #service .wrap {
    padding-top: 140px;
    padding-bottom: 168px;
  }

  #service .link01 {
    margin-top: calc( 84px - 5.5px );
  }
}

/*--------------------------------------------
MEMBERS
---------------------------------------------*/

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

  #members .text01 {
    margin-top: calc( ( 37 - 6.5 ) * 100vw / 375 );
  }

  #members .link01 {
    margin-top: calc( ( 47 - 6.5 ) * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #members .wrap {
    padding-top: 163px;
    padding-bottom: 168px;
  }

  #members .text01 {
    margin-top: calc( 44px - 9.5px );
  }

  #members .link01 {
    margin-top: calc( 70px - 9.5px );
  }
}

.search_option label {
  position: relative;
}

.search_option label input {
  display: none;
}

.search_option label span {
  display: flex;
  cursor: pointer;
  letter-spacing: 0.071em;
  font-size: 1rem;
}

.search_option label span::before {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  border-radius: 3px;
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #fff;
  border-style: solid;
  border-color: #000;
  border-width: 1px;
}

.search_option label span::after {
  background: url("/images/ui/icon/check.svg") center/contain no-repeat;
  width: 16px;
  height: 16px;
  top: -4px;
  left: 2px;
}

.search_option label input:checked + span:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 50%;
}

.plan_search_btn_box {
  display: block;
}

@media print, screen and (min-width: 800px) {
  .plan_search_btn_box li {
    width: 50%;
    display: block;
    float: left;
  }
}

.plan_search_btn_box li .btn-submit01 {
  margin: 0 auto;
}

@media screen and (max-width: 799px) {
  .plan_search_btn_box li .btn-submit01 {
    margin-top: calc( 50 * 100vw / 750 ) !important;
  }
}

.change_search_resv_type {
  width: 100%;
  display: block;
  margin-top: 2vh !important;
}

.campaign_code_btn {
  margin-top: 2vh !important;
}