header{
  background-color: black;
  height: 100px;
  padding-top:15px
}

.image-container{
  position: relative;
}

.line1{
  padding-top: 20px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}


.overlap{
  padding-top:0%;
  padding-left:10%;
  position: absolute;
  top: 0;
  left: 0;
  /* 重ねる画像の位置やサイズを調整 */
  width: 15%; /* 重ねる画像の幅を設定 */
  z-index: 1; /* 重ねる画像が背景画像の上に表示されるように */
}

header::after {
  content: ''; /* 疑似要素の内容を空にする */
  display: block;
  border-bottom: 2px solid white; /* 線のスタイル */
  margin-top: 20px; /* 線とヘッダーの間隔を調整 */
}

body{
  margin:0px;
  height:1000px;
  background-color: rgba(0,0,0);
}

.body_container{
  margin-top:50px;
  position:relative;
  background-image: url('web/curve.png');
  background-size: 100% auto; /* 画像を幅100%に合わせ、アスペクト比を保持 */
  background-position: top center;
  background-repeat: no-repeat;
  height: 2500px;
  width: 100%;
}

.image-container2 {
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: flex-end; /* 画像を下揃えにする */
  height: 450px;
  overflow: hidden;
}

.image {
  width: 25%; /* 画像の幅を調整 */
  transition: transform 0.5s;
}

.center-image {
  width: 40%; /* 中央の画像を拡大表示 */
  height:auto;
  z-index: 1; /* 中央の画像を前面に表示 */
}

.align-bottom {
  align-self: flex-end; /* 画像を下揃えにする */
}

/* 初期状態: 透明で非表示 */
.fade-in {
  opacity: 0;
  transition: opacity 10s; /* フェードインの速さを調整 */
  animation: fadeIn 10s forwards; /* アニメーションの設定 */
}

/* アニメーションのキーフレームを定義 */
@keyframes fadeIn {
  0% {
    opacity: 0; /* 開始時は透明 */
  }
  100% {
    opacity: 1; /* 終了時は完全に表示 */
  }
}


.information{  
  position: relative;
  width: 70%;

  height: 300px;
  margin: 0 auto; /* 水平方向の中央配置に必要 */
  margin-top: 200px;
  padding-top: 0px;
  text-align: left;
}

.information h1{
  color: white;
  padding-top: 0px;
  font-size:x-large;
  padding-left:10%;
}

.information-box{
  padding-top:0px;
  display: flex;
  flex-wrap: wrap;
  position:absolute;
  padding-left: 13%;
  width: 100%;
}

.information-img {
  padding-top:4px;
  width: 40%;
  height: auto;
}

.information-img img{
  width: 100%;
  height: auto;
  
}


.information-caption {
  width:100%;
}

.information-caption h3{
  margin-top: 50px;
  color: white;
  /* padding-left: 40px; */
  padding-left: 0px;
  margin-left: 0px;
}

.information-caption p{
  margin-top: 0px;
  color: white;
  /* padding-left: 40px; */
  padding-left: 0px;
  margin-left: 0px;
}

.information-caption a{
  margin-top: 0px;
  color: yellow;
}

.information-caption h4{
  color:white;
}

.everyone h4{
  color: white;
}

@media (max-width: 600px) {
  header{
    padding:0px;
    height:50px;
  }

  .overlap{
    padding-top:0%;
    padding-left:10%;
    position: absolute;
    top: 5px;
    left: 0;
    /* 重ねる画像の位置やサイズを調整 */
    width: 20%; /* 重ねる画像の幅を設定 */
    z-index: 1; /* 重ねる画像が背景画像の上に表示されるように */
  }

  header::after {
    content: ''; /* 疑似要素の内容を空にする */
    display: block;
    border-bottom: 1px solid white; /* 線のスタイル */
    margin-top: 10px; /* 線とヘッダーの間隔を調整 */
  }

  .body_container{
    margin-top:10px;
    background-position: top center;
    height: 1000px;
    width: 100%;
  }

  .image-container2 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
  }

  .top{
    margin-top:30px;
  }

  .image {
    padding:5%;
    width: 60%; /* 画像の幅を調整 */
    transition: transform 0.5s;
  }

  .information {
    position: relative;
    width: 70%;
    height: 300px;
    margin: 0 auto; /* 水平方向の中央配置に必要 */
    margin-top: 0px;
    padding-top: 0px;
    text-align: left;
  }
  
  .information h1 {
    color: white;
    padding-top: 0px;
    font-size: small;
    padding-left: 10%;
    margin-bottom: 0px;
  }

  .information-box{
    padding-top:10px;
    display: flex;
    flex-wrap: wrap;
    position:absolute;
    padding-left: 13%;
    width: 100%;
  }
  
  .information-img {
    padding-top:4px;
    width: 80%;
    height: auto;
    text-align: center;
  }
  
  .information-img img{
    width: 100%;
    height: auto;
    text-align: center;
    
  }
  
  
  .information-caption {
    width: 80%;
  }
  
  .information-caption h3{
    margin-top: 20px;
    color: white;
    padding-left: 0px;
    font-size: 10px;
  }
  
  .information-caption p{
    margin-top: 0px;
    color: white;
    padding-left: 0px;
    font-size: 8px;
  }
  
  .information-caption a{
    margin-top: 0px;
    color: yellow;
  }

  .information-caption h4{
    color:white;
    font-size: 10px;
  }

  
}