@charset "UTF-8";
/* CSS Document */

/* ========================================
   ギフト関連バナー
======================================== */

#gift_banner_area {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	width: 100%;
	max-width: 1200px;
	margin: 60px auto 100px;
	padding: 0 15px;
	box-sizing: border-box;
}

#gift_banner_area *,
#gift_banner_area *::before,
#gift_banner_area *::after {
	box-sizing: border-box;
}

#gift_banner_area .gift_banner {
	display: block;
	width: 100%;
	overflow: hidden;
}

#gift_banner_area .gift_banner img {
	display: block;
	width: 100%;
	height: auto;
	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
}

#gift_banner_area .gift_banner:hover img {
	transform: scale(1.02);
	opacity: 0.9;
}


/* ========================================
   375px以上
======================================== */

@media screen and (min-width: 375px) {

	#gift_banner_area {
		padding-right: 20px;
		padding-left: 20px;
	}

}


/* ========================================
   600px以上：2列
======================================== */

@media screen and (min-width: 600px) {

	#gift_banner_area {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

}


/* ========================================
   768px以上
======================================== */

@media screen and (min-width: 768px) {

	#gift_banner_area {
		gap: 25px;
		padding-right: 30px;
		padding-left: 30px;
	}

}


/* ========================================
   960px以上
======================================== */

@media screen and (min-width: 960px) {

	#gift_banner_area {
		gap: 30px;
	}

}