@charset "UTF-8";

html,
body {
  /* background-color: var(--bg-color-special) !important; */
}

.title {
  justify-content: center;
  display: flex;
  color: var(--title-font-color);
  letter-spacing: 2.28px;
  gap: 16px;
  margin: var(--spacing-xl) 0 var(--spacing-md) 0;
}

.section {
  padding: var(--spacing-xl) 0 var(--spacing-xl) 0;
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.article-list {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding: var(--spacing-xl) 0px var(--spacing-xl) 0px;
  margin: 0 auto;
  max-width: var(--container-max-width);

  .article {
    flex: 1 0 0%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);

    @media screen and (max-width: 480px) {
      flex: 100%;
    }

    .article-img {
      margin: var(--spacing-sm) 0;
      aspect-ratio: 3 / 2;
      display: flex;

      img {
        align-self: center;
      }
    }
  }
}

.travel-fetured {
  margin: var(--navbar-height) auto 0 auto;
  padding: 0 0 var(--spacing-xl) 0;

  .title {
    justify-content: center;
    display: flex;
    color: var(--title-font-color);
    font-size: var(--font-size-xxl);
    letter-spacing: 2.28px;
    gap: 16px;
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;

    /* global.cssで調整 */
    /* @media screen and (max-width: 900px) {
            font-size: var(--font-size-xl);
        }
        @media screen and (max-width: 480px) {
            font-size: var(--font-size-lg);
        } */
  }

  /* .article-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        max-width: var(--container-max-width);
        margin: 0 auto;
        padding: var(--spacing-xl) 0px var(--spacing-xl) 0px;
        gap: var(--spacing-xl);

        .article {
            display: flex;
            flex-direction: column;
            width: 300px;

            .img {
                justify-content: center;
                border-radius: 8px;
            }
        }
    } */

  .article-list {
    .article {
      min-width: 280px;
      max-width: 330px;
    }
  }
}

/* 予約サイトバナー */
.booking-site {
  background-color: var(--bg-color-sub);
  padding: 0;

  .title {
    color: var(--font-color);
  }

  .article-list {
    max-width: 1140px;

    .article {
      min-width: 310px;
      max-width: 360px;

      @media screen and (max-width: 480px) {
        min-width: 100%;
      }
    }
  }

  .button-area {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}