/* ========================================
   大和緑化株式会社 トップページ専用CSS（モバイルファースト）
   フェードイン・アウトスライダー版
   
   【設計方針】
   - モバイル（320px〜）を基準にデザイン
   - min-widthメディアクエリで大画面に対応
   - タッチ操作を考慮したUI設計
   - 中央固定でふわっとフェードイン・アウト
   
   【ブレークポイント】
   - 基本: 320px〜（スマートフォン）
   - 480px〜: 大きめスマートフォン
   - 768px〜: タブレット
   - 1024px〜: デスクトップ
======================================== */

/* ========================================
   基本設定（モバイル基準）
======================================== */
body {
  color: #333333; /* 基本テキスト色：濃いグレー */
  background-color: #f5f5f5; /* 背景色：薄いグレー */
  overflow-x: hidden; /* 横スクロールを無効化（スライダーのはみ出し防止） */
  font-size: 14px; /* モバイル基準のフォントサイズ */
  line-height: 1.6; /* 読みやすい行間 */
}

.main-container {
  margin: 0 auto; /* 中央揃え */
  padding: 0; /* 余白なし */
  /* 背景グラデーション：薄い緑から白へのグラデーション */
  background: linear-gradient(135deg, #ecfae5 0%, #f0fff0 100%);
}

/* ========================================
   ヒーローセクション：メインビジュアル（モバイル基準）
   
   【フェードスライダーの仕組み】
   1. .hero-fade-slider に3枚の画像を同じ位置に重ねて配置
   2. CSSアニメーションでopacityを制御してフェードイン・アウト
   3. 各画像が順次表示される美しいエフェクト
   4. 中央固定で画像が切り替わる
======================================== */
.hero {
  position: relative; /* 子要素の絶対配置の基準点 */
  width: 100%; /* 画面幅いっぱい */
  height: 40vh; /* モバイル：画面高さの40% */
  display: flex; /* フレックスボックス */
  align-items: center; /* 垂直中央揃え */
  justify-content: center; /* 水平中央揃え */
  overflow: hidden; /* はみ出した部分を隠す */
}

/* フェードスライダーコンテナ：3枚の画像を重ねて配置 */
.hero-fade-slider {
  position: absolute; /* 絶対配置 */
  top: 0; /* 上端に配置 */
  left: 0; /* 左端に配置 */
  width: 100%; /* 親要素の幅いっぱい */
  height: 100%; /* 親要素の高さいっぱい */
}

/* 各フェードスライド（画像）の基本設定 */
.fade-slide {
  position: absolute; /* 絶対配置（重ねて配置） */
  top: 0; /* 上端 */
  left: 0; /* 左端 */
  width: 100%; /* 幅100% */
  height: 100%; /* 高さ100% */
  opacity: 0; /* 初期状態：透明 */
}

/* フェードスライド内の画像設定 */
.fade-slide img {
  width: 100%; /* スライド幅いっぱい */
  height: 100%; /* スライド高さいっぱい */
  object-fit: cover; /* 縦横比を保ちながら領域を埋める */
  object-position: center; /* 画像を中央に配置 */
}

/* 
  フェードアニメーション定義
  
  【動作説明】
  - 15秒で1サイクル（各画像5秒表示）
  - 3枚の画像が順次フェードイン・アウト
  - 滑らかな透明度変化でふわっとした切り替え
  - 無限ループで継続
*/

/* 1枚目の画像のアニメーション */
.fade-slide-1 {
  animation: fadeSlide1 15s infinite;
}

/* 2枚目の画像のアニメーション（5秒遅延） */
.fade-slide-2 {
  animation: fadeSlide2 15s infinite;
}

/* 3枚目の画像のアニメーション（10秒遅延） */
.fade-slide-3 {
  animation: fadeSlide3 15s infinite;
}

/* 1枚目のフェードアニメーション */
@keyframes fadeSlide1 {
  0% {
    opacity: 1; /* 最初は表示 */
  }
  20% {
    opacity: 1; /* 5秒間表示（15秒の1/3） */
  }
  33.333% {
    opacity: 0; /* フェードアウト開始 */
  }
  66.666% {
    opacity: 0; /* 非表示状態を維持 */
  }
  80% {
    opacity: 0; /* フェードイン準備 */
  }
  100% {
    opacity: 1; /* フェードイン完了→次のサイクルへ */
  }
}

/* 2枚目のフェードアニメーション */
@keyframes fadeSlide2 {
  0% {
    opacity: 0; /* 最初は非表示 */
  }
  20% {
    opacity: 0; /* 待機 */
  }
  33.333% {
    opacity: 1; /* フェードイン開始 */
  }
  53.333% {
    opacity: 1; /* 5秒間表示 */
  }
  66.666% {
    opacity: 0; /* フェードアウト開始 */
  }
  100% {
    opacity: 0; /* 非表示状態を維持 */
  }
}

/* 3枚目のフェードアニメーション */
@keyframes fadeSlide3 {
  0% {
    opacity: 0; /* 最初は非表示 */
  }
  53.333% {
    opacity: 0; /* 待機 */
  }
  66.666% {
    opacity: 1; /* フェードイン開始 */
  }
  86.666% {
    opacity: 1; /* 5秒間表示 */
  }
  100% {
    opacity: 0; /* フェードアウト開始 */
  }
}

/* オーバーレイ：画像の上に薄い黒の層を重ねる */
.hero .overlay {
  position: absolute; /* 絶対配置 */
  top: 0; /* 上端 */
  left: 0; /* 左端 */
  right: 0; /* 右端 */
  bottom: 0; /* 下端 */
  background: rgba(0, 0, 0, 0.2); /* 黒色、透明度20%（0.2） */
  z-index: 2; /* 画像より前面に表示 */
}

/* ========================================
   ヒーローキャッチコピー：画像の上に表示されるメインメッセージ（モバイル基準）
======================================== */
.hero-content {
  position: absolute; /* 絶対配置 */
  top: 0; /* 上端 */
  left: 0; /* 左端 */
  right: 0; /* 右端 */
  bottom: 0; /* 下端 */
  display: flex; /* フレックスボックス */
  align-items: center; /* 垂直中央揃え */
  justify-content: center; /* 水平中央揃え */
  z-index: 10; /* オーバーレイより前面に表示 */
  padding: 20px; /* 内側余白（モバイル基準） */
}

.hero-text {
  text-align: center; /* テキスト中央揃え */
  color: white; /* 白文字 */
  max-width: 90%; /* 最大幅90%（モバイル基準） */
}

/* メインフレーズのスタイル（モバイル基準） */
.hero-main-phrase {
  font-size: 1.8rem; /* モバイル：フォントサイズ */
  font-weight: bold; /* 太字 */
  margin: 0 0 20px 0; /* 下余白20px */
  line-height: 1.3; /* 行間 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* 文字に影を追加（視認性向上） */
  font-family: "Noto Sans JP", sans-serif; /* 日本語フォント */
  letter-spacing: 0.05em; /* 文字間隔 */

  white-space: nowrap; /* 改行を防ぐ */
}

/* サブフレーズのスタイル（モバイル基準） */
.hero-sub-phrase {
  font-size: 0.9rem; /* モバイル：小さめのフォントサイズ */
  line-height: 1.6; /* 行間 */
  opacity: 0.95; /* 少し透明に */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* 文字に影を追加 */
  font-family: "Noto Sans JP", sans-serif; /* 日本語フォント */

  white-space: normal; /* 明示的に通常の改行を指定 */
}

.hero-sub-phrase p {
  margin: 0 0 8px 0; /* 下余白8px（モバイルで小さく） */
}

.hero-sub-phrase p:last-child {
  margin-bottom: 0; /* 最後の段落は下余白なし */
}

/* 更新日表示：右上に配置される小さなラベル（モバイル調整） */
.update-date {
  position: absolute; /* 絶対配置 */
  top: 8px; /* 上から8px（モバイルで小さく） */
  right: 10px; /* 右から10px（モバイルで小さく） */
  background-color: rgba(0, 0, 0, 0.4); /* 黒色、透明度40% */
  color: #fff; /* 白文字 */
  padding: 4px 8px; /* 内側余白（モバイルで小さく） */
  font-size: 0.7rem; /* 小さめのフォントサイズ */
  border-radius: 12px; /* 角丸（モバイルで小さく） */
  z-index: 1000; /* 最前面に表示 */
  opacity: 0.8; /* 全体の透明度80% */
}

/* ========================================
   事業内容セクション：メインサービスの紹介（モバイル基準）
======================================== */
section.MainCards {
  padding: 40px 20px; /* モバイル：上下40px、左右20pxの余白 */
  max-width: 1200px; /* 最大幅1200px */
  margin: 0 auto; /* 中央揃え */
  text-align: center; /* テキスト中央揃え */
}

/* セクションタイトル（h2）のスタイル（モバイル基準） */
section.MainCards h2 {
  font-family: "Poppins", sans-serif; /* 英字フォント */
  font-size: 1.8rem; /* モバイル：小さめのフォントサイズ */
  color: #2c6f38; /* 緑色（会社カラー） */
  margin-bottom: 30px; /* 下余白（モバイルで小さく） */
  text-align: center; /* 中央揃え */
  position: relative; /* 疑似要素の基準点 */
  display: inline-block; /* インラインブロック */
}

/* タイトル下の装飾線（疑似要素）（モバイル調整） */
section.MainCards h2::after {
  content: ""; /* 空のコンテンツ */
  position: absolute; /* 絶対配置 */
  bottom: -8px; /* タイトルの下8px（モバイルで小さく） */
  left: 50%; /* 左端を中央に */
  transform: translateX(-50%); /* 中央揃え調整 */
  width: 60px; /* 線の幅（モバイルで小さく） */
  height: 3px; /* 線の太さ（モバイルで小さく） */
  background: linear-gradient(45deg, #2c6f38, #4a9f5a); /* 緑のグラデーション */
  border-radius: 2px; /* 角丸 */
}

/* 事業内容カードのグリッドレイアウト（モバイル：1列） */
.works-cards {
  display: grid; /* グリッドレイアウト */
  grid-template-columns: 1fr; /* モバイル：1列のみ */
  gap: 20px; /* カード間の隙間（モバイルで小さく） */
  justify-content: center; /* 中央揃え */
}

/* 個別カードのスタイル（モバイル調整） */
.card {
  background: white; /* 白背景 */
  border-radius: 15px; /* 角丸（モバイルで小さく） */
  /* 影効果：緑色の薄い影 */
  box-shadow: 0 8px 20px rgba(44, 111, 56, 0.1);
  overflow: hidden; /* はみ出し部分を隠す */
  transition: all 0.4s ease; /* ホバー時のアニメーション */
  cursor: default; /* デフォルトカーソル */
  position: relative; /* 相対配置 */
}

/* カードホバー時の効果（モバイルでは控えめ） */
.card:hover {
  transform: translateY(-8px); /* 上に8px移動（モバイルで小さく） */
  /* 影を濃く、大きく */
  box-shadow: 0 15px 30px rgba(44, 111, 56, 0.15);
}

/* カード内の画像（モバイル調整） */
.card img {
  width: 100%; /* カード幅いっぱい */
  height: 180px; /* 固定高さ（モバイルで小さく） */
  object-fit: cover; /* 縦横比保持でトリミング */
  transition: transform 0.4s ease; /* ホバー時のアニメーション */
}

/* カード画像のホバー効果 */
.card:hover img {
  transform: scale(1.03); /* 1.03倍に拡大（モバイルで控えめ） */
}

/* カードのテキスト部分（モバイル調整） */
.card-content {
  padding: 20px 15px; /* 内側余白（モバイルで小さく） */
}

/* カードタイトル（h3）（モバイル調整） */
.card h3 {
  color: #2c6f38; /* 緑色 */
  font-family: "Poppins", sans-serif; /* 英字フォント */
  margin-bottom: 10px; /* 下余白（モバイルで小さく） */
  margin-top: 0; /* 上余白なし */
  font-size: 1.2rem; /* フォントサイズ（モバイルで小さく） */
  text-align: center; /* 中央揃え */
}

/* カードの説明文（モバイル調整） */
.card p {
  font-size: 0.9rem; /* 標準フォントサイズ（モバイルで小さく） */
  color: #666; /* グレー */
  text-align: center; /* 中央揃え */
  line-height: 1.6; /* 行間 */
}

/* ========================================
   強みセクション：会社の4つの強みを表示（モバイル基準）
======================================== */
.strength-grid {
  display: grid; /* グリッドレイアウト */
  grid-template-columns: 1fr; /* モバイル：1列のみ */
  gap: 20px; /* アイテム間の隙間（モバイルで小さく） */
  margin-top: 20px; /* 上余白（モバイルで小さく） */
}

/* 強みの個別アイテム（モバイル調整） */
.strength-item {
  background: white; /* 白背景 */
  padding: 25px 20px; /* 内側余白（モバイルで小さく） */
  border-radius: 12px; /* 角丸（モバイルで小さく） */
  text-align: center; /* 中央揃え */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* 薄い影（モバイルで控えめ） */
  transition: transform 0.3s ease; /* ホバー時のアニメーション */
}

/* 強みアイテムのホバー効果（モバイルで控えめ） */
.strength-item:hover {
  transform: translateY(-5px); /* 上に5px移動（モバイルで小さく） */
}

/* 強みのアイコン（絵文字）（モバイル調整） */
.strength-icon {
  font-size: 2.5rem; /* 大きなフォントサイズ（モバイルで小さく） */
  margin-bottom: 15px; /* 下余白（モバイルで小さく） */
}

/* 強みのタイトル（モバイル調整） */
.strength-item h3 {
  color: #2c6f38; /* 緑色 */
  font-size: 1.2rem; /* フォントサイズ（モバイルで小さく） */
  margin-bottom: 10px; /* 下余白（モバイルで小さく） */
}

/* 強みの説明文（モバイル調整） */
.strength-item p {
  color: #666; /* グレー */
  line-height: 1.6; /* 行間 */
  font-size: 0.9rem; /* フォントサイズ（モバイルで小さく） */
}

/* ========================================
   主要取引実績セクション：取引先との実績を紹介（モバイル基準）
======================================== */
.testimonials {
  padding: 40px 20px; /* モバイル：上下40px、左右20pxの余白 */
  background: white; /* 白背景 */
  margin: 20px 0; /* 上下20pxの外側余白（モバイルで小さく） */
}

/* 実績セクションのタイトル（モバイル調整） */
.testimonials h2 {
  font-size: 1.8rem; /* 大きなフォントサイズ（モバイルで小さく） */
  color: #2c6f38; /* 緑色 */
  text-align: center; /* 中央揃え */
  margin-bottom: 30px; /* 下余白（モバイルで小さく） */
  position: relative; /* 疑似要素の基準点 */
  display: inline-block; /* インラインブロック */
  width: 100%; /* 幅100% */
}

/* 実績タイトル下の装飾線（モバイル調整） */
.testimonials h2::after {
  content: ""; /* 空のコンテンツ */
  position: absolute; /* 絶対配置 */
  bottom: -8px; /* タイトルの下8px（モバイルで小さく） */
  left: 50%; /* 左端を中央に */
  transform: translateX(-50%); /* 中央揃え調整 */
  width: 60px; /* 線の幅（モバイルで小さく） */
  height: 3px; /* 線の太さ（モバイルで小さく） */
  background: linear-gradient(45deg, #2c6f38, #4a9f5a); /* 緑のグラデーション */
  border-radius: 2px; /* 角丸 */
}

/* 実績のグリッドレイアウト（モバイル：1列） */
.testimonial-grid {
  display: grid; /* グリッドレイアウト */
  grid-template-columns: 1fr; /* モバイル：1列のみ */
  gap: 20px; /* アイテム間の隙間（モバイルで小さく） */
  max-width: 1000px; /* 最大幅 */
  margin: 0 auto; /* 中央揃え */
}

/* 実績の個別アイテム（モバイル調整） */
.testimonial-item {
  background: #f8f9fa; /* 薄いグレー背景 */
  padding: 20px; /* 内側余白（モバイルで小さく） */
  border-radius: 12px; /* 角丸（モバイルで小さく） */
  border-left: 4px solid #2c6f38; /* 左側に緑の線（モバイルで小さく） */
  position: relative; /* 相対配置 */
}

/* 実績の内容文（モバイル調整） */
.testimonial-content p {
  font-style: italic; /* 斜体 */
  color: #555; /* 濃いグレー */
  line-height: 1.6; /* 行間 */
  margin-bottom: 15px; /* 下余白（モバイルで小さく） */
  font-size: 0.95rem; /* 少し大きめのフォント（モバイル調整） */
}

/* 実績の取引先名（モバイル調整） */
.testimonial-author strong {
  color: #2c6f38; /* 緑色 */
  font-size: 1rem; /* 少し大きめのフォント（モバイル調整） */
}

/* 実績の工事種別（モバイル調整） */
.testimonial-author span {
  display: block; /* ブロック表示（改行） */
  color: #888; /* 薄いグレー */
  font-size: 0.85rem; /* 小さめのフォント（モバイル調整） */
  margin-top: 4px; /* 上余白（モバイルで小さく） */
}

/* ========================================
   CTAセクション：お問い合わせと求人への誘導（モバイル基準）
======================================== */
.cta-section {
  /* 緑のグラデーション背景 */
  background: linear-gradient(135deg, #2c6f38, #4a9f5a);
  color: white; /* 白文字 */
  padding: 40px 20px; /* モバイル：上下40px、左右20pxの余白 */
  text-align: center; /* 中央揃え */
  margin: 20px 0 0 0; /* 上20pxの外側余白（モバイルで小さく） */
}

/* CTAのタイトル（モバイル調整） */
.cta-content h2 {
  font-size: 1.6rem; /* 大きなフォントサイズ（モバイルで小さく） */
  margin-bottom: 15px; /* 下余白（モバイルで小さく） */
  line-height: 1.4; /* 行間調整 */
}

/* CTAの説明文（モバイル調整） */
.cta-content p {
  font-size: 1rem; /* 少し大きめのフォント（モバイル調整） */
  margin-bottom: 25px; /* 下余白（モバイルで小さく） */
  opacity: 0.9; /* 少し透明に */
  line-height: 1.6; /* 行間 */
}

/* CTAボタンのコンテナ（モバイル：縦並び） */
.cta-buttons {
  display: flex; /* フレックスボックス */
  flex-direction: column; /* モバイル：縦方向に配置 */
  gap: 15px; /* ボタン間の隙間（モバイルで小さく） */
  align-items: center; /* 中央揃え */
}

/* ========================================
   コンテンツクリック→移動セクション：施工実績へのリンク（モバイル基準）
======================================== */
.center-box {
  text-align: center; /* 中央揃え */
  margin: 30px 0; /* 上下30pxの外側余白（モバイルで小さく） */
}

/* 施工実績リンクボタン（モバイル調整） */
.ClickMove {
  /* 青のグラデーション背景 */
  background: linear-gradient(45deg, #4a90e2, #5ba3f5);
  color: white; /* 白文字 */
  padding: 12px 25px; /* 内側余白（モバイルで小さく） */
  border: none; /* 枠線なし */
  border-radius: 25px; /* 丸いボタン（モバイルで小さく） */
  font-size: 1rem; /* フォントサイズ（モバイル調整） */
  cursor: pointer; /* ポインターカーソル */
  display: inline-block; /* インラインブロック */
  text-decoration: none; /* 下線なし */
  transition: all 0.3s ease; /* ホバー時のアニメーション */
  box-shadow: 0 3px 12px rgba(74, 144, 226, 0.3); /* 青い影（モバイルで小さく） */
  font-weight: bold; /* 太字 */
}

/* リンクボタンのホバー効果（モバイルで控えめ） */
.ClickMove:hover {
  transform: translateY(-3px); /* 上に3px移動（モバイルで小さく） */
  box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4); /* 影を濃く */
}

/* ========================================
   アニメーション定義：フェードイン効果
======================================== */
@keyframes fadeInUp {
  from {
    opacity: 0; /* 透明から */
    transform: translateY(20px); /* 下20pxから（モバイルで小さく） */
  }
  to {
    opacity: 1; /* 不透明に */
    transform: translateY(0); /* 元の位置に */
  }
}

@keyframes countUp {
  from {
    opacity: 0; /* 透明から */
    transform: translateY(15px); /* 下15pxから（モバイルで小さく） */
  }
  to {
    opacity: 1; /* 不透明に */
    transform: translateY(0); /* 元の位置に */
  }
}

/* フェードイン効果のクラス（JavaScriptで制御） */
.fade-in {
  opacity: 0; /* 初期状態：透明 */
  transform: translateY(20px); /* 初期状態：下20px（モバイルで小さく） */
  transition: all 0.8s ease; /* アニメーション設定 */
}

/* フェードイン実行時のクラス */
.fade-in.visible {
  opacity: 1; /* 不透明に */
  transform: translateY(0); /* 元の位置に */
}

/* ========================================
   レスポンシブデザイン：大きな画面向けの調整（モバイルファースト）
======================================== */

/* 大きめスマートフォン（480px以上） */
@media (min-width: 480px) {
  /* ヒーローセクションの高さを少し大きく */
  .hero {
    height: 45vh; /* 画面高さの45% */
  }

  /* 更新日表示を少し大きく */
  .update-date {
    top: 10px;
    right: 12px;
    padding: 5px 10px;
    font-size: 0.75rem;
    border-radius: 15px;
  }

  /* セクションの余白を少し大きく */
  section.MainCards {
    padding: 50px 30px;
  }

  /* タイトルを少し大きく */
  section.MainCards h2,
  .testimonials h2 {
    font-size: 2rem;
    margin-bottom: 40px;
  }

  /* 装飾線を少し大きく */
  section.MainCards h2::after,
  .testimonials h2::after {
    bottom: -10px;
    width: 70px;
    height: 4px;
  }

  /* カード間の隙間を大きく */
  .works-cards,
  .strength-grid,
  .testimonial-grid {
    gap: 25px;
  }

  /* CTAボタンを横並びに */
  .cta-buttons {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }

  /* キャッチコピーを少し大きく */
  .hero-main-phrase {
    font-size: 2.2rem;
    margin-bottom: 25px;
  }

  .hero-sub-phrase {
    font-size: 1rem;
  }

  .hero-sub-phrase p {
    margin-bottom: 10px;
  }
}

/* タブレット（768px以上） */
@media (min-width: 768px) {
  /* 基本フォントサイズを大きく */
  body {
    font-size: 16px;
  }

  /* ヒーローセクションをさらに大きく */
  .hero {
    height: 55vh; /* 画面高さの55% */
  }

  /* セクションの余白をさらに大きく */
  section.MainCards {
    padding: 60px 40px;
  }

  .testimonials {
    padding: 60px 40px;
    margin: 30px 0;
  }

  .cta-section {
    padding: 60px 40px;
    margin: 30px 0 0 0;
  }

  /* タイトルをさらに大きく */
  section.MainCards h2,
  .testimonials h2 {
    font-size: 2.4rem;
    margin-bottom: 50px;
  }

  /* 装飾線をさらに大きく */
  section.MainCards h2::after,
  .testimonials h2::after {
    width: 80px;
  }

  /* カードを2列表示に */
  .works-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  /* 強みを2列表示に */
  .strength-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 30px;
  }

  /* 実績を2列表示に（3つなので1つは下段中央） */
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  /* カード内の画像を大きく */
  .card img {
    height: 200px;
  }

  /* カードのテキスト部分を大きく */
  .card-content {
    padding: 25px 20px;
  }

  .card h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
  }

  .card p {
    font-size: 1rem;
  }

  /* 強みアイテムを大きく */
  .strength-item {
    padding: 30px 25px;
  }

  .strength-icon {
    font-size: 2.8rem;
    margin-bottom: 18px;
  }

  .strength-item h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
  }

  .strength-item p {
    font-size: 1rem;
  }

  /* 実績アイテムを大きく */
  .testimonial-item {
    padding: 25px;
    border-left: 5px solid #2c6f38;
  }

  .testimonial-content p {
    font-size: 1.05rem;
    margin-bottom: 18px;
  }

  .testimonial-author strong {
    font-size: 1.05rem;
  }

  .testimonial-author span {
    font-size: 0.9rem;
    margin-top: 5px;
  }

  /* CTAを大きく */
  .cta-content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
  }

  .cta-content p {
    font-size: 1.1rem;
    margin-bottom: 35px;
  }

  /* リンクボタンを大きく */
  .ClickMove {
    padding: 15px 30px;
    font-size: 1.1rem;
    border-radius: 30px;
  }

  .center-box {
    margin: 50px 0;
  }

  /* キャッチコピーをさらに大きく */
  .hero-content {
    padding: 40px;
  }

  .hero-text {
    max-width: 80%;
  }

  .hero-main-phrase {
    font-size: 2.8rem;
    margin-bottom: 30px;
  }

  .hero-sub-phrase {
    font-size: 1.1rem;
  }

  .hero-sub-phrase p {
    margin-bottom: 12px;
  }
}

