/*--------------------------------------------
HTML
---------------------------------------------*/

@media screen and (max-width: 799px) {
  html {
    font-size: calc( 10 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  html {
    font-size: 10px;
  }
}

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

@media screen and (max-width: 799px) {
  body {
    font-size: 1.4rem;
    padding-top: calc( 75 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  body {
    padding-top: 90px;
    min-width: 830px;
    font-size: 1.6rem;
  }
}

/*--------------------------------------------
WRAPPER
---------------------------------------------*/

@media screen and (max-width: 799px) {
  .wrap {
    padding-left: calc( 25 * 100% / 375 );
    padding-right: calc( 25 * 100% / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  .wrap {
    width: 830px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
  }
}

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

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
}

#header .wrap {
  display: flex;
  align-items: flex-start;
}

#header .logo {
  display: block;
}

#header svg {
  width: auto;
}

@media screen and (max-width: 799px) {
  #header .wrap {
    height: calc( 75 * 100vw / 375 );
    padding-right: calc( 62 * 100% / 375 );
  }

  #header .logo {
    padding-top: calc( 19 * 100vw / 375 );
  }

  #header .logo svg,
  #header .logo img {
    height: calc( 36 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #header .wrap {
    height: 90px;
    width: 100%;
    padding-left: 25px;
    padding-right: 65px;
  }

  #header .logo {
    padding-top: 21px;
    order: 1;
  }

  #header .logo svg img {
    height: 42px;
  }
}

@media print, screen and (min-width: 1280px) {
  #header .wrap {
    padding-left: 27px;
    padding-right: 33px;
    width: 1280px;
  }
}

@media screen and (max-width: 799px) and (-ms-high-contrast: none) {
  #header svg {
    width: calc( 88 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) and (-ms-high-contrast: none) {
  #header svg {
    width: 102px;
  }
}

/*--------------------------------------------
MYPAGE BTN
---------------------------------------------*/

#mypageBtn,
#mypageBtnLoggedIn {
  display: flex;
  align-items: center;
}

#mypageBtn span,
#mypageBtnLoggedIn span {
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-left: -0.1em;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

#mypageBtn:before,
#mypageBtnLoggedIn:before {
  content: "";
  display: block;
  background: url("/images/ui/icon/mypage.svg") 0 0/contain no-repeat;
  flex-shrink: 0;
}

@media screen and (max-width: 799px) {
  #mypageBtn,
  #mypageBtnLoggedIn {
    margin-top: calc( 23 * 100vw / 375 );
    margin-left: calc( 127 * 100% / 288 );
  }

  #mypageBtn:before,
  #mypageBtnLoggedIn:before {
    width: calc( 18 * 100vw / 375 );
    height: calc( 29 * 100vw / 375 );
    margin-right: calc( 4 * 100vw / 375 );
  }

  #mypageBtn span,
  #mypageBtnLoggedIn span {
    white-space: nowrap;
  }
}

@media print, screen and (min-width: 800px) {
  #mypageBtn,
  #mypageBtnLoggedIn {
    margin-top: 24px;
    order: 3;
  }

  #mypageBtn:before,
  #mypageBtnLoggedIn:before {
    width: 22px;
    height: 36px;
    margin-right: 9px;
  }
}

@media screen and (min-width: 800px) and (max-width: 1279px) {
  #mypageBtn,
  #mypageBtnLoggedIn {
    margin-left: 42px;
  }
}

@media print, screen and (min-width: 1280px) {
  #mypageBtn,
  #mypageBtnLoggedIn {
    margin-left: 137px;
  }
}

/*--------------------------------------------
FORM LOGIN
---------------------------------------------*/

body.is-open02 {
  overflow: hidden;
}

body.is-open02 [data-aos^=fade] {
  opacity: 1 !important;
}

body.is-open02 #formLogin {
  max-height: 100vh;
}

#formLogin {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 10;
  transition: max-height 0.5s ease-in;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: max-height;
  max-height: 0;
  overflow: hidden;
  overflow-y: scroll;
  height: 100vh;
  color: #fff;
}

#formLogin .scroll {
  overflow-y: auto;
  min-height: 100vh;
}

#formLogin .box {
  margin-left: auto;
  margin-right: auto;
}

#formLogin h4 {
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-align: center;
}

#formLogin p {
  letter-spacing: 0.1em;
}

#formLogin form p {
  color: #fff;
  text-align: center;
  text-indent: -0.1em;
  font-weight: 300;
}

#formLogin form p a {
  text-decoration: underline;
  color: #fff;
}

#formLogin #mypageClose {
  display: block;
  margin-left: auto;
}

#formLogin #mypageClose img {
  width: 100%;
  height: auto;
}

#formLogin .box > p {
  margin-left: -0.1em;
  line-height: 1.5;
  font-size: 1rem;
}

#formLogin input[type=text],
#formLogin input[type=email],
#formLogin input[type=password] {
  border-style: solid;
  border-color: #fff;
  font-weight: 300;
  background-color: transparent;
  color: #fff;
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 799px) {
  #formLogin .box {
    padding-top: calc( 23 * 100vw / 375 );
    padding-bottom: calc( ( 66 - 2.5 ) * 100vw / 375 );
    width: calc( 242 * 100% / 375 );
  }

  #formLogin #mypageClose {
    width: calc( 50 * 100% / 242 );
    margin-left: calc( 173 * 100% / 242 );
  }

  #formLogin h4 {
    font-size: 1.8rem;
  }

  #formLogin h4:first-of-type {
    margin-top: calc( 41 * 100vw / 375 );
  }

  #formLogin form {
    margin-top: calc( 13 * 100vw / 375 );
  }

  #formLogin form p {
    font-size: 1.2rem;
    margin-top: calc( 9 * 100vw / 375 );
  }

  #formLogin form + h4 {
    margin-top: calc( 55 * 100vw / 375 );
  }

  #formLogin .box > p {
    margin-top: calc( ( 14 - 2.5 ) * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #formLogin .box {
    padding-top: 111px;
    padding-bottom: calc( 148px - 2.5px );
    width: 327px;
  }

  #formLogin #mypageClose {
    width: 62px;
  }

  #formLogin h4 {
    font-size: 2.4rem;
  }

  #formLogin h4:first-of-type {
    margin-top: 27px;
  }

  #formLogin form {
    margin-top: 17px;
  }

  #formLogin form p {
    font-size: 1.5rem;
    margin-top: 12px;
  }

  #formLogin form + h4 {
    margin-top: 75px;
  }

  #formLogin .box > p {
    margin-top: calc( 18px - 2.5px );
  }
}

#signup input[type=text],
#signup input[type=email],
#signup input[type=password] {
  border-style: solid;
  border-color: #fff;
  font-weight: 300;
  background-color: transparent;
  color: #fff;
  text-align: center;
  width: 100%;
}

#signin input[type=text],
#signin input[type=email],
#signin input[type=password] {
  border-style: solid;
  border-color: #fff;
  font-weight: 300;
  background-color: transparent;
  color: #fff;
  text-align: center;
  width: 100%;
}

#formLogin input[type=text]:-ms-input-placeholder,
#formLogin input[type=email]:-ms-input-placeholder,
#formLogin input[type=password]:-ms-input-placeholder {
  color: #969696;
}

#signup input[type=text]:-ms-input-placeholder,
#signup input[type=email]:-ms-input-placeholder,
#signup input[type=password]:-ms-input-placeholder {
  color: #969696;
}

#signin input[type=text]:-ms-input-placeholder,
#signin input[type=email]:-ms-input-placeholder,
#signin input[type=password]:-ms-input-placeholder {
  color: #969696;
}

#formLogin input[type=text]::-moz-placeholder, #formLogin input[type=email]::-moz-placeholder, #formLogin input[type=password]::-moz-placeholder {
  color: #969696;
}

