@charset "utf-8";

.main{
	margin: 0 auto 80px;
	text-align:center;
}

.pan_waku{
	max-width:1000px;
	text-align:left;
	margin: 0 auto 80px;
	font-size:0.71rem;
	padding:20px 0;
}

h2{
	border:none;
	font-family: 'Maven Pro', sans-serif;
	font-size:0.71rem;
	background:#666;
	text-align:center;
	padding:5px 40px;
	margin:0 auto 40px;
	display:inline-block;
	color:#FFF;
	line-height:1;
	font-weight: normal;
}

h3.future_tit{
	border:none;
	font-family: 'Maven Pro', sans-serif;
	font-size:1.7rem;
	color:#666;
	font-weight: bold;
	margin:0 auto 20px;
	text-align:center;
}


:root{
	--gap:16px;
	--max-width:1150px;
}
*{box-sizing:border-box}
	
	.fut_bana{
		max-width:var(--max-width);
		margin:0 auto 150px;
	}
	
	.grid{
		display:grid;
		grid-template-columns: repeat(2, 1fr); /* スマホ: 2列 */
		gap:var(--gap);
		padding: 0 10px;
	}
	
	/* 幅が広い（PC向け）では3列にする */
	@media (min-width: 768px){
		.grid{
			grid-template-columns: repeat(3, 1fr); /* PC: 3列 */
		}
	}
	
	.card{
		border-radius:5px;
		overflow:hidden;
		display:block;
	}
	
	.card{
		background:white;
		border-radius:5px;
		overflow:hidden;
		display:block;
		transition: opacity .2s ease; /* ← ゆっくり透明になる */
	}
	
	
	.card img{
		width:100%;
		height:100%;
		object-fit:cover;
		aspect-ratio: 1 / 1;
		display:block;
		vertical-align:middle;
	}
	
	/* レスポンシブでタッチしやすくする */
	
	@media (hover: hover){
		.card:hover{ opacity:0.9; }
	}