/* mvvセクションのスタイル */
.mvv {
  background-color: #f9fafb; /* セクションの背景色 */
  padding: 4rem 1rem; /* 上下の余白を大きく設定 */
}

.mvv h2 {
  font-size: 1.75rem; /* タイトルのフォントサイズ */
  font-weight: 700; /* 太字 */
  text-align: center; /* タイトル中央揃え */
  margin-bottom: 2rem; /* タイトルの下に余白 */
}

.mvv-item {
  background-color: #fff; /* 各項目の背景色 */
  padding: 2rem; /* 各項目の内側の余白 */
  border-radius: 8px; /* 角を丸くする */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 薄い影をつけて浮き上がらせる */
  transition: transform 0.3s ease; /* ホバー時に変形 */
}

.mvv-item:hover {
  transform: translateY(-5px); /* ホバー時に少し上に動かす */
}

.mvv-item h3 {
  font-size: 1.25rem; /* 小見出しのフォントサイズ */
  font-weight: 600; /* 見出しはやや太字 */
  margin-bottom: 1rem; /* 見出しとテキストの間に余白 */
  text-align: center; /* 小見出しの中央揃え */
}

.mvv-item p {
  font-size: 1rem; /* テキストのフォントサイズ */
  color: #4a4a4a; /* テキストカラー */
  text-align: center; /* テキストの中央揃え */
  line-height: 1.6; /* 行間を広めに */
}

/* レスポンシブ対応 */
@media (min-width: 768px) {
  .mvv .container {
    max-width: 80%; /* デスクトップ表示での幅を80%に設定 */
  }
}

@media (min-width: 1024px) {
  .mvv {
    padding: 6rem 2rem; /* 大きいスクリーンではセクションの余白を広めに */
  }

  .mvv h2 {
    font-size: 2.25rem; /* タイトルフォントを少し大きく */
  }

  .mvv-item {
    padding: 3rem; /* デスクトップ用の内側の余白 */
  }
}