.contact-info {
    margin-top: 12vh; /* ヘッダー高さ+余白を流動的に */
    background-color: #e3f2fd;
    padding: 3vh 2vw; /* 流動的なパディング */
    text-align: center;
}

/* 非トップページ（contact.html）: ヘッダー高さを流動的に保つ */
header {
  padding: 1.5vh 0 !important; /* %管理で自動調整 */
  min-height: 9vh !important;
}
header .container { padding: 0 20px !important; }

.contact-info h2 {
  font-size: var(--fs-h2); /* グローバル可変 */
    color: #004c99;
    margin-bottom: 1vh;
    word-wrap: break-word;
}

.contact-info .phone-number {
  font-size: clamp(1.1rem, 3vw, 1.6rem);
    margin: 1vh 0;
    word-wrap: break-word;
}

.contact-info .description {
  font-size: var(--fs-body);
    color: #555;
    line-height: 1.6;
    word-wrap: break-word;
}

.contact-form {
    padding: 2rem 0;
    background-color: #fff;
}

.contact-form .container {
    max-width: min(600px, 90vw); /* 画面幅の90%または600pxの小さい方 */
    margin: 0 auto;
    padding: 2vh 4vw; /* 流動的なパディング */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background: #ffffff;
}

.contact-form h3 {
    margin-bottom: 1rem;
    color: #003366;
}

.contact-form p {
    line-height: 1.7;
}

.google-form-cta {
    margin: 2rem 0 1rem;
    text-align: center;
}

.google-form-button {
    display: inline-block;
    padding: 0.85rem 2.5rem;
    background-color: #004c99;
    color: #fff;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.google-form-button:hover {
    background-color: #003366;
}

.google-form-button:active {
    transform: scale(0.98);
}

.contact-notes {
    margin: 1.5rem 0 0;
    padding-left: 1.2rem;
    color: #444;
    line-height: 1.6;
}

.contact-notes li + li {
    margin-top: 0.5rem;
}

/* ========================================
   レスポンシブ対応
   ======================================== */

/* タブレット（768px以下） */
@media (max-width: 768px) {
  .contact-info {
    margin-top: 80px;
    padding: 1.5rem 1rem;
  }

  .contact-info h2 {
    font-size: 1.6rem;
  }

  .contact-info .phone-number {
    font-size: 1.3rem;
    margin: 1rem 0;
  }

  .contact-info .description {
    font-size: 0.95rem;
    padding: 0 1rem;
  }

  .contact-form {
    padding: 1.5rem 0;
  }

  .contact-form .container {
    max-width: 95%;
    padding: 1.5rem;
  }

  .google-form-button {
    width: 100%;
    box-sizing: border-box;
  }
}

/* スマートフォン（480px以下） */
@media (max-width: 480px) {
  .contact-info {
    margin-top: 8vh; /* ヘッダーとの空間を%管理 */
    padding: 2vh 3vw; /* 流動的なパディング */
    background-color: #e8f4fd;
  }

  .contact-info h2 {
    font-size: clamp(1.3rem, 5vw, 1.8rem); /* さらに流動的に */
    margin-bottom: 1vh;
  }

  .contact-info .phone-number {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
    margin: 1vh 0;
    font-weight: bold;
    color: #002d66;
  }

  .contact-info .description {
    font-size: clamp(0.85rem, 3.5vw, 1rem);
    line-height: 1.5;
    padding: 0 1vw; /* 横の余白を確保 */
  }

  .contact-form {
    padding: 2vh 0;
    background-color: #fafafa;
  }

  .contact-form .container {
    max-width: 95vw; /* 画面幅の95%を使用 */
    margin: 0 auto;
    padding: 2vh 3vw; /* 流動的なパディング */
    box-shadow: none;
    border-radius: 0;
    background: transparent;
  }

  .contact-notes {
    padding-left: 1rem;
  }
}

/* 超小型デバイス（320px以下） */
@media (max-width: 320px) {
  .contact-info h2 {
    font-size: clamp(1.2rem, 6vw, 1.5rem);
  }

  .contact-info .phone-number {
    font-size: clamp(1rem, 5vw, 1.3rem);
  }

  .contact-info .description {
    font-size: clamp(0.8rem, 4vw, 0.95rem);
  }

  .contact-form .container {
    padding: 1.5vh 2vw; /* さらに小さなデバイス用 */
  }

  .contact-form label {
    font-size: clamp(0.8rem, 3.5vw, 0.95rem);
  }

  .contact-form input, 
  .contact-form textarea {
    font-size: clamp(0.85rem, 3.8vw, 1rem);
    padding: 1vh 2vw;
  }

  .contact-form button {
    padding: 1.2vh 2vw;
    font-size: clamp(0.8rem, 3.5vw, 0.95rem);
  }
}