@charset "UTF-8";
/* ===================================================================
CSS information

file name  : stay.css
author     : Abilive
style info : 過ごし方
=================================================================== */
/* ===================================================================
CSS information

file name  : _settings.scss
author     : Abilive
style info : 汎用設定
=================================================================== */
.p-stay {
  position: relative;
}
.p-stay::before {
  content: "";
  background: url(../images/common/bg_deco.png) no-repeat center/100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  height: 0;
  padding-bottom: calc(1131 / 1440 * 100%);
  width: calc(1191 / 1440 * 100%);
}
@media only screen and (min-width: 768px) {
  .p-stay::before {
    top: -8%;
  }
}
@media only screen and (max-width: 767px) {
  .p-stay::before {
    top: -2%;
  }
}
.p-stay__int {
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (min-width: 1025px) {
  .p-stay__int {
    width: calc(1160 / 1440 * 100%);
    max-width: calc(1160px);
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) {
  .p-stay__int {
    max-width: calc(1160px * ((15 + 0) / 13));
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .p-stay__int {
    width: calc(1260 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__int {
    width: calc(348 / 428 * 100%);
  }
}
.p-stay__int .read {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .p-stay__int .read {
    margin-top: calc(40 / 13 * 1rem);
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__int .read {
    margin-top: 2em;
  }
}
.p-stay__int__img {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  .p-stay__int__img {
    margin-top: calc(35 / 13 * 1rem);
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__int__img {
    margin-top: 2em;
  }
}
@media only screen and (min-width: 768px) {
  .p-stay__int__img > p {
    width: calc(1 / 5 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__int__img > p {
    width: calc(1 / 3 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__int__img > p:last-child {
    display: none;
  }
}
.p-stay__lower {
  margin-right: auto;
  margin-left: auto;
  display: flex;
}
@media only screen and (min-width: 768px) {
  .p-stay__lower {
    margin-top: calc(90 / 13 * 1rem);
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__lower {
    margin-top: 4em;
  }
}
@media only screen and (min-width: 1025px) {
  .p-stay__lower {
    width: calc(1160 / 1440 * 100%);
    max-width: calc(1160px);
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) {
  .p-stay__lower {
    max-width: calc(1160px * ((15 + 0) / 13));
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .p-stay__lower {
    width: calc(1260 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__lower {
    width: calc(348 / 428 * 100%);
  }
}
@media only screen and (min-width: 1025px) {
  .p-stay__lower {
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__lower {
    flex-direction: column;
  }
  .p-stay__lower .js-move-sp {
    width: 100%;
    order: 1;
  }
}
@media only screen and (min-width: 768px) {
  .p-stay__lower + .p-stay__lower {
    margin-top: calc(50 / 13 * 1rem);
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__lower + .p-stay__lower {
    margin-top: 3em;
  }
}
.p-stay__lower .stay_st {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .p-stay__lower .stay_st {
    text-align: center;
  }
}
.p-stay__lower .stay_st .num {
  font-family: var(--font-en);
  font-optical-sizing: auto;
  color: var(--color-cv);
  line-height: 1.2;
  width: 100%;
  display: inline-block;
}
@media only screen and (min-width: 1025px) {
  .p-stay__lower .stay_st .num {
    font-size: calc(60 / 13 * 1rem);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .p-stay__lower .stay_st .num {
    font-size: calc(50 / 13 * 1rem);
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__lower .stay_st .num {
    font-size: calc(40 / var(--font-size) * 1rem);
  }
}
@media only screen and (min-width: 768px) {
  .p-stay__lower .stay_st .num {
    text-align: right;
  }
}
@media only screen and (min-width: 768px) {
  .p-stay__lower__txt {
    width: calc(580 / 1160 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__lower__txt {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__lower__txt {
    order: 3;
  }
}
@media only screen and (min-width: 768px) {
  .p-stay__lower__txt > * {
    max-width: calc(450 / 13 * 1rem);
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__lower__txt > * {
    max-width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .p-stay__lower__txt > * {
    margin-right: calc(80 / 580 * 100%);
  }
}
@media only screen and (min-width: 768px) {
  .p-stay__lower__txt > * {
    margin-left: auto;
    width: 85%;
  }
}
.p-stay__lower__txt .c-circle-btn {
  display: flex;
}
@media only screen and (min-width: 768px) {
  .p-stay__lower__txt .c-circle-btn {
    margin-top: calc(30 / 13 * 1rem);
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__lower__txt .c-circle-btn {
    margin-top: 1.25em;
  }
}
@media only screen and (min-width: 768px) {
  .p-stay__lower__txt .c-circle-btn {
    justify-content: flex-end;
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__lower__txt .c-circle-btn {
    justify-content: center;
  }
}
@media only screen and (min-width: 768px) {
  .p-stay__lower__txt .txt {
    margin-top: calc(20 / 13 * 1rem);
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__lower__txt .txt {
    margin-top: 1.5em;
  }
}
@media only screen and (min-width: 768px) {
  .p-stay__lower__img {
    width: calc(580 / 1160 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__lower__img {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__lower__img {
    order: 2;
  }
}
@media only screen and (max-width: 767px) {
  .p-stay__lower__img {
    margin-top: 1.5em;
  }
}
@media only screen and (min-width: 768px) {
  .p-stay__lower.reverse .p-stay__lower__txt > * {
    margin-left: calc(80 / 580 * 100%);
  }
}
@media only screen and (min-width: 768px) {
  .p-stay__lower.reverse .p-stay__lower__txt > * {
    margin-right: auto;
  }
}
@media only screen and (min-width: 768px) {
  .p-stay__lower.reverse .p-stay__lower__img {
    order: -1;
  }
}