@charset "UTF-8";
/* top layout */
/* 全体の設定
---------------------------------------------------------------------------*/
/* 基本設定
---------------------------------------------------------------------------*/
/* responsive */
/* サイズ */
/* flexbox */
/* フォント */
/* 色 */
/* グラデ背景色 */
/* 中央揃え */
/* objectfit */
/* ホバーアクション */
/* 角丸 */
/* ボタン */
/* ボタンの中のspan */
/* フォントサイズ */
/* padding margin */
/* 縦書き */
/* 内径 */
/* 文字 */
/* intr
---------------------------------------------------------------------------*/
.pg-intr {
  background-image: url(../img/stay/intr-bg.jpg); }

/* stay
---------------------------------------------------------------------------*/
.stay {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top: 70px;
  padding-bottom: 80px; }
  @media screen and (max-width: 1500px) {
    .stay {
      padding-top: 4.6666666667vw;
      padding-bottom: 5.3333333333vw; } }
  @media screen and (max-width: 480px) {
    .stay {
      padding-top: 9.3333333333vw;
      padding-bottom: 10.6666666667vw; } }
  .stay-ttlbox {
    text-align: center;
    margin-bottom: 90px; }
    @media screen and (max-width: 1500px) {
      .stay-ttlbox {
        margin-bottom: 6vw; } }
    @media screen and (max-width: 480px) {
      .stay-ttlbox {
        margin-bottom: 12vw; } }
  .stay-ttl {
    font-size: 32px;
    letter-spacing: .02em;
    margin-bottom: 30px; }
    @media screen and (max-width: 1500px) {
      .stay-ttl {
        font-size: 2.1333333333vw; } }
    @media screen and (max-width: 480px) {
      .stay-ttl {
        font-size: 7.4666666667vw; } }
    @media screen and (max-width: 1500px) {
      .stay-ttl {
        margin-bottom: 2vw; } }
    @media screen and (max-width: 480px) {
      .stay-ttl {
        margin-bottom: 4vw; } }
  .stay-img {
    width: 1448px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-bottom: 157px;
    margin-bottom: 90px; }
    @media screen and (max-width: 1500px) {
      .stay-img {
        width: 96.5333333333vw; } }
    @media screen and (max-width: 480px) {
      .stay-img {
        width: 89.3333333333vw;
        /* 余白40 */ } }
    @media screen and (max-width: 1500px) {
      .stay-img {
        padding-bottom: 10.4666666667vw;
        margin-bottom: 6vw; } }
    @media screen and (max-width: 480px) {
      .stay-img {
        padding-bottom: 0;
        margin-bottom: 12vw; } }
    @media screen and (max-width: 480px) {
      .stay-img .main img {
        width: 100%;
        height: 60vw;
        object-fit: cover;
        object-position: center;
        font-family: "object-fit: cover; object-position: center;"; } }
    .stay-img .sub {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      position: absolute;
      bottom: 0;
      width: 1080px; }
      @media screen and (max-width: 1500px) {
        .stay-img .sub {
          width: 72vw; } }
      @media screen and (max-width: 480px) {
        .stay-img .sub {
          position: relative;
          width: 100%;
          margin-top: 2.6666666667vw; } }
      .stay-img .sub li {
        width: 350px; }
        @media screen and (max-width: 1500px) {
          .stay-img .sub li {
            width: 23.3333333333vw; } }
        @media screen and (max-width: 480px) {
          .stay-img .sub li {
            width: 32%; } }
      .stay-img .sub.left {
        left: 0; }
        @media screen and (max-width: 480px) {
          .stay-img .sub.left {
            left: auto; } }
      .stay-img .sub.right {
        right: 0; }
        @media screen and (max-width: 480px) {
          .stay-img .sub.right {
            right: auto; } }
  .stay-detail {
    width: 1200px;
    margin-left: auto;
    margin-right: auto; }
    @media screen and (max-width: 1500px) {
      .stay-detail {
        width: 80vw; } }
    @media screen and (max-width: 480px) {
      .stay-detail {
        width: 89.3333333333vw;
        /* 余白40 */ } }
    .stay-detail + .stay-detail {
      margin-top: 64px; }
      @media screen and (max-width: 1500px) {
        .stay-detail + .stay-detail {
          margin-top: 4.2666666667vw; } }
      @media screen and (max-width: 480px) {
        .stay-detail + .stay-detail {
          margin-top: 8.5333333333vw; } }

/* machiya
---------------------------------------------------------------------------*/
.machiya {
  background-image: url(../img/stay/machiya-bg.jpg);
  color: #ffffff; }

/* history
---------------------------------------------------------------------------*/
.history {
  background-image: url(../img/stay/history-bg.jpg);
  color: #ffffff; }

/* dish
---------------------------------------------------------------------------*/
.dish {
  background-image: url(../img/stay/dish-bg.jpg); }