/* components */
@import url("./../components/h1.css");
@import url("./../components/breadcrumb.css");
@import url("./../form.css");

/* ==================== 汎用固定ページ ==================== */
.page {
  padding: 0 0 64px 0;
}

.page__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.page__content {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-175);
  color: var(--color-body);
}

.page__content p {
  margin-bottom: 24px;
}

.page__content h2 {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-bold);
  color: var(--color-main);
  margin: 48px 0 24px 0;
}

.page__content h3 {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  color: var(--color-main);
  margin: 40px 0 20px 0;
}

.page__content ul,
.page__content ol {
  margin-bottom: 24px;
  padding-left: 24px;
}

.page__content li {
  margin-bottom: 8px;
  line-height: var(--line-height-175);
}

.page__content img {
  max-width: 100%;
  height: auto;
  margin: 32px 0;
}

/* ==================== レスポンシブ ==================== */
@media (max-width: 768px) {
  .page {
    padding: 0 0 48px 0;
  }

  .page__inner {
    padding: 0 16px;
  }

  .page__content {
    font-size: var(--font-size-14);
  }

  .page__content h2 {
    font-size: var(--font-size-20);
    margin: 40px 0 20px 0;
  }

  .page__content h3 {
    font-size: var(--font-size-18);
    margin: 32px 0 16px 0;
  }
}