#formLogin input[type=text]:-ms-input-placeholder, #formLogin input[type=email]:-ms-input-placeholder, #formLogin input[type=password]:-ms-input-placeholder {
  color: #969696;
}

#formLogin input[type=text]::placeholder,
#formLogin input[type=email]::placeholder,
#formLogin input[type=password]::placeholder {
  color: #969696;
}

#signup input[type=text]::-moz-placeholder, #signup input[type=email]::-moz-placeholder, #signup input[type=password]::-moz-placeholder {
  color: #969696;
}

#signup input[type=text]:-ms-input-placeholder, #signup input[type=email]:-ms-input-placeholder, #signup input[type=password]:-ms-input-placeholder {
  color: #969696;
}

#signup input[type=text]::placeholder,
#signup input[type=email]::placeholder,
#signup input[type=password]::placeholder {
  color: #969696;
}

#signin input[type=text]::-moz-placeholder, #signin input[type=email]::-moz-placeholder, #signin input[type=password]::-moz-placeholder {
  color: #969696;
}

#signin input[type=text]:-ms-input-placeholder, #signin input[type=email]:-ms-input-placeholder, #signin input[type=password]:-ms-input-placeholder {
  color: #969696;
}

#signin input[type=text]::placeholder,
#signin input[type=email]::placeholder,
#signin input[type=password]::placeholder {
  color: #969696;
}

@media screen and (max-width: 799px) {
  #formLogin button + button,
  #formLogin input + input,
  #formLogin a + a {
    margin-top: calc( 9 * 100vw / 375 );
  }

  #signup button + button,
  #signup input + input,
  #signup a + a {
    margin-top: calc( 9 * 100vw / 375 );
  }

  #signin button + button,
  #signin input + input,
  #signin a + a {
    margin-top: calc( 9 * 100vw / 375 );
  }

  #formLogin input[type=text],
  #formLogin input[type=email],
  #formLogin input[type=password] {
    height: calc( 34 * 100vw / 375 );
    border-width: calc( 1 * 100vw / 375 );
    border-radius: calc( 8 * 100vw / 375 );
    font-size: 1.4rem;
  }

  #signup input[type=text],
  #signup input[type=email],
  #signup input[type=password] {
    height: calc( 34 * 100vw / 375 );
    border-width: calc( 1 * 100vw / 375 );
    border-radius: calc( 8 * 100vw / 375 );
    font-size: 1.4rem;
  }

  #signin input[type=text],
  #signin input[type=email],
  #signin input[type=password] {
    height: calc( 34 * 100vw / 375 );
    border-width: calc( 1 * 100vw / 375 );
    border-radius: calc( 8 * 100vw / 375 );
    font-size: 1.4rem;
  }

  #formLogin fieldset + fieldset,
  #signup fieldset + fieldset,
  #signin fieldset + fieldset {
    margin-top: calc( 29 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #formLogin button + button,
  #formLogin input + input,
  #formLogin a + a {
    margin-top: 12px;
  }

  #signup button + button,
  #signup input + input,
  #signup a + a {
    margin-top: 12px;
  }

  #signin button + button,
  #signin input + input,
  #signin a + a {
    margin-top: 12px;
  }

  #formLogin input[type=text],
  #formLogin input[type=email],
  #formLogin input[type=password] {
    height: 46px;
    border-width: 1px;
    border-radius: 8px;
    font-size: 1.8rem;
  }

  #signup input[type=text],
  #signup input[type=email],
  #signup input[type=password] {
    height: 46px;
    border-width: 1px;
    border-radius: 8px;
    font-size: 1.8rem;
  }

  #signin input[type=text],
  #signin input[type=email],
  #signin input[type=password] {
    height: 46px;
    border-width: 1px;
    border-radius: 8px;
    font-size: 1.8rem;
  }

  #formLogin fieldset + fieldset,
  #signup fieldset + fieldset,
  #signin fieldset + fieldset {
    margin-top: 39px;
  }
}

/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/

@media screen and (max-width: 1279px) {
  body.is-open {
    overflow: hidden;
  }

  body.is-open [data-aos^=fade] {
    opacity: 1 !important;
  }

  body.is-open #nav {
    max-height: 100vh;
  }

  body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(1) {
    transform: translateY(calc( 10 * 100vw / 768 )) scale(0);
  }

  body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(2) {
    transform: rotate(-45deg);
  }

  body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(3) {
    transform: rotate(45deg);
  }

  body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(4) {
    transform: translateY(calc( -10 * 100vw / 768 )) scale(0);
  }
}

@media screen and (max-width: 1279px) and (-ms-high-contrast: none) {
  body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(1) {
    transform: translateY(10px) scale(0);
    opacity: 0;
  }

  body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(4) {
    transform: translateY(-10px) scale(0);
    opacity: 0;
  }
}

#menuBtn {
  z-index: 11;
  position: absolute;
  z-index: 11;
  position: absolute;
}

#menuBtn span {
  font-size: 0;
  font-size: 0;
}

#menuBtn span span {
  display: block;
  position: absolute;
  left: 0;
  transition: all 0.4s;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  transition: all 0.4s;
  width: 100%;
}

#menuBtn span span:nth-of-type(1) {
  top: 0;
}

#menuBtn span span:nth-of-type(4) {
  bottom: 0;
}

#menuBtn span span:nth-of-type(1) {
  top: 0;
}

#menuBtn span span:nth-of-type(4) {
  bottom: 0;
}

#menuBtn > span:nth-of-type(1),
#menuBtn > span:nth-of-type(1) {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

@media screen and (max-width: 1279px) {
  #menuBtn {
    background: url("/images/ui/icon/menu.svg") center bottom/100% auto no-repeat;
  }

  #menuBtn span span {
    background-color: #000;
    border-right: 1px;
  }
}

@media screen and (max-width: 799px) {
  #menuBtn {
    width: calc( 20 * 100% / 375 );
    height: calc( 25 * 100vw / 375 );
    right: calc( 24 * 100% / 375 );
    top: calc( 28 * 100vw / 375 );
    padding-bottom: calc( 9 * 100vw / 375 );
    padding-left: calc( 1 * 100% / 375 );
    padding-right: calc( 1 * 100% / 375 );
  }

  #menuBtn span span {
    height: calc( 2 * 100vw / 375 );
  }

  #menuBtn span span:nth-of-type(2),
  #menuBtn span span:nth-of-type(3) {
    top: calc( 7 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #menuBtn {
    width: 22px;
    height: 26px;
    right: 27px;
    top: 32px;
    padding-bottom: 10px;
    padding-left: 2px;
    padding-right: 2px;
  }

  #menuBtn span span {
    height: 2px;
  }

  #menuBtn span span:nth-of-type(2),
  #menuBtn span span:nth-of-type(3) {
    top: 7px;
  }
}

@media print, screen and (min-width: 1280px) {
  #menuBtn {
    display: none;
  }
}

body.is-open #menuBtn span span {
  background-color: #fff;
}

@media screen and (min-width: 800px) and (max-width: 1279px) {
  body.is-open #header #menuBtn {
    background-image: none;
  }
}

/*--------------------------------------------
NAV
---------------------------------------------*/

@media screen and (max-width: 799px) {
  #nav {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 10;
    transition: max-height 0.5s ease-in;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: max-height;
    max-height: 0;
    overflow: hidden;
    overflow-y: scroll;
    background-color: rgba(0, 0, 0, 0.8);
    height: 100vh;
  }

  #nav .scroll {
    padding-top: calc( 80 * 100vw / 375 );
    padding-bottom: calc( 104 * 100vw / 375 );
    padding-left: calc( 78.5 * 100% / 375 );
    padding-right: calc( 78.5 * 100% / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #nav {
    flex-grow: 1;
    order: 2;
    margin-left: 43px;
  }

  #nav .scroll {
    display: flex;
    align-items: flex-start;
  }
}

