/* ============== 下層ページ用スタイル ============== */

/* 固定ページ用スタイル */
.page-content {
  max-inline-size: clamp(calc(1200px * var(--fluid-min-ratio)), calc(1200 * var(--fluid)), 1200px);
  inline-size: 100%;
  margin-inline: auto;
  padding: clamp(calc(80px * var(--fluid-min-ratio)), calc(80 * var(--fluid)), 80px) clamp(calc(40px * var(--fluid-min-ratio)), calc(40 * var(--fluid)), 40px);
}

.page-content h1 {
  font-size: clamp(calc(32px * var(--fluid-min-ratio)), calc(32 * var(--fluid)), 32px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-block-end: clamp(calc(32px * var(--fluid-min-ratio)), calc(32 * var(--fluid)), 32px);
}

.page-content h2 {
  font-size: clamp(calc(24px * var(--fluid-min-ratio)), calc(24 * var(--fluid)), 24px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-block-start: clamp(calc(40px * var(--fluid-min-ratio)), calc(40 * var(--fluid)), 40px);
  margin-block-end: clamp(calc(16px * var(--fluid-min-ratio)), calc(16 * var(--fluid)), 16px);
}

.page-content p {
  line-height: 1.8;
  letter-spacing: 0.095em;
  margin-block-end: clamp(calc(16px * var(--fluid-min-ratio)), calc(16 * var(--fluid)), 16px);
}

/* お問い合わせフォーム用スタイル */
.contact-form {
  max-inline-size: clamp(calc(800px * var(--fluid-min-ratio)), calc(800 * var(--fluid)), 800px);
  inline-size: 100%;
  margin-inline: auto;
  padding: clamp(calc(48px * var(--fluid-min-ratio)), calc(48 * var(--fluid)), 48px);
  background-color: var(--color-primaryWhite);
  border-radius: clamp(calc(24px * var(--fluid-min-ratio)), calc(24 * var(--fluid)), 24px);
}

.contact-form .form-group {
  margin-block-end: clamp(calc(24px * var(--fluid-min-ratio)), calc(24 * var(--fluid)), 24px);
}

.contact-form label {
  display: block;
  font-weight: 700;
  margin-block-end: clamp(calc(8px * var(--fluid-min-ratio)), calc(8 * var(--fluid)), 8px);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  inline-size: 100%;
  padding: clamp(calc(12px * var(--fluid-min-ratio)), calc(12 * var(--fluid)), 12px) clamp(calc(16px * var(--fluid-min-ratio)), calc(16 * var(--fluid)), 16px);
  border: 1px solid var(--color-borderGray);
  border-radius: clamp(calc(8px * var(--fluid-min-ratio)), calc(8 * var(--fluid)), 8px);
  font-size: clamp(calc(16px * var(--fluid-min-ratio)), calc(16 * var(--fluid)), 16px);
}

.contact-form textarea {
  min-block-size: clamp(calc(200px * var(--fluid-min-ratio)), calc(200 * var(--fluid)), 200px);
  resize: vertical;
}

.contact-form button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(calc(16px * var(--fluid-min-ratio)), calc(16 * var(--fluid)), 16px);
  inline-size: 100%;
  max-inline-size: clamp(calc(283px * var(--fluid-min-ratio)), calc(283 * var(--fluid)), 283px);
  margin-inline: auto;
  padding: clamp(calc(16px * var(--fluid-min-ratio)), calc(16 * var(--fluid)), 16px);
  color: #fff;
  font-weight: 700;
  font-size: clamp(calc(16px * var(--fluid-min-ratio)), calc(16 * var(--fluid)), 16px);
  border: 1px solid var(--color-primaryOrange);
  border-radius: clamp(calc(64px * var(--fluid-min-ratio)), calc(64 * var(--fluid)), 64px);
  background-image: var(--color-primaryGradient);
  cursor: pointer;
}

.contact-message {
  padding: clamp(calc(16px * var(--fluid-min-ratio)), calc(16 * var(--fluid)), 16px);
  margin-block-end: clamp(calc(24px * var(--fluid-min-ratio)), calc(24 * var(--fluid)), 24px);
  border-radius: clamp(calc(8px * var(--fluid-min-ratio)), calc(8 * var(--fluid)), 8px);
}

.contact-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.contact-message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.contact-form .required {
  color: var(--color-primaryOrange);
}

/* 404ページ用スタイル */
.error-404 {
  text-align: center;
  padding: clamp(calc(120px * var(--fluid-min-ratio)), calc(120 * var(--fluid)), 120px) clamp(calc(40px * var(--fluid-min-ratio)), calc(40 * var(--fluid)), 40px);
}

.error-404 h1 {
  font-size: clamp(calc(48px * var(--fluid-min-ratio)), calc(48 * var(--fluid)), 48px);
  margin-block-end: clamp(calc(24px * var(--fluid-min-ratio)), calc(24 * var(--fluid)), 24px);
}

.error-404 p {
  font-size: clamp(calc(18px * var(--fluid-min-ratio)), calc(18 * var(--fluid)), 18px);
  margin-block-end: clamp(calc(32px * var(--fluid-min-ratio)), calc(32 * var(--fluid)), 32px);
}

/* お知らせ詳細ページ用スタイル */
.news-single-header {
  margin-block-end: clamp(calc(32px * var(--fluid-min-ratio)), calc(32 * var(--fluid)), 32px);
}

.news-single-header .news-head {
  display: flex;
  align-items: center;
  gap: clamp(calc(12px * var(--fluid-min-ratio)), calc(12 * var(--fluid)), 12px);
  margin-block-end: clamp(calc(16px * var(--fluid-min-ratio)), calc(16 * var(--fluid)), 16px);
  color: var(--color-primaryOrange);
}

.news-single-header .news-tags {
  display: flex;
  align-items: center;
  gap: clamp(calc(8px * var(--fluid-min-ratio)), calc(8 * var(--fluid)), 8px);
  flex-wrap: wrap;
}

.news-single-header .news-tag {
  padding: clamp(calc(8px * var(--fluid-min-ratio)), calc(8 * var(--fluid)), 8px) clamp(calc(12px * var(--fluid-min-ratio)), calc(12 * var(--fluid)), 12px);
  color: var(--color-primaryBlack);
  font-size: clamp(calc(14px * var(--fluid-min-ratio)), calc(14 * var(--fluid)), 14px);
  font-weight: 500;
  border-radius: clamp(calc(40px * var(--fluid-min-ratio)), calc(40 * var(--fluid)), 40px);
  background-color: var(--color-borderGray);
}

.news-content {
  line-height: 1.8;
  letter-spacing: 0.095em;
  margin-block-end: clamp(calc(40px * var(--fluid-min-ratio)), calc(40 * var(--fluid)), 40px);
}

.news-navigation {
  margin-block-start: clamp(calc(40px * var(--fluid-min-ratio)), calc(40 * var(--fluid)), 40px);
}

.pagination {
  margin-block-start: clamp(calc(40px * var(--fluid-min-ratio)), calc(40 * var(--fluid)), 40px);
  text-align: center;
}

.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(calc(16px * var(--fluid-min-ratio)), calc(16 * var(--fluid)), 16px);
}

