body {
            font-family: 'Arial', sans-serif;
            font-weight: 400;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        header {
            text-align: left;
            padding: 192px 48px 192px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
        }

        .catchphrase {
            font-size: 1.2em;
            font-style: italic;
            margin-top: 5px;
        }

        h1{    
           color: #ffffff;
           font-size: 72px;
           font-weight: 600;
           font-weight: bold;    
           margin: 0px 0px 24px 0px;
          justify-content: flex-start;
    font-family: 'Arial', sans-serif;
            }

        p3{ 
           font-size: 28px;
           font-weight: bold;    
        }

main {
  padding: 20px;
  margin: auto; /* 変更：左右のマージンをautoに追加 */
  background: #f4f4f4;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center; /* 追加：main要素内のインライン要素を中央寄せ */
}

main section {
  text-align: center; /* 追加：section要素内のインライン要素を中央寄せ */
  margin-bottom: 40px; /* 追加：各セクションの下に余白を追加 */
}

main h2 {
  text-align: center; /* 変更：念のため中央寄せを記述 */
  color: #005792;
}

main p4 {
  text-align: center; /* 変更：念のため中央寄せを記述 */
  padding: 10px; /* 追加：少し内側の余白を追加 */
  margin: 0 auto 20px; /* 変更：左右のマージンをautoに追加、下に余白 */
  max-width: 80%; /* 追加：幅を制限して中央にまとめる */
}

.videocontainer {
  text-align: center; /* 追加：iframe要素を中央寄せ */
  margin: 20px 0; /* 変更：上下のマージンを調整 */
  position: relative; /* 相対配置の基準 */
  text-align: center; /* placeholderを中央に */

}

.activities-image {
  width: 80%; /* 追加：画像の幅を調整 */
  max-width: 600px;
  display: block; /* 追加：ブロック要素にする */
  margin: 20px auto; /* 変更：上下の余白と左右の中央寄せ */
  border-radius: 8px;
}

.sns-links {
  text-align: center; /* 変更：中央寄せを記述 */
  margin-top: 20px; /* 追加：上に余白を追加 */
}

.sns-links a {
  display: inline-block; /* 追加：横並びにする */
  margin: 0 10px; /* 追加：左右のマージンを追加 */
}

.sns-icon {
  width: 40px;
  height: auto; /* 追加：高さを自動調整 */
}