/*--------------------------------------------
NAV GLOBAL
---------------------------------------------*/

@media screen and (max-width: 799px) {
  #navGlobal {
    border-top: solid #fff calc( 1.5 * 100vw / 375 );
    padding-top: calc( 33.5 * 100vw / 375 );
    padding-bottom: calc( 35.5 * 100vw / 375 );
  }

  #navGlobal li + li {
    margin-top: calc( 50 * 100% / 375 );
  }

  #navGlobal a {
    font-size: 1.6rem;
    letter-spacing: 0.07em;
    text-indent: 0.07em;
    display: block;
    text-align: center;
    color: #fff;
  }
}

@media print, screen and (min-width: 800px) {
  #navGlobal {
    display: flex;
    align-items: center;
    margin-top: 36px;
  }

  #navGlobal li + li + li {
    margin-left: 20px;
  }

  #navGlobal a {
    color: #1a1311;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    letter-spacing: 0.11em;
    height: 16px;
  }
}

/*--------------------------------------------
NAV LANGUAGE
---------------------------------------------*/

#navLanguage {
  display: flex;
  align-items: center;
}

#navLanguage li + li {
  display: flex;
  align-items: center;
}

#navLanguage li + li:before {
  content: "";
  display: block;
  flex-shrink: 0;
}

#navLanguage a {
  transition: color 0.3s ease-in;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: color;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 799px) {
  #navLanguage {
    border-top: solid #fff calc( 1.5 * 100vw / 375 );
    padding-top: calc( 24 * 100vw / 375 );
    padding-bottom: calc( 24 * 100vw / 375 );
    padding-left: calc( 45 * 100% / 218 );
  }

  #navLanguage li + li:before {
    height: calc( 20 * 100vw / 375 );
    width: calc( 1.5 * 100vw / 375 );
    margin-left: calc( 13 * 100vw / 375 );
    margin-right: calc( 13 * 100vw / 375 );
    background-color: #fff;
  }

  #navLanguage a {
    font-size: 1.6rem;
    letter-spacing: 0.07em;
    height: calc( 20 * 100vw / 375 );
    color: #fff;
  }

  #navLanguage a.is-active,
  #navLanguage a:hover {
    color: #fff;
  }
}

@media print, screen and (min-width: 800px) {
  #navLanguage {
    margin-top: 36px;
    margin-left: 28px;
    flex-grow: 1;
  }

  #navLanguage li + li:before {
    height: 16px;
    width: 1px;
    margin-left: 7px;
    margin-right: 7px;
    background-color: #000;
  }

  #navLanguage a {
    font-size: 1.1rem;
    letter-spacing: 0.11em;
    height: 16px;
    color: #969696;
  }

  #navLanguage a.is-active,
  #navLanguage a:hover {
    color: #000;
  }
}

/*--------------------------------------------
NAV SUBS
---------------------------------------------*/

@media screen and (min-width: 800px) and (max-width: 1279px) {
  #navSubs {
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 10;
    transition: max-height 0.5s ease-in;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: max-height;
    max-height: 0;
    overflow: hidden;
    overflow-y: scroll;
    height: 100vh;
    color: #fff;
  }

  #navSubs .scroll02 {
    overflow-y: auto;
    min-height: 100vh;
    padding-top: 224px;
    padding-bottom: 298px;
  }
}

@media print, screen and (min-width: 1280px) {
  #navSubs .scroll02 {
    display: flex;
    align-items: flex-start;
  }
}

@media screen and (min-width: 800px) and (max-width: 1279px) {
  body.is-open #navSubs {
    max-height: 100vh;
  }
}

/*--------------------------------------------
NAV SNS
---------------------------------------------*/

#navSns {
  display: flex;
  align-items: center;
}

#navSns a {
  display: block;
}

#navSns svg {
  width: auto;
}

@media screen and (max-width: 1279px) {
  #navSns svg {
    fill: #fff;
  }
}

@media screen and (max-width: 799px) {
  #navSns {
    border-top: solid #fff calc( 1.5 * 100vw / 375 );
    padding-top: calc( 27 * 100vw / 375 );
    padding-bottom: calc( 27 * 100vw / 375 );
    justify-content: center;
  }

  #navSns li + li {
    margin-left: calc( 40 * 100% / 218 );
  }

  #navSns img,
  #navSns svg {
    height: calc( 20 * 100vw / 375 );
  }
}

@media screen and (min-width: 800px) and (max-width: 1279px) {
  #navSns {
    width: 276px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #navSns li + li {
    margin-left: 35px;
  }

  #navSns img,
  #navSns svg {
    height: 40px;
  }
}

@media print, screen and (min-width: 1280px) {
  #navSns {
    margin-top: 36px;
  }

  #navSns li + li {
    margin-left: 10px;
  }

  #navSns img,
  #navSns svg {
    height: 16px;
  }
}

@media screen and (max-width: 799px) {
  #navSns svg {
    width: calc( 20 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) and (-ms-high-contrast: none) {
  #navSns svg {
    width: 16px;
  }
}

/*--------------------------------------------
NAV SUB
---------------------------------------------*/

#navSub a {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 799px) {
  #navSub {
    border-top: solid #fff calc( 1.5 * 100vw / 375 );
    padding-top: calc( 23 * 100vw / 375 );
    justify-content: space-between;
    display: flex;
    align-items: center;
  }

  #navSub a {
    font-size: 1rem;
    height: calc( 16 * 100vw / 375 );
    letter-spacing: 0.071em;
    color: #fff;
  }
}

@media screen and (min-width: 800px) and (max-width: 1279px) {
  #navSub {
    width: 276px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35px;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  #navSub li + li {
    margin-top: 53px;
  }

  #navSub a {
    font-size: 2.1rem;
    text-align: center;
    letter-spacing: 0.045em;
    justify-content: center;
    color: #fff;
  }
}

@media print, screen and (min-width: 1280px) {
  #navSub {
    display: flex;
    align-items: center;
    margin-top: 36px;
    margin-left: 14px;
  }

  #navSub li + li {
    margin-left: 10px;
  }

  #navSub a {
    font-size: 1rem;
    height: 16px;
    letter-spacing: 0.1em;
  }
}

/*--------------------------------------------
FOOOTER
---------------------------------------------*/

#footer .links01 {
  display: flex;
  align-items: center;
}

#footer .sns {
  display: flex;
  align-items: center;
  justify-content: center;
}

#footer .links02 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#footer .links02 a {
  letter-spacing: 0.071em;
  text-indent: 0.071em;
}

#footer .box {
  display: flex;
}

#footer .box p,
#footer .box a {
  color: #1a1311;
  letter-spacing: 0.1em;
}

#footer .links03 {
  display: flex;
  align-items: center;
}

#footer .links03 a {
  display: block;
}

#footer .links04 {
  padding-top: 3vh;
}

#footer .links04 p {
  text-align: center;
}

#footer .links04 ul {
  padding-top: 2vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#footer .links04 ul li {
  display: block;
  float: left;
}

#footer .links04 ul li a img {
  height: 3vh;
}

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

  #footer .links01 {
    justify-content: space-between;
  }

  #footer .links01 a {
    font-size: 1rem;
    letter-spacing: 0.071em;
  }

  #footer .sns {
    margin-top: calc( 38 * 100vw / 375 );
  }

  #footer .sns li + li {
    margin-left: calc( 36 * 100% / 325 );
  }

  #footer .sns img {
    height: calc( 26 * 100vw / 375 );
  }

  #footer .links02 {
    margin-top: calc( 32 * 100vw / 375 );
  }

  #footer .links02 li + li {
    margin-top: calc( 9 * 100vw / 375 );
  }

  #footer .links02 a {
    font-size: 1rem;
  }

  #footer .box {
    margin-top: calc( 26 * 100vw / 375 );
    flex-direction: column-reverse;
    align-items: center;
  }

  #footer .box p,
  #footer .box a {
    font-size: 1rem;
  }

  #footer .links03 {
    margin-top: calc( 6 * 100vw / 375 );
  }

  #footer .links03 li {
    margin: 0 1em;
  }

  #footer .links03 li:first-of-type,
  #footer .links03 li:last-of-type {
    margin: 0 !important;
  }

  #footer .links04 ul li a img {
    padding: 0 3vw;
  }

  #footer p {
    text-indent: 0.1em;
  }
}

