{% block stylesheet %}
<style>
.card-sec {
padding-top: 60px; /* ページタイトルの上の余白 */
padding-bottom: 100vh; /* カード下の余白*/
background-color: #EFEFEF; /* 背景色 */
}
.page-title {
position: relative;
color: #333333;
font-size: 20px;
text-align: center;
}
.page-title:before { /* page-titleの下線 */
display: inline-block;
position: absolute;
width: 100px;
height: 5px;
border-radius: 2px;
background-color: #3F51B5;
content: '';
bottom: -42px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.card-container {
display: grid; /* カードの横並び */
grid-template-columns: repeat(auto-fit, minmax(342px, 1fr)); /* gridの設定 */
gap: 20px 30px; /* カード同士の隙間 縦方向 横方向 */
margin: 109px auto 0;
}
.card-link-market {
text-decoration: none;
}
.card-item {
width: 100%;
max-width: 342px;
margin: 0 auto;
padding: 16px 16px 35px;
background-color: #ffffff;
border-radius: 6px;
text-align: center;
}
.card-img {
width: 100%;
font-size: 42px;
vertical-align: bottom; /* 画像の下の余白を埋める */
}
.card-title {
margin-top: 20px;
color: black;
font-size: 20px;
line-height: 1.2;
}
</style>
{% endblock %}
{% block main %}
<section class="card-sec">
<div class="card-inner inner">
<h2 class="page-title">店舗を選択してください</h2>
<div class="card-container">
{% for selectedMaker in maker %}
<!-- card-item -->
<a class="card-link-market" href="/makerSlider/{{selectedMaker.id}}">
<div class="card-item">
<div class='card-img'>{{emoji[selectedMaker.id]}}</div>
<h2 class="card-title">{{ selectedMaker.name }}</h2>
</div>
</a>
<!-- /card-item -->
{% endfor %}
</div>
</div>
</section>
{% endblock %}