.works_ogata {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	
	/* display: flex; */
	background-color: #6dcfb7;
}

.works{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	
	/* display: flex; */
	background-color: #6dcfb7;
}


.ogata2{
	height: 20px;
}

.touge_kai2{
	height: 40px;
}

.moe_thisa2{
	height: 40px;
}

.syota_syunsuke_koki2{
	height: 40px;
}

.yuuta2{
	height: 40px;
}

.yoshida_sosui2{
	height: 40px;
}

.info-flex{
	display: flex;
}


.cards-list {
	width: 930px;
	max-width: 90%;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, 430px);
	column-gap: 5px;
	row-gap: 0px;
	justify-content: center;
  }



.info {
	width: 45%;
	display: inline-block;
	margin: 0 4%;
}

.title{
	font-size: 46px;
	font-style: oblique;
	color: #3388dd;
}

.info-title {
	width: 100%;
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	/* margin: 0 4%; */
}

.info-name {
	font-size: 28px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	color: black;
}
.owner{
	font-size: 30px;
	font-style: oblique;
	color: #215890;
}

.info > h2 {
	font-size: 40px;
	color: black;
}


.info-title > h2 {
	font-size: 40px;
	color: black;
}

.info-title > h2 span{
	font-size: inherit;
}



.info-name > h3{

	font-size: 28px;
	margin: 0 4%;

	color: black;
}

.info-title > h3{
	font-size: 28px;
	margin: 5% 1%;
	color: black;
}

.info > h3{
	font-size: 28px;
	margin: 5% 1%;
	color: black;
}

.info > p {
	padding-left: 1em;
	font-size: 20px;
	margin: 5% 1%;
}

/* .info > pre{
	font-size: 28px;
	margin: 5% 1%;
	color: black;
} */

.movie {
	display: inline-block;
	width: 38%;
	margin: auto auto;
}

.movie > video{
	width: 100%;
}


@media (max-width: 800px) {
	.works_ogata{
		width: 100%; 
		margin-bottom: 20px; 
		margin-top: 100px;
	} 
	.works {
	  width: 100%; 
	  margin-bottom: 20px; 
	}
  
	.info-flex {
	  flex-direction: column; 
	}
  
	.cards-list {
	  width: 100%; 
	  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
	  column-gap: 10px; 
	  row-gap: 20px; 
	}
  
	.info, .movie {
	  width: 100%; 
	  margin: 0 0 20px; 
	}
  
	.info > p, .info > h2, .info > h3 {
	  margin: 10px 0; 
	}
  
	.movie > video {
	  width: 100%; 
	}
  
	.title, .info-name, .owner, .info > h2, .info > h3 {
	  font-size: 24px; 
	}
	.header, .footer {
	  padding: 20px 10px; /* ヘッダーとフッターのパディングを調整 */
	}
  
	.header-logo img {
	  width: 100px; /* ロゴのサイズを小さくする */
	}
  
	.feature-text h2, .info-title h2 {
	  font-size: 24px; /* タイトルのフォントサイズを小さくする */
	}
  
	.info, .movie {
	  width: 100%; /* 情報と動画ブロックの幅を100%にする */
	  margin-bottom: 20px; /* 下のマージンを追加 */
	}
  
	.cards-list {
	  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* グリッドレイアウトの列数を動的に調整 */
	}
  
	.info > p, .info > h3, .info-name > h3, .owner {
	  font-size: 16px; /* テキストのフォントサイズを小さくする */
	}
  
	.movie > video {
	  height: auto; /* ビデオの高さを自動調整 */
	}
  
	/* h2とspanのフォントサイズを統一 */
	h2, h2 span {
	  font-size: 20px; /* フォントサイズを20pxに統一 */
	}
	
  }
  

/* @media (max-width: 800px) {
	.works_ogata{
		width: 100%; 
		margin-bottom: 20px; 
		margin-top: 100px;
	} 
	.works {
	  width: 100%; 
	  margin-bottom: 20px; 
	}
  
	.info-flex {
	  flex-direction: column; 
	}
  
	.cards-list {
	  width: 100%; 
	  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
	  column-gap: 10px; 
	  row-gap: 20px; 
	}
  
	.info, .movie {
	  width: 100%; 
	  margin: 0 0 20px; 
	}
  
	.info > p, .info > h2, .info > h3 {
	  margin: 10px 0; 
	}
  
	.movie > video {
	  width: 100%; 
	}
  
	.title, .info-name, .owner, .info > h2, .info > h3 {
	  font-size: 24px; 
	}
  } */