@media print, screen and (min-width: 800px) {
  #footer .wrap {
    padding-top: 45px;
    padding-bottom: 56px;
  }

  #footer .links01 {
    justify-content: center;
  }

  #footer .links01 li + li {
    margin-left: 42px;
  }

  #footer .links01 a {
    font-size: 1.4rem;
    letter-spacing: 0.075em;
  }

  #footer .sns {
    margin-top: 45px;
  }

  #footer .sns li + li {
    margin-left: 36px;
  }

  #footer .sns img {
    height: 26px;
  }

  #footer .links02 {
    margin-top: 32px;
  }

  #footer .links02 li + li {
    margin-top: 9px;
  }

  #footer .links02 a {
    letter-spacing: 0.071em;
    text-indent: 0.071em;
    font-size: 1rem;
  }

  #footer .links03 li {
    margin-left: 1em;
  }

  #footer .links04 ul li a img {
    padding: 0 3vw;
  }

  #footer .box {
    margin-top: 26px;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
  }

  #footer .box p,
  #footer .box a {
    font-size: 1rem;
    letter-spacing: 0.1em;
  }
}

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

#mv {
  overflow: hidden;
  position: relative;
}

#mv #slider01 {
  font-size: 0;
}

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

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

#mv h1 {
  top: 50%;
  width: 100%;
  text-align: center;
  transform: translateY(-100vh);
  transition: transform 0.5s ease-out;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform;
  opacity: 0;
  position: absolute;
}

#mv a {
  transform: translateY(-100vh);
  transition: transform 0.5s ease-out;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform;
  opacity: 0;
  position: absolute;
}

#mv.is-loaded h1,
#mv.is-loaded a {
  transform: translateY(0);
  opacity: 1;
}

#mv > a {
  font-size: 1.2rem;
  display: block;
  background-image: url("/images/ui/icon/down01.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  color: #fff;
  letter-spacing: 0.11em;
  text-indent: 0.11em;
  text-align: center;
  left: 50%;
}

@media screen and (max-width: 799px) {
  #mv {
    height: calc( 100vh - ( 75 * 100vw / 375 ) );
  }

  #mv .box,
  #mv picture {
    height: calc( 100vh - ( 75 * 100vw / 375 ) );
  }

  #mv > a {
    background-size: auto calc( 25 * 100vw / 375 );
    padding-bottom: calc( 32 * 100vw / 375 );
    bottom: calc( 90 * 100vw / 375 );
    margin-left: calc( -54 * 100% / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #mv > a {
    background-size: auto 25px;
    padding-bottom: 44px;
    bottom: 40px;
    margin-left: -54px;
  }
}

/*--------------------------------------------
CATCH
---------------------------------------------*/

#catch p {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.11em;
  text-indent: 0.11em;
  font-size: 1.2rem;
}

@media screen and (max-width: 799px) {
  #catch p {
    height: calc( 53 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #catch p {
    height: 78px;
  }
}

/*--------------------------------------------
RESERVATIONINPUT
---------------------------------------------*/

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

#reservationInput .checkinout dt,
#reservationConfirm .checkinout dt {
  letter-spacing: 0.071em;
}

#reservationInput #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;
}

#reservationInput #btnLocations:after {
  content: "";
  display: block;
  background: url("/images/ui/icon/down02.svg") 0 0/contain no-repeat;
  flex-shrink: 0;
}

#reservationInput .checkinout dt label {
  display: block;
  font-size: 1.1rem;
}

#reservationInput .checkinout dd:first-of-type button {
  font-size: 1.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  text-align: left;
  letter-spacing: 0.15em;
}

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

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

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

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

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

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

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

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

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

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

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

#reservationInput > 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;
}

#reservationInput > 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) {
  #reservationInput #btnLocations {
    font-size: 1.8rem;
  }

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

  #reservationInput .fieldset02 {
    margin-top: calc( 47 * 100vw / 375 );
  }

  #reservationInput .checkinout {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #reservationInput .checkinout > div + div:before {
    margin-top: calc( 20 * 100vw / 375 );
    margin-bottom: calc( 11 * 100vw / 375 );
    width: calc( 18 * 100vw / 375 );
    height: calc( 18 * 100vw / 375 );
  }

  #reservationInput .checkinout dd:first-of-type {
    margin-top: calc( 7 * 100vw / 375 );
  }

  #reservationInput .checkinout dd:first-of-type button {
    margin-top: calc( 2 * 100vw / 375 );
    justify-content: center;
    width: 100%;
  }

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

  #reservationInput .nop {
    margin-top: calc( 52 * 100vw / 375 );
    justify-content: center;
  }

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

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

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

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

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

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

  #reservationInput > a {
    margin-top: calc( 9 * 100vw / 375 );
  }

  #reservationInput > 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) {
  #reservationInput #btnLocations {
    font-size: 2.2rem;
  }

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

  #reservationInput .fieldset02 {
    margin-top: 57.5px;
    display: flex;
    align-items: flex-start;
  }

  #reservationInput .checkinout {
    padding-left: 122px;
  }

  #reservationInput .checkinout > div + div:before {
    margin-top: 22px;
    margin-bottom: 10px;
    width: 18px;
    height: 21px;
  }

  #reservationInput .checkinout dd:first-of-type {
    margin-top: 7px;
  }

  #reservationInput .checkinout dd:first-of-type button {
    margin-top: 2px;
  }

  #reservationInput .checkinout dd:first-of-type button::after {
    width: 19px;
    height: 10px;
    margin-left: 4px;
  }

  #reservationInput .nop {
    padding-top: 16px;
    margin-left: 102px;
  }

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

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

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

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

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

  #reservationInput .btn-submit01 {
    margin-top: 72px;
  }

  #reservationInput > a {
    margin-top: 7px;
  }

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

#reservationConfirm .head {
  display: flex;
  align-items: center;
}

#reservationConfirm .head h2 {
  letter-spacing: 0.1em;
  color: #1a1311;
}

#reservationConfirm .head a {
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.071em;
  text-indent: 0.071em;
}

#reservationConfirm .head a:before,
#reservationConfirm .head a:after {
  content: "";
  display: block;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

#reservationConfirm .head a:before {
  background-image: url("/images/ui/icon/arrow01_reverse.svg");
}

#reservationConfirm .head a:after {
  background-image: url("/images/ui/icon/arrow01.svg");
}

#reservationConfirm .box {
  background-color: #f4f4f4;
}

#reservationConfirm .checkinout {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#reservationConfirm .checkinout dd {
  letter-spacing: 0.15em;
}

#reservationConfirm .nop {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#reservationConfirm .nop dt {
  letter-spacing: 0.071em;
}

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

#reservationConfirm .nop dd:before {
  content: "";
  display: block;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

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

#reservationConfirm .nop .female dd {
  color: #fe1a0e;
}

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

#reservationConfirm .nop dd span:nth-of-type(1) {
  font-weight: 300;
}

