body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-image: url('/static/upload/game.smktg.jp/seminar/4855/shared/img/AdobeStock_676651889_bg.jpg');
  background-position: 0 0;
  background-size: 220vw auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative; /* bodyに相対位置を追加 */
}

body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/static/upload/game.smktg.jp/seminar/4855/shared/img/img3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  opacity: 0;
  transition: opacity 1.6s ease-out, top 2s ease-out;
  z-index: 1;

  pointer-events: none;   /* ← 背景がクリックを邪魔しないようにしたい場合 */
}

/* bodyが読み込まれたときにアニメーションを適用 */
body.loaded::after {
	opacity: 1;
  top: 40px; /* 移動 */
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
	padding-top: 0px;
	background-color: rgba(255, 255, 255, 0);
	z-index: 99; /* 最前面に配置 */

}

.container1 {
  display: flex;
  flex-direction: column;
  align-items: center;
	padding-top: -2px;
	background-color: rgba(255, 255, 255, 1);
	z-index: 98; /* 最前面に配置 */

}

.section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 0.6s ease-out;
  margin-top: 0px;
  padding: 0px;
  width: 100%;
  text-align: center;
	justify-content: center; /* 画像を中央に揃える */
		z-index: 97; /* 最前面に配置 */

}

.section img, {
  margin: 200px;}


.section.show {
  opacity: 1;
  transform: translateY(0);
}

.pp{
		 color: #000; 

}

.p1 {
		line-height: 2.2; /* 行間を広げる */
		letter-spacing: 0.1em;

}

.p2 {
	font-size: bold; 	
	line-height: 2.5; /* 行間を広げる */
	font-weight: bold;

}

.p3 {
	line-height: 0; /* 行間を広げる */
	font-weight: bold;
	font-size: 20px;
}

.section2 {
  background-color: transparent; /* 背景を完全に透明に */
  width: 100%; /* セクションの幅を100%に */
  padding: 0; /* パディングをリセット */
  margin: 0; /* マージンをリセット */
  display: flex; /* フレックスボックスで整列 */
  justify-content: center; /* 画像を中央に配置 */
}

.section2 img {
  width: 100%; /* セクションの幅にぴったり合わせる */
  height: auto; /* アスペクト比を保つ */
  display: block; /* 余白をなくすためにブロック要素に */
  margin: 0; /* 画像の外側の余白をなくす */
  padding: 0; /* 画像の内側の余白をなくす */
}

.section3 {
  width: 80%; /* セクションの幅を100%に */
  padding: 0; /* パディングをリセット */
  margin: 0; /* マージンをリセット */
  display: flex; /* フレックスボックスで整列 */
  justify-content: center; /* 画像を中央に配置 */
}

.section3 img {
  width: 100%; /* セクションの幅にぴったり合わせる */
  height: auto; /* アスペクト比を保つ */
	display: block; /* 余白をなくすためにブロック要素に */
	margin-top: 20px; /* 画像の外側の余白をなくす */
  margin-bottom: -20px; /* 画像の外側の余白をなくす */
  padding: 0; /* 画像の内側の余白をなくす */
}