.pagination .page-numbers {
  padding: clamp(calc(8px * var(--fluid-min-ratio)), calc(8 * var(--fluid)), 8px) clamp(calc(16px * var(--fluid-min-ratio)), calc(16 * var(--fluid)), 16px);
  color: var(--color-primaryBlack);
  text-decoration: none;
  border-radius: clamp(calc(8px * var(--fluid-min-ratio)), calc(8 * var(--fluid)), 8px);
  transition: background-color 0.3s ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background-color: var(--color-primaryOrange);
  color: var(--color-primaryWhite);
}

/* レスポンシブ対応 */
@container (max-width: 600px) {
  .page-content {
    padding: clamp(40px, calc(40 * var(--fluid-sp)), calc(40px * var(--fluid-max-ratio))) clamp(24px, calc(24 * var(--fluid-sp)), calc(24px * var(--fluid-max-ratio)));
  }

  .page-content h1 {
    font-size: clamp(24px, calc(24 * var(--fluid-sp)), calc(24px * var(--fluid-max-ratio)));
    margin-block-end: clamp(24px, calc(24 * var(--fluid-sp)), calc(24px * var(--fluid-max-ratio)));
  }

  .page-content h2 {
    font-size: clamp(20px, calc(20 * var(--fluid-sp)), calc(20px * var(--fluid-max-ratio)));
    margin-block-start: clamp(32px, calc(32 * var(--fluid-sp)), calc(32px * var(--fluid-max-ratio)));
    margin-block-end: clamp(12px, calc(12 * var(--fluid-sp)), calc(12px * var(--fluid-max-ratio)));
  }

  .page-content p {
    font-size: clamp(14px, calc(14 * var(--fluid-sp)), calc(14px * var(--fluid-max-ratio)));
    margin-block-end: clamp(12px, calc(12 * var(--fluid-sp)), calc(12px * var(--fluid-max-ratio)));
  }

  .contact-form {
    padding: clamp(24px, calc(24 * var(--fluid-sp)), calc(24px * var(--fluid-max-ratio)));
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="tel"],
  .contact-form textarea {
    padding: clamp(10px, calc(10 * var(--fluid-sp)), calc(10px * var(--fluid-max-ratio))) clamp(12px, calc(12 * var(--fluid-sp)), calc(12px * var(--fluid-max-ratio)));
    font-size: clamp(14px, calc(14 * var(--fluid-sp)), calc(14px * var(--fluid-max-ratio)));
  }

  .contact-form textarea {
    min-block-size: clamp(150px, calc(150 * var(--fluid-sp)), calc(150px * var(--fluid-max-ratio)));
  }

  .contact-form button[type="submit"] {
    max-inline-size: clamp(240px, calc(240 * var(--fluid-sp)), calc(240px * var(--fluid-max-ratio)));
    padding: clamp(14px, calc(14 * var(--fluid-sp)), calc(14px * var(--fluid-max-ratio)));
    font-size: clamp(14px, calc(14 * var(--fluid-sp)), calc(14px * var(--fluid-max-ratio)));
  }

  .error-404 {
    padding: clamp(80px, calc(80 * var(--fluid-sp)), calc(80px * var(--fluid-max-ratio))) clamp(24px, calc(24 * var(--fluid-sp)), calc(24px * var(--fluid-max-ratio)));
  }

  .error-404 h1 {
    font-size: clamp(32px, calc(32 * var(--fluid-sp)), calc(32px * var(--fluid-max-ratio)));
  }

  .error-404 p {
    font-size: calc(16px, calc(16 * var(--fluid-sp)), calc(16px * var(--fluid-max-ratio)));
  }
}