@media screen and (max-width: 799px) {
  #reservationConfirm .head h2 {
    font-size: 1.4rem;
  }

  #reservationConfirm .head a {
    padding-left: calc( 14 * 100% / 325 );
  }

  #reservationConfirm .head a:before,
  #reservationConfirm .head a:after {
    width: calc( 4 * 100vw / 375 );
    height: calc( 8 * 100vw / 375 );
  }

  #reservationConfirm .head a:before {
    margin-right: calc( 5 * 100vw / 375 );
  }

  #reservationConfirm .head a:after {
    margin-left: calc( 5 * 100vw / 375 );
  }

  #reservationConfirm .box {
    border-radius: calc( 7 * 100vw / 375 );
    padding-top: calc( 45 * 100vw / 375 );
    padding-bottom: calc( 41 * 100vw / 375 );
    margin-top: calc( 12.5 * 100vw / 375 );
  }

  #reservationConfirm .checkinout div + div:before {
    width: calc( 18 * 100vw / 375 );
    height: calc( 21 * 100vw / 375 );
    margin-top: calc( 20 * 100vw / 375 );
    margin-bottom: calc( 10 * 100vw / 375 );
  }

  #reservationConfirm .checkinout dt {
    font-size: 1.1rem;
  }

  #reservationConfirm .checkinout dd {
    font-size: 1.9rem;
    margin-top: calc( 7 * 100vw / 375 );
  }

  #reservationConfirm .nop {
    margin-top: calc( 49 * 100vw / 375 );
  }

  #reservationConfirm .nop > div + div {
    margin-left: calc( 34 * 100% / 325 );
  }

  #reservationConfirm .nop dt {
    font-size: 1.1rem;
  }

  #reservationConfirm .nop .male dd:before {
    margin-left: calc( 15 * 100vw / 375 );
    margin-right: calc( 12 * 100vw / 375 );
    width: calc( 17 * 100vw / 375 );
  }

  #reservationConfirm .nop .female dd:before {
    margin-left: calc( 12 * 100vw / 375 );
    margin-right: calc( 8 * 100vw / 375 );
    width: calc( 21 * 100vw / 375 );
  }

  #reservationConfirm .nop dd {
    margin-top: calc( 17 * 100vw / 375 );
  }

  #reservationConfirm .nop dd:before {
    height: calc( 53 * 100vw / 375 );
  }

  #reservationConfirm .nop dd span:nth-of-type(1) {
    font-size: 3.1rem;
    margin-top: calc( 5.5 * 100vw / 375 );
    margin-right: calc( 3 * 100vw / 375 );
  }

  #reservationConfirm .nop dd span:nth-of-type(2) {
    font-size: 1.8rem;
    margin-top: calc( 16 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #reservationConfirm .head h2 {
    font-size: 1.5rem;
  }

  #reservationConfirm .head a {
    padding-left: 11px;
  }

  #reservationConfirm .head a:before,
  #reservationConfirm .head a:after {
    width: 4px;
    height: 8px;
  }

  #reservationConfirm .head a:before {
    margin-right: 5px;
  }

  #reservationConfirm .head a:after {
    margin-left: 5px;
  }

  #reservationConfirm .box {
    margin-top: 19.5px;
    border-radius: 7px;
    padding-top: 48px;
    padding-bottom: 55px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  #reservationConfirm .checkinout div + div:before {
    width: 18px;
    height: 21px;
    margin-top: 21px;
    margin-bottom: 12px;
  }

  #reservationConfirm .checkinout dt {
    font-size: 1.1rem;
  }

  #reservationConfirm .checkinout dd {
    font-size: 1.9rem;
    margin-top: 7px;
  }

  #reservationConfirm .nop {
    margin-left: 105px;
  }

  #reservationConfirm .nop > div + div {
    margin-left: 38px;
  }

  #reservationConfirm .nop dt {
    font-size: 1.1rem;
  }

  #reservationConfirm .nop .male dd:before {
    margin-left: 9px;
    margin-right: 12px;
    width: 27px;
  }

  #reservationConfirm .nop .female dd:before {
    margin-left: 6px;
    margin-right: 6px;
    width: 35px;
  }

  #reservationConfirm .nop dd {
    margin-top: 16px;
  }

  #reservationConfirm .nop dd:before {
    height: 86px;
  }

  #reservationConfirm .nop dd span:nth-of-type(1) {
    font-size: 4.4rem;
    margin-top: 20px;
    margin-right: 2px;
  }

  #reservationConfirm .nop dd span:nth-of-type(2) {
    font-size: 2.7rem;
    margin-top: 32.5px;
  }
}

#selectLocations .box {
  margin-left: auto;
  margin-right: auto;
}

#selectLocations dt button {
  width: 100%;
  letter-spacing: 0.07em;
  border-bottom-style: solid;
  border-bottom-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

#selectLocations dt button:after {
  content: "";
  display: block;
  background: url("/images/ui/icon/down02_white.svg") center/contain no-repeat;
  transition: transform 0.3s ease-in;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform;
}

#selectLocations dt.is-open button:after {
  transform: rotate(180deg);
}

#selectLocations dd {
  display: none;
}

#selectLocations dd button {
  width: 100%;
  letter-spacing: 0.07em;
  text-align: left;
  color: #fff;
}

@media screen and (max-width: 799px) {
  #selectLocations .box {
    padding-top: calc( 120.5 * 100vw / 375 );
    padding-bottom: calc( 120.5 * 100vw / 375 );
    width: calc( 202 * 100% / 375 );
  }

  #selectLocations dt button {
    font-size: 1.6rem;
    border-bottom-width: calc( 1 * 100vw / 375 );
    height: calc( 52 * 100vw / 375 );
    padding-right: calc( 4 * 100vw / 375 );
  }

  #selectLocations dt button:after {
    width: calc( 12 * 100vw / 375 );
    height: calc( 6 * 100vw / 375 );
  }

  #selectLocations dd {
    padding-top: calc( 16 * 100vw / 375 );
    padding-bottom: calc( 16 * 100vw / 375 );
  }

  #selectLocations dd li + li {
    margin-top: calc( 15 * 100vw / 375 );
  }

  #selectLocations dd button {
    font-size: 1.6rem;
  }
}

@media print, screen and (min-width: 800px) {
  #selectLocations .box {
    padding-top: 92px;
    padding-bottom: 92px;
    width: 294px;
  }

  #selectLocations dt button {
    font-size: 2.1rem;
    border-bottom-width: 1px;
    height: 71px;
    padding-right: 4px;
  }

  #selectLocations dt button:after {
    width: 16px;
    height: 9px;
  }

  #selectLocations dd {
    padding-top: 24.5px;
    padding-bottom: 23.5px;
  }

  #selectLocations dd li + li {
    margin-top: 21px;
  }

  #selectLocations dd button {
    font-size: 2.1rem;
  }
}

body.is-open03 {
  overflow: hidden;
}

body.is-open03 [data-aos^=fade] {
  opacity: 1 !important;
}

body.is-open03 #selectLocations {
  max-height: 100vh;
  z-index: 12;
}

#selectCheckin .box,
#selectCheckout .box {
  margin-left: auto;
  margin-right: auto;
}

#selectCheckin .datepicker-inline,
#selectCheckin .datepicker {
  width: 100%;
}

#selectCheckout .datepicker-inline,
#selectCheckout .datepicker {
  width: 100%;
}

#selectCheckin .datepicker,
#selectCheckout .datepicker {
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  font-family: var(--fontFamily);
  font-weight: 600;
}

#selectCheckin .datepicker--nav,
#selectCheckout .datepicker--nav {
  padding: 0;
  min-height: inherit;
  justify-content: flex-start;
  border-bottom-color: #000;
}

#selectCheckin .datepicker--nav .datepicker--nav-title,
#selectCheckout .datepicker--nav .datepicker--nav-title {
  order: 1;
  flex-grow: 1;
  border-radius: 0;
  padding: 0;
  display: block;
  letter-spacing: 0.1em;
  pointer-events: none;
  cursor: default;
}

#selectCheckin .datepicker--nav .datepicker--nav-title:hover,
#selectCheckout .datepicker--nav .datepicker--nav-title:hover {
  background-color: #fff;
}