/* デスクトップ（1024px以上） */
@media (min-width: 1024px) {
  /* ヒーローセクションを最大サイズに */
  .hero {
    height: 80vh; /* 画面高さの80% */
  }

  /* セクションの余白を最大に */
  section.MainCards {
    padding: 80px 50px;
  }

  .testimonials {
    padding: 80px 50px;
    margin: 40px 0;
  }

  .cta-section {
    padding: 80px 50px;
    margin: 40px 0 0 0;
  }

  /* タイトルを最大サイズに */
  section.MainCards h2,
  .testimonials h2 {
    font-size: 2.8rem;
    margin-bottom: 60px;
  }

  /* カードを自動調整（最大4列） */
  .works-cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
  }

  /* 強みを自動調整（最大4列） */
  .strength-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
  }

  /* 実績を3列表示に */
  .testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

  /* カード内の画像を最大サイズに */
  .card img {
    height: 200px;
  }

  /* カードのテキスト部分を最大サイズに */
  .card-content {
    padding: 30px 25px;
  }

  .card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
  }

  /* 強みアイテムを最大サイズに */
  .strength-item {
    padding: 40px 30px;
  }

  .strength-icon {
    font-size: 3rem;
    margin-bottom: 20px;
  }

  .strength-item h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
  }

  /* 実績アイテムを最大サイズに */
  .testimonial-item {
    padding: 30px;
  }

  .testimonial-content p {
    font-size: 1.1rem;
    margin-bottom: 20px;
  }

  .testimonial-author strong {
    font-size: 1.1rem;
  }

  .testimonial-author span {
    font-size: 0.9rem;
  }

  /* CTAを最大サイズに */
  .cta-content h2 {
    font-size: 2.5rem;
  }

  .cta-content p {
    font-size: 1.2rem;
    margin-bottom: 40px;
  }

  /* リンクボタンを最大サイズに */
  .ClickMove {
    padding: 15px 35px;
    border-radius: 50px;
  }

  .center-box {
    margin: 60px 0;
  }

  /* ホバー効果を強化（デスクトップのみ） */
  .card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(44, 111, 56, 0.2);
  }

  .card:hover img {
    transform: scale(1.05);
  }

  .strength-item:hover {
    transform: translateY(-10px);
  }

  .ClickMove:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(74, 144, 226, 0.4);
  }

  /* キャッチコピーを最大サイズに */
  .hero-content {
    padding: 60px;
  }

  .hero-text {
    max-width: 80%;
  }

  .hero-main-phrase {
    font-size: 4.0rem;   //元：3.5rem →新: 4.0rem
    margin-bottom: 40px;
    letter-spacing: 0.08em;
  }

  .hero-sub-phrase {
    font-size: 1.8rem;  //元:1.3rem →　新：1.8rem
  }

  .hero-sub-phrase p {
    margin-bottom: 15px;
  }
}