/* --- contact.css --- */

/* style.cssで設定されているパンくずリスト下の余白をリセットし、デザインの隙間をなくす */
.breadcrumb {
  margin-bottom: 0;
}

/* メインコンテンツエリアの背景色と上下の余白を設定 */
.main-bg {
  background-color: #f0f9fc; /* 薄い青系の背景色 */
  padding: 30px 0 80px; /* 上下に余白を設定 */
}

/* ページ全体のコンテンツを中央に配置するためのコンテナ */
.contact-container {
  max-width: 900px; /* 最大幅を指定 */
  margin: 0 auto; /* 左右中央揃え */
  padding: 0 20px; /* 左右に内側の余白を設定 */
  text-align: center; /* 中のテキストを中央揃え */
}

/* 「お問い合わせ」のメインタイトル */
.page-title {
  font-size: 42px; /* 文字サイズ */
  font-weight: 600; /* 文字の太さ */
  color: #222; /* 文字色 */
  margin-bottom: 40px; /* 下の要素との余白 */
  text-align: center; /* テキストを中央揃え */
  letter-spacing: 1px; /* 文字間隔 */
}

/* タイトル下の導入文 */
.contact-intro {
  font-size: 20px; /* 文字サイズ */
  line-height: 1.8; /* 行の高さ */
  margin-bottom: 60px; /* 下の要素との余白 */
  color: #333; /* 文字色 */
}

/* 導入文内のリンク（よくあるご質問はこちら）のスタイル */
.contact-intro a {
  color: #38a6cc; /* サイトのテーマカラー（青色） */
  text-decoration: underline; /* リンクであることを示す下線 */
  transition: opacity 0.3s; /* ホバー時の変化を滑らかに */
}

.contact-intro a:hover {
  text-decoration: none; /* ホバー時に下線を消す */
  opacity: 0.8; /* 少し透過させて反応を出す */
}

/* 各お問い合わせセクション */
.contact-section {
  /* このクラスは現在使用していませんが、後方互換性のために残しています */
}

/* 複数のお問い合わせカードをまとめるコンテナ */
.contact-cards-wrapper {
  display: flex; /* Flexboxを有効化 */
  flex-direction: column; /* 子要素を縦に並べる */
  gap: 40px; /* カード間の余白 */
  margin-bottom: 60px; /* 下の要素との余白 */
}

/* 各お問い合わせ情報を囲むカードの基本スタイル */
.contact-card {
  background-color: #ffffff; /* 背景色を白に */
  padding: 50px 40px; /* 内側の余白 */
  border-radius: 16px; /* 角を丸くする */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); /* 薄い影を付ける */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーションを設定 */
}

/* カードにマウスを乗せた時のスタイル */
.contact-card:hover {
  transform: translateY(-5px); /* 少し上に浮き上がる */
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1); /* 影を少し濃くする */
}

/* カード内のタイトル（例：「商品・サービスに関するお問い合わせ」） */
.contact-section-title {
  font-size: 28px; /* 文字サイズ */
  font-weight: 700; /* 文字の太さ */
  margin-bottom: 40px; /* 下の要素との余白 */
  color: #333; /* 文字色 */
}

/* カード内の電話とメールの項目を横並びにするためのコンテナ */
.contact-details {
  display: flex; /* Flexboxを有効化 */
  justify-content: center; /* 中央揃え */
  flex-wrap: wrap; /* 画面幅が足りない場合に折り返す */
}

/* 各問い合わせ方法（電話、メール）のブロック */
.contact-item {
  display: flex; /* Flexboxを有効化 */
  flex-direction: column; /* 子要素を縦に並べる */
  align-items: center; /* 中央揃え */
  gap: 15px; /* アイコンやテキスト間の余白 */
  flex: 1; /* 親要素内で均等に幅を分配し、レイアウト崩れを防ぐ */
  min-width: 250px; /* 最小幅を確保 */
}

/* 電話やメールのアイコン画像 */
.contact-icon {
  width: 50px; /* 幅 */
  height: 50px; /* 高さ */
}

/* 電話番号とメールアドレスのテキストリンク */
.contact-info {
  font-size: 28px; /* 文字サイズ */
  font-weight: bold; /* 文字を太くする */
  color: #333; /* 通常時の文字色 */
  text-decoration: none; /* 下線を消す */
  transition: color 0.3s; /* ホバー時の色変化を滑らかにする */
}

/* リンクにマウスを乗せた時のスタイル */
.contact-info:hover {
  color: #38a6cc; /* サイトのテーマカラーに変更 */
}

/* 営業時間の注釈テキスト */
.business-hours {
  margin-top: 20px; /* 上の要素（電話番号）との余白 */
  font-size: 15px; /* 文字サイズ */
  line-height: 1.8; /* 行の高さ */
  color: #333; /* 文字色 */
}

/* デスクトップ表示（769px以上）の時だけ有効になる改行タグ用のクラス */
.pc-br-only {
  display: block; /* 通常は改行として表示 */
}

/* --- レスポンシブ対応：画面幅が768px以下（スマートフォンなど）の場合に適用 --- */
@media (max-width: 768px) {
  /* メインコンテンツエリアの下の余白を調整 */
  .main-bg {
    padding-bottom: 60px;
  }

  /* コンテナの左右の余白を調整 */
  .contact-container {
    padding: 0 15px;
  }

  /* ページタイトルのサイズと余白を調整 */
  .page-title {
    font-size: 32px;
    margin-bottom: 30px;
  }

  /* 導入文のサイズと余白を調整 */
  .contact-intro {
    font-size: 18px;
    margin-bottom: 50px;
  }

  /* カード間の余白を調整 */
  .contact-cards-wrapper {
    gap: 30px;
  }

  /* カードの内側の余白と角の丸みを調整 */
  .contact-card {
    padding: 40px 20px;
    border-radius: 12px;
  }

  /* カード内タイトルのサイズと余白を調整 */
  .contact-section-title {
    font-size: 22px;
    margin-bottom: 30px;
  }

  /* 電話とメールの項目を縦並びにする */
  .contact-details {
    flex-direction: column;
    gap: 40px;
  }

  /* 電話番号・メールアドレスの文字サイズを調整 */
  .contact-info {
    font-size: 24px;
  }

  /* スマートフォン表示では、デスクトップ用の改行を無効化する */
  .pc-br-only {
    display: none;
  }
}