#selectCheckin .datepicker--nav .datepicker--nav-title span,
#selectCheckout .datepicker--nav .datepicker--nav-title span {
  margin-right: 1em;
  color: #000;
}

#selectCheckin .datepicker--nav .datepicker--nav-action,
#selectCheckout .datepicker--nav .datepicker--nav-action {
  border-radius: 0;
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#selectCheckin .datepicker--nav .datepicker--nav-action:hover,
#selectCheckout .datepicker--nav .datepicker--nav-action:hover {
  background-color: #fff;
}

#selectCheckin .datepicker--content,
#selectCheckout .datepicker--content {
  padding: 0;
}

#selectCheckin .datepicker--days-names,
#selectCheckout .datepicker--days-names {
  margin: 0;
}

#selectCheckin .datepicker--days-names > div:first-of-type,
#selectCheckin .datepicker--cells-days > div:nth-of-type(7n +1):not(.-disabled-) {
  color: #fe1a0e;
}

#selectCheckout .datepicker--days-names > div:first-of-type,
#selectCheckout .datepicker--cells-days > div:nth-of-type(7n +1):not(.-disabled-) {
  color: #fe1a0e;
}

#selectCheckin .datepicker--day-name,
#selectCheckout .datepicker--day-name {
  color: #000;
}

#selectCheckin .datepicker--day-name,
#selectCheckout .datepicker--day-name {
  font-weight: 300;
}

#selectCheckin .datepicker--cells-days,
#selectCheckout .datepicker--cells-days {
  justify-content: space-between;
}

#selectCheckin .datepicker--cell-day,
#selectCheckout .datepicker--cell-day {
  border-radius: 50%;
}

#selectCheckin .datepicker--cell.-selected-,
#selectCheckout .datepicker--cell.-selected- {
  background-color: #000;
  color: #fff !important;
}

#selectCheckin .datepicker--cell.-selected-02,
#selectCheckout .datepicker--cell.-selected-02 {
  background-color: gray;
  color: #fff !important;
}

@media screen and (max-width: 799px) {
  #selectCheckin .box,
  #selectCheckout .box {
    padding-top: calc( 114 * 100vw / 375 );
    width: calc( 324 * 100% / 375 );
  }

  #selectCheckin .datepicker-here,
  #selectCheckout .datepicker-here {
    margin-top: calc( 22 * 100vw / 375 );
  }

  #selectCheckin .datepicker,
  #selectCheckout .datepicker {
    padding-left: calc( 34 * 100% / 324 );
    padding-right: calc( 34 * 100% / 324 );
    padding-top: calc( ( 65 - 30 ) * 100vw / 375 );
    padding-bottom: calc( 50 * 100vw / 375 );
  }

  #selectCheckin .datepicker--nav,
  #selectCheckout .datepicker--nav {
    padding-bottom: calc( ( 19 - 8.5 ) * 100vw / 375 );
    border-width: calc( 1 * 100vw / 375 );
  }

  #selectCheckin .datepicker--nav-title,
  #selectCheckout .datepicker--nav-title {
    font-size: 1.8rem;
  }

  #selectCheckin .datepicker--nav-title h6,
  #selectCheckout .datepicker--nav-title h6 {
    margin-bottom: calc( 12 * 100vw / 375 );
  }

  #selectCheckin .datepicker--nav-action,
  #selectCheckout .datepicker--nav-action {
    margin-top: calc( ( 30 - 6.5 ) * 100vw / 375 );
    width: calc( 31 * 100vw / 375 );
    height: calc( 31 * 100vw / 375 );
  }

  #selectCheckin .datepicker--nav-action img,
  #selectCheckout .datepicker--nav-action img {
    height: calc( 14 * 100vw / 375 );
  }

  #selectCheckin .datepicker--content,
  #selectCheckout .datepicker--content {
    padding-top: calc( 17 * 100vw / 375 );
  }

  #selectCheckin .datepicker--day-name,
  #selectCheckout .datepicker--day-name {
    font-size: 1.6rem;
  }

  #selectCheckin .datepicker--cell-day,
  #selectCheckout .datepicker--cell-day {
    width: calc( 34 * 100vw / 375 );
    height: calc( 34 * 100vw / 375 );
    font-size: 1.6rem;
    margin-top: calc( 2 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #selectCheckin .box,
  #selectCheckout .box {
    padding-top: 206px;
    width: 427px;
  }

  #selectCheckin .datepicker-here,
  #selectCheckout .datepicker-here {
    margin-top: 36px;
  }

  #selectCheckin .datepicker,
  #selectCheckout .datepicker {
    padding-left: 45px;
    padding-right: 45px;
    padding-top: calc( 82px - 43px );
    padding-bottom: 70px;
  }

  #selectCheckin .datepicker--nav,
  #selectCheckout .datepicker--nav {
    padding-bottom: calc( 15px - 11.5px );
  }

  #selectCheckin .datepicker--nav-title,
  #selectCheckout .datepicker--nav-title {
    font-size: 2.3rem;
  }

  #selectCheckin .datepicker--nav-title h6,
  #selectCheckout .datepicker--nav-title h6 {
    margin-bottom: 20px;
  }

  #selectCheckin .datepicker--nav-action,
  #selectCheckout .datepicker--nav-action {
    margin-top: 8px;
    width: 41px;
    height: 41px;
    margin-top: calc( 43px - 9px );
  }

  #selectCheckin .datepicker--nav-action img,
  #selectCheckout .datepicker--nav-action img {
    height: 18px;
  }

  #selectCheckin .datepicker--nav-title + .datepicker--nav-action,
  #selectCheckout .datepicker--nav-title + .datepicker--nav-action {
    margin-left: 31px;
  }

  #selectCheckin .datepicker--content,
  #selectCheckout .datepicker--content {
    padding-top: 22px;
  }

  #selectCheckin .datepicker--day-name,
  #selectCheckout .datepicker--day-name {
    font-size: 2.1rem;
  }

  #selectCheckin .datepicker--cell-day,
  #selectCheckout .datepicker--cell-day {
    width: 45px;
    height: 45px;
    font-size: 2rem;
    margin-top: 3.8px;
  }
}

#signup .box {
  margin-left: auto;
  margin-right: auto;
}

#signup h3 {
  text-align: center;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

#signup h3 + p {
  letter-spacing: 0.15em;
}

#signup form + p {
  letter-spacing: 0.071em;
}

@media screen and (max-width: 799px) {
  #signup .scroll {
    padding-top: calc( 58 * 100vw / 375 );
    padding-bottom: calc( ( 79 - 5 ) * 100vw / 375 );
  }

  #signup .box {
    width: calc( 242 * 100% / 375 );
  }

  #signup h3 {
    font-size: 1.8rem;
    margin-top: calc( 13 * 100vw / 375 );
  }

  #signup h3 + p {
    font-size: 1rem;
    line-height: 2.4;
    margin-top: calc( ( 26 - 7 ) * 100vw / 375 );
  }

  #signup form {
    margin-top: calc( ( 41 - 7 ) * 100vw / 375 );
  }

  #signup form + p {
    margin-top: calc( ( 51 - 5 ) * 100vw / 375 );
    font-size: 1rem;
    line-height: 2.25;
    color: #b1b1b1;
  }
}

@media print, screen and (min-width: 800px) {
  #signup .scroll {
    padding-top: 121px;
    padding-bottom: calc( 183px - 4.5px );
  }

  #signup .box {
    width: 327px;
  }

  #signup h3 {
    font-size: 2.4rem;
    margin-top: 45px;
  }

  #signup h3 + p {
    font-size: 1.2rem;
    line-height: 2.08;
    margin-top: calc( 53px - 6.5px );
  }

  #signup form {
    margin-top: calc( 52px - 6.5px );
  }

  #signup form + p {
    margin-top: calc( 45px - 4.5px );
    font-size: 1rem;
    line-height: 1.9;
  }
}

