イベントバナー

パーツ設置費用

1,000円

費用メモ

※支給されるイベントバナーの場合
バナー制作が必要な場合　1点5,000円

CSS

.event__banner .sp__banner {
	display: none;
}
.event__banner .pc__banner {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 0 -10px;
}
.event__banner .pc__banner figure {
	margin: 0 10px;
	width: -webkit-calc(100% / 2 - 20px);
	width: calc(100% / 2 - 20px);
	max-width: 468px;
}
@media screen and (max-width: 800px) {
	.event__banner .pc__banner {
		display: none;
	}
	.event__banner .sp__banner {
		display: block;
	}
	.event__banner .sp__banner figure {
		text-align: center;
		width: 100%;
	}
	.event__banner .sp__banner figure + figure {
		margin-top: 3vw;
	}
}
@media screen and (max-width: 540px) {
	.event__banner .sp__banner figure + figure {
		margin-top: 4vw;
	}
}

HTML

<section class="event__banner">
	<div class="flexBox pc__banner">
		<figure>
			<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/04/event-banner_pc.jpg"></a>
		</figure>
		<figure>
			<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/04/event-banner_pc.jpg"></a>
		</figure>
	</div>
	<div class="flexBox sp__banner">
		<figure>
			<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/04/event-banner_sp.jpg"></a>
		</figure>
		<figure>
			<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/04/event-banner_sp.jpg"></a>
		</figure>
	</div>
</section>