/* ------------------------------
   ベース設定
------------------------------ */
body {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7;
  color: #333;
  background: #f9f9f9;
}

h1, h2 {
  margin: 0 0 1rem;
  line-height: 1.3;
}

p {
  margin: 0 0 1rem;
}

a {
  color: inherit;
  text-decoration: none;
}

/* コンテナ */
section, header, footer {
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ------------------------------
   ヘッダー
------------------------------ */
header {
  background: #004080;
  color: #fff;
  text-align: center;
  padding: 3rem 1rem;
  border-bottom: 4px solid #ff6600;
}
header h1 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}
header p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* CTAボタン */
.cta-button {
  display: inline-block;
  padding: 0.8rem 1.2rem;
  background: #ff6600;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: 0.3s;
}
.cta-button:hover {
  background: #e05500;
}

/* ------------------------------
   セクション共通
------------------------------ */
section {
  background: #fff;
  margin: 1rem auto;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* リスト */
ul {
  padding: 0;
  list-style: none;
  margin-bottom: 1rem;
}
ul li {
  padding: 0.5rem 0;
  border-bottom: 1px dashed #ddd;
}
ul li:last-child {
  border-bottom: none;
}

/* オーダーリスト */
ol {
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}
ol li {
  margin-bottom: 0.5rem;
}

/* FAQ */
#faq p {
  margin-bottom: 1rem;
  padding: 0.8rem;
  background: #f4f8ff;
  border-left: 4px solid #004080;
  border-radius: 4px;
}

/* お問い合わせフォーム */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.8rem;
  margin: 0.5rem 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.contact-form button {
  width: 100%;
  padding: 1rem;
}

/* フッター */
footer {
  text-align: center;
  background: #004080;
  color: #fff;
  padding: 1rem;
  font-size: 0.9rem;
}
footer a {
  color: #fff;
  text-decoration: underline;
}

/* ------------------------------
   レスポンシブ
------------------------------ */

/* タブレット（768px以上） */
@media (min-width: 768px) {
  header h1 {
    font-size: 2.2rem;
  }
  header p {
    font-size: 1.2rem;
  }
  .cta-button {
    font-size: 1.1rem;
  }
  section {
    padding: 3rem 2rem;
  }
}

/* PC（1024px以上） */
@media (min-width: 1024px) {
  body {
    font-size: 1.1rem;
  }
  header h1 {
    font-size: 2.5rem;
  }
  header p {
    font-size: 1.3rem;
  }
  section {
    padding: 3rem;
  }
}


/* ==============================
   お問い合わせセクション専用スタイル
============================== */

/* 電話ボタンとフォームの間隔調整 */
#contact .cta-button {
  display: inline-block;
  margin-bottom: 2rem; /* フォームとの間隔 */
}

/* Googleフォーム全体 */
#contact .google-form {
  width: 100%;
  max-width: 800px; /* PCで大きすぎないように制限 */
  margin: 0 auto 2rem auto; /* 上下のマージン調整 */
}

/* iframe高さ調整 */
#contact .google-form iframe {
  width: 100%;
  min-height: 600px;
  border: none;
}

/* レスポンシブ対応 */
/* タブレット以上 */
@media (min-width: 768px) {
  #contact .cta-button {
    margin-bottom: 2.5rem;
  }
  #contact .google-form iframe {
    min-height: 700px;
  }
}

/* PC以上 */
@media (min-width: 1024px) {
  #contact .cta-button {
    margin-bottom: 3rem;
  }
  #contact .google-form iframe {
    min-height: 800px;
  }
}


/* スマホでの見出し改行 */
/* デフォルトでは非表示 */
.sp-br {
  display: none;
}

/* スマホサイズ（768px以下）の場合だけ改行を表示 */
@media screen and (max-width: 768px) {
  .sp-br {
    display: block;
  }
}


/* ブログリンク用ボタン */
.blog-button {
  display: inline-block;
  background-color: #4CAF50; /* ボタンの背景色 */
  color: white; /* 文字色 */
  padding: 12px 24px;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.blog-button:hover {
  background-color: #45a049;
  transform: translateY(-2px);
}

.blog-button:active {
  transform: translateY(0);
  background-color: #3e8e41;
}