#signin .box {
  margin-left: auto;
  margin-right: auto;
}

#signin h3 {
  text-align: center;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

@media screen and (max-width: 799px) {
  #signin .scroll {
    padding-top: calc( 179 * 100vw / 375 );
    padding-bottom: calc( 208 * 100vw / 375 );
  }

  #signin .box {
    width: calc( 242 * 100% / 375 );
  }

  #signin h3 {
    font-size: 1.8rem;
    margin-top: calc( 7 * 100vw / 375 );
  }

  #signin form {
    margin-top: calc( 18 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #signin .scroll {
    padding-top: 247px;
    padding-bottom: 350px;
  }

  #signin .box {
    width: 327px;
  }

  #signin h3 {
    font-size: 2.4rem;
    margin-top: 45px;
  }

  #signin form {
    margin-top: 21px;
  }
}

#planOptionsPopup .box {
  margin-left: auto;
  margin-right: auto;
}

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

@media screen and (max-width: 799px) {
  #planOptionsPopup .scroll {
    padding-top: calc( 109 * 100vw / 375 );
    padding-bottom: calc( 159 * 100vw / 375 );
  }

  #planOptionsPopup .box {
    width: calc( 241 * 100% / 375 );
  }

  #planOptionsPopup .title01 {
    margin-top: calc( 19 * 100vw / 375 );
  }

  #planOptionsPopup .text03 {
    margin-top: calc( 26 * 100vw / 375 );
  }

  #planOptionsPopup picture {
    margin-top: calc( 25 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #planOptionsPopup .scroll {
    padding-top: 109px;
    padding-bottom: 159px;
  }

  #planOptionsPopup .box {
    width: 332px;
  }

  #planOptionsPopup .title01 {
    margin-top: 19px;
  }

  #planOptionsPopup .text03 {
    margin-top: 26px;
  }

  #planOptionsPopup picture {
    margin-top: 25px;
  }
}

body.is-open04 {
  overflow: hidden;
}

body.is-open04 #selectCheckin {
  max-height: 100vh;
  z-index: 12;
}

body.is-open05 {
  overflow: hidden;
}

body.is-open05 #selectCheckout {
  max-height: 100vh;
  z-index: 12;
}

body.is-open06 #signup,
body.is-open07 #signin,
body.is-open08 #planOptionsPopup {
  max-height: 100vh;
  z-index: 2000;
}

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

#service .head {
  display: flex;
  align-items: center;
}

#service h3 {
  display: flex;
  align-items: center;
}

#service h3 span:nht-of-type(1) {
  font-size: 0;
  flex-shrink: 0;
}

#service h3 span:nht-of-type(2) {
  letter-spacing: 0.15em;
}

#service dl {
  display: flex;
  align-items: flex-start;
}

#service dt {
  letter-spacing: 0.1em;
}

#service dd,
#service head p {
  letter-spacing: 0.11em;
}

#service li > p {
  letter-spacing: 0.075em;
  margin-right: -0.075em;
}

@media screen and (max-width: 799px) {
  #service ul {
    margin-top: calc( 42 * 100vw / 375 );
  }

  #service li + li {
    margin-top: calc( ( 53 - 4.5 ) * 100vw / 375 );
  }

  #service .head {
    justify-content: space-between;
  }

  #service h3 span:nth-of-type(2) {
    font-size: 1.8rem;
  }

  #service .icon-sleep {
    margin-right: calc( 7 * 100vw / 375 );
    margin-left: calc( 2 * 100vw / 375 );
  }

  #service .icon-sleep img {
    height: calc( 35 * 100vw / 375 );
  }

  #service .icon-time {
    margin-right: calc( 8 * 100vw / 375 );
    margin-left: calc( 4 * 100vw / 375 );
  }

  #service .icon-time img {
    height: calc( 39 * 100vw / 375 );
  }

  #service .icon-shower {
    margin-right: calc( 10 * 100vw / 375 );
    margin-left: calc( 7 * 100vw / 375 );
  }

  #service .icon-shower img {
    height: calc( 41 * 100vw / 375 );
  }

  #service .icon-desk {
    margin-right: calc( 9 * 100vw / 375 );
    margin-left: calc( 2 * 100vw / 375 );
  }

  #service .icon-desk img {
    height: calc( 37 * 100vw / 375 );
  }

  #service dl > div + div {
    margin-left: calc( 13 * 100vw / 375 );
  }

  #service dt {
    font-size: 1rem;
  }

  #service dd,
  #service .head p {
    font-size: 1.2rem;
  }

  #service dd {
    margin-top: calc( 5 * 100vw / 375 );
  }

  #service li > p {
    font-size: 1rem;
    line-height: 1.9;
    margin-top: calc( ( 16 - 4.5 ) * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #service ul {
    margin-top: 41px;
  }

  #service li + li {
    margin-top: calc( 46px - 5.5px );
  }

  #service h3 span:nth-of-type(2) {
    font-size: 2.5rem;
  }

  #service .icon-sleep {
    margin-right: 18px;
  }

  #service .icon-sleep img {
    height: 57px;
  }

  #service .icon-time {
    margin-right: 20px;
    margin-left: 8px;
  }

  #service .icon-time img {
    height: 69px;
  }

  #service .icon-shower,
  #service .icon-desk {
    margin-right: 11px;
    margin-left: 18px;
  }

  #service .icon-shower img,
  #service .icon-desk img {
    height: 66px;
  }

  #service .head dl,
  #service .head p {
    margin-left: 52px;
  }

  #service dl > div + div {
    margin-left: 13px;
  }

  #service dt {
    font-size: 1rem;
  }

  #service dd,
  #service .head p {
    font-size: 1.2rem;
  }

  #service dd {
    margin-top: 5px;
  }

  #service li > p {
    font-size: 1.4rem;
    line-height: 1.79;
    margin-top: calc( 22px - 5.5px );
  }
}

#formLogin,
#campaignCodeForm,
#signup,
#signin,
#navSubs,
#nav,
.popup {
  transition: none !important;
}

.message {
  padding-top: 2vh;
  padding-bottom: 2vh;
}

.message p {
  color: #FF0000;
  text-align: center;
}

.error_message {
  padding-top: 2vh;
  padding-bottom: 2vh;
}

.error_message p {
  color: #FF0000;
  text-align: center;
}

.error_messages {
  padding-top: 2vh;
}

.error_messages li {
  color: #FF0000;
}

.error_messages li p {
  text-align: center;
}

#login_error,
#_login_error {
  display: none;
  padding-top: 2vh;
  padding-bottom: 2vh;
}

#login_error p,
#_login_error p {
  color: #FF0000 !important;
  text-align: center;
}

/*--------------------------------------------
CAMPAIGN CODE FORM
---------------------------------------------*/

body.is-open10 {
  overflow: hidden;
}

body.is-open10 [data-aos^=fade] {
  opacity: 1 !important;
}

body.is-open10 #campaignCodeForm {
  max-height: 100vh;
}

#campaignCodeForm {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 10;
  transition: max-height 0.5s ease-in;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: max-height;
  max-height: 0;
  overflow: hidden;
  overflow-y: scroll;
  height: 100vh;
  color: #fff;
}

#campaignCodeForm .scroll {
  overflow-y: auto;
  min-height: 100vh;
}

#campaignCodeForm .box {
  margin-left: auto;
  margin-right: auto;
}

#campaignCodeForm h4 {
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-align: center;
}

#campaignCodeForm p {
  letter-spacing: 0.1em;
}

#campaignCodeForm form p {
  color: #fff;
  text-align: center;
  text-indent: -0.1em;
  font-weight: 300;
}

#campaignCodeForm form p a {
  text-decoration: underline;
  color: #fff;
}

#campaignCodeForm #mypageClose {
  display: block;
  margin-left: auto;
}

#campaignCodeForm #mypageClose img {
  width: 100%;
  height: auto;
}

#campaignCodeForm .box > p {
  margin-left: -0.1em;
  line-height: 1.5;
  font-size: 1rem;
}

#campaignCodeForm input[type=text],
#campaignCodeForm input[type=email],
#campaignCodeForm input[type=password] {
  border-style: solid;
  border-color: #fff;
  font-weight: 300;
  background-color: transparent;
  color: #fff;
  text-align: center;
  width: 100%;
}

#campaign_code_close {
  float: right;
}

#campaign_code_close img {
  height: 25px;
}

@media screen and (max-width: 799px) {
  #campaignCodeForm .box {
    padding-top: calc( 23 * 100vw / 375 );
    padding-bottom: calc( ( 66 - 2.5 ) * 100vw / 375 );
    width: calc( 242 * 100% / 375 );
  }

  #campaignCodeForm #mypageClose {
    width: calc( 50 * 100% / 242 );
    margin-left: calc( 173 * 100% / 242 );
  }

  #campaignCodeForm h4 {
    font-size: 1.8rem;
  }

  #campaignCodeForm h4:first-of-type {
    margin-top: calc( 41 * 100vw / 375 );
  }

  #campaignCodeForm form {
    margin-top: calc( 13 * 100vw / 375 );
  }

  #campaignCodeForm form p {
    font-size: 1.2rem;
    margin-top: calc( 9 * 100vw / 375 );
  }

  #campaignCodeForm form + h4 {
    margin-top: calc( 55 * 100vw / 375 );
  }

  #campaignCodeForm .box > p {
    margin-top: calc( ( 14 - 2.5 ) * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #campaignCodeForm .box {
    padding-top: 111px;
    padding-bottom: calc( 148px - 2.5px );
    width: 327px;
  }

  #campaignCodeForm #mypageClose {
    width: 62px;
  }

  #campaignCodeForm h4 {
    font-size: 2.4rem;
  }

  #campaignCodeForm h4:first-of-type {
    margin-top: 27px;
  }

  #campaignCodeForm form {
    margin-top: 17px;
  }

  #campaignCodeForm form p {
    font-size: 1.5rem;
    margin-top: 12px;
  }

  #campaignCodeForm form + h4 {
    margin-top: 75px;
  }

  #campaignCodeForm .box > p {
    margin-top: calc( 18px - 2.5px );
  }
}

#signup input[type=text],
#signup input[type=email],
#signup input[type=password] {
  border-style: solid;
  border-color: #fff;
  font-weight: 300;
  background-color: transparent;
  color: #fff;
  text-align: center;
  width: 100%;
}

#signin input[type=text],
#signin input[type=email],
#signin input[type=password] {
  border-style: solid;
  border-color: #fff;
  font-weight: 300;
  background-color: transparent;
  color: #fff;
  text-align: center;
  width: 100%;
}

#campaignCodeForm input[type=text]:-ms-input-placeholder,
#campaignCodeForm input[type=email]:-ms-input-placeholder,
#campaignCodeForm input[type=password]:-ms-input-placeholder {
  color: #969696;
}

#signup input[type=text]:-ms-input-placeholder,
#signup input[type=email]:-ms-input-placeholder,
#signup input[type=password]:-ms-input-placeholder {
  color: #969696;
}

#signin input[type=text]:-ms-input-placeholder,
#signin input[type=email]:-ms-input-placeholder,
#signin input[type=password]:-ms-input-placeholder {
  color: #969696;
}

#campaignCodeForm input[type=text]::-moz-placeholder, #campaignCodeForm input[type=email]::-moz-placeholder, #campaignCodeForm input[type=password]::-moz-placeholder {
  color: #969696;
}

#campaignCodeForm input[type=text]:-ms-input-placeholder, #campaignCodeForm input[type=email]:-ms-input-placeholder, #campaignCodeForm input[type=password]:-ms-input-placeholder {
  color: #969696;
}

#campaignCodeForm input[type=text]::placeholder,
#campaignCodeForm input[type=email]::placeholder,
#campaignCodeForm input[type=password]::placeholder {
  color: #969696;
}

#signup input[type=text]::-moz-placeholder, #signup input[type=email]::-moz-placeholder, #signup input[type=password]::-moz-placeholder {
  color: #969696;
}

#signup input[type=text]:-ms-input-placeholder, #signup input[type=email]:-ms-input-placeholder, #signup input[type=password]:-ms-input-placeholder {
  color: #969696;
}

#signup input[type=text]::placeholder,
#signup input[type=email]::placeholder,
#signup input[type=password]::placeholder {
  color: #969696;
}

#signin input[type=text]::-moz-placeholder, #signin input[type=email]::-moz-placeholder, #signin input[type=password]::-moz-placeholder {
  color: #969696;
}

#signin input[type=text]:-ms-input-placeholder, #signin input[type=email]:-ms-input-placeholder, #signin input[type=password]:-ms-input-placeholder {
  color: #969696;
}

#signin input[type=text]::placeholder,
#signin input[type=email]::placeholder,
#signin input[type=password]::placeholder {
  color: #969696;
}

@media screen and (max-width: 799px) {
  #campaignCodeForm button + button,
  #campaignCodeForm input + input,
  #campaignCodeForm a + a {
    margin-top: calc( 9 * 100vw / 375 );
  }

  #signup button + button,
  #signup input + input,
  #signup a + a {
    margin-top: calc( 9 * 100vw / 375 );
  }

  #signin button + button,
  #signin input + input,
  #signin a + a {
    margin-top: calc( 9 * 100vw / 375 );
  }

  #campaignCodeForm input[type=text],
  #campaignCodeForm input[type=email],
  #campaignCodeForm input[type=password] {
    height: calc( 34 * 100vw / 375 );
    border-width: calc( 1 * 100vw / 375 );
    border-radius: calc( 8 * 100vw / 375 );
    font-size: 1.4rem;
  }

  #signup input[type=text],
  #signup input[type=email],
  #signup input[type=password] {
    height: calc( 34 * 100vw / 375 );
    border-width: calc( 1 * 100vw / 375 );
    border-radius: calc( 8 * 100vw / 375 );
    font-size: 1.4rem;
  }

  #signin input[type=text],
  #signin input[type=email],
  #signin input[type=password] {
    height: calc( 34 * 100vw / 375 );
    border-width: calc( 1 * 100vw / 375 );
    border-radius: calc( 8 * 100vw / 375 );
    font-size: 1.4rem;
  }

  #campaignCodeForm fieldset + fieldset,
  #signup fieldset + fieldset,
  #signin fieldset + fieldset {
    margin-top: calc( 29 * 100vw / 375 );
  }
}

@media print, screen and (min-width: 800px) {
  #campaignCodeForm button + button,
  #campaignCodeForm input + input,
  #campaignCodeForm a + a {
    margin-top: 12px;
  }

  #signup button + button,
  #signup input + input,
  #signup a + a {
    margin-top: 12px;
  }

  #signin button + button,
  #signin input + input,
  #signin a + a {
    margin-top: 12px;
  }

  #campaignCodeForm input[type=text],
  #campaignCodeForm input[type=email],
  #campaignCodeForm input[type=password] {
    height: 46px;
    border-width: 1px;
    border-radius: 8px;
    font-size: 1.8rem;
  }

  #signup input[type=text],
  #signup input[type=email],
  #signup input[type=password] {
    height: 46px;
    border-width: 1px;
    border-radius: 8px;
    font-size: 1.8rem;
  }

  #signin input[type=text],
  #signin input[type=email],
  #signin input[type=password] {
    height: 46px;
    border-width: 1px;
    border-radius: 8px;
    font-size: 1.8rem;
  }

  #campaignCodeForm fieldset + fieldset,
  #signup fieldset + fieldset,
  #signin fieldset + fieldset {
    margin-top: 39px;
  }
}