@charset "utf-8";

/* グリッドコンテナ */
.grid-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	/* 画像の間の余白を指定します */
	margin: 0 200px;
}

/* グリッドアイテム */
.grid-item {
	background-color: #ffffff;
	padding: 5px;
	text-align: center;
}

/* グリッド表示順 */
.item1 {
	order: 1;
}

.item2 {
	order: 2;
}

.item3 {
	order: 3;
}

.item4 {
	order: 4;
}

/* イメージコンテナ　中央揃え */
.image-container {
	display: flex;
	justify-content: center;
}

/* イメージコンテナ　画像 */
.image-container img {
	max-width: 90%;
	height: auto;
}

/* 右寄せ　イメージコンテナ */
.right-align .image-container {
	justify-content: flex-end;
}

/* 左寄せ　イメージコンテナ */
.left-align .image-container {
	justify-content: flex-start;
}

/* 全教科ランダムクイズ-縮小表示 */
.img-shrink01 {
	width: 40%;
	height: auto;
}

/* ヤマガミ共育社ロゴ-縮小表示 */
.img-shrink02 {
	width: 25%;
	height: auto;
}

/* てらＱロゴ-縮小表示 */
.img-shrink03 {
	/* width: 70%; */
	/* width: 65%; */
	width: 55%;
	height: auto;
	margin-bottom: 10px;
}

/* てらＱって何？-縮小表示 */
.img-shrink04 {
	width: 100%;
	height: auto;
}

/* さあ！-縮小表示 */
.img-shrink05 {
	width: 60%;
	height: auto;
}

/* どの学年～-縮小表示 */
.img-shrink06 {
	width: 40%;
	height: auto;
}

/* 学年ボタン */
.img-btn {
  border: none; /* 枠線を非表示にする */
  background: none;
  padding: 0;
  outline: none; /* ボタンがアクティブになったときのアウトラインを非表示にする */
}

.img-btn img {
  /* デフォルトのスタイル */
  /* width: 240px; */
  width: 235px;
  height: auto;
  /* margin: 10px; */
  margin: 5px 10px;	
  transition: transform 0.2s, box-shadow 0.2s;
}

.img-btn:active img {
  /* 押された時のスタイル */
  transform: scale(0.9); /* 少し縮小させる */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* 影を追加 */	
}





/* ------------------------------------------------ */
/* スマホサイズ以下の設定 */
/* ------------------------------------------------ */
@media screen and (max-width: 768px) {
	/* グリッドコンテナ */
	.grid-container {
		margin: 0;
		/* グリッドコンテナのマージンを変更 */
		grid-template-columns: 1fr;
		/* カラムを1つにする */
	}

	/* グリッドアイテム */
	.grid-item {
		order: initial;
	}

	/* イメージコンテナ　画像 */
	.image-container img {
		max-width: 100%;
		/* 画像の幅を親要素に合わせる */
		height: auto;
		/* 高さを自動調整して比率を維持する */
		margin: 20px 0;
	}

	/* 全教科ランダムクイズ-縮小表示 */
	.img-shrink01 {
		width: 100%;
		/* 縮小表示の幅を調整 */
		height: auto;
		/* 高さを自動調整して比率を維持する */
	}

	/* ヤマガミ共育社ロゴ-縮小表示 */
	.img-shrink02 {
		width: 40%;
		/* 縮小表示の幅を調整 */
		height: auto;
		/* 高さを自動調整して比率を維持する */
	}

	/* てらＱロゴ-縮小表示 */
	.img-shrink03 {
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}

	/* てらＱって何？-縮小表示 */
	.img-shrink04 {
		width: 100%;
		height: auto;
	}

	/* さあ！-縮小表示 */
	.img-shrink05 {
		width: 100%;
		height: auto;
	}

	/* どの学年～-縮小表示 */
	.img-shrink06 {
		width: 70%;
		height: auto;
	}

	/* 学年ボタン */
	.img-btn img {
		width: 600px;
		height: auto;
		margin-bottom: 20px;
	}
}