{% block stylesheet %}
<style>
.top-service__box {
background-color: #ECF6FF;
text-align: center;
width: 100%;
padding: 5% 180px 0;
}
.top-service__services {
list-style: none;
padding: 0;
display: inline-block;
}
.top-service__service {
float: left;
margin: 0.73%;
background: #FFFFFF;
text-align: center;
border-radius: 8px;
position: relative;
}
.top-service__service:nth-child(1),
.top-service__service:nth-child(5),
.top-service__service:nth-child(9),
.top-service__service:nth-child(13) {
margin-left: unset;
}
.top-service__service:nth-child(4),
.top-service__service:nth-child(8),
.top-service__service:nth-child(12),
.top-service__service:nth-child(16) {
margin-right: unset;
}
.top-service__service-a {
padding: 18px 0;
vertical-align: middle;
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
font-size: 17px;
line-height: 23.8px;
text-align: center;
color: #333333;
}
.link-nav__block {
display: block;
width: 100%;
}
.top-service-title {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
font-size: 24px;
line-height: 36px;
text-align: center;
color: #333333;
}
.fa-custom {
position: absolute;
right: 15%;
display: inline-block;
vertical-align: middle;
top: 36%;
color: #333333;
}
.pc-line {
border-top: 3px solid #2379E7;
position: relative;
top: 15px;
width: 40px;
left: 0;
right: 0;
margin: auto;
border-radius: 8px;
}
@media (min-width: 768px) {
.top-service__services {
margin-top: 60px;
margin-right: auto;
margin-bottom: 40px;
margin-left: auto;
}
.top-service__service {
width: 23.9%;
height: 60px;
}
}
@media (max-width: 768px) {
.top-service__box {
font-weight: 600;
text-align: center;
line-height: 1.4em;
padding: 10% 20px;
}
.top-service__services {
list-style: none;
padding: 0;
}
.top-service__service {
width: 48%;
float: left;
margin: 1%;
}
.top-service__service:nth-child(1),
.top-service__service:nth-child(5),
.top-service__service:nth-child(9),
.top-service__service:nth-child(13) {
margin-left: 1%;
}
.top-service__service:nth-child(4),
.top-service__service:nth-child(8),
.top-service__service:nth-child(12),
.top-service__service:nth-child(16) {
margin-right: 1%;
}
.fa-custom {
right: 10%;
}
.pc-line {
border-top: 3px solid #2379E7;
position: relative;
top: 0;
width: 40px;
left: 0;
right: 0;
margin: 15px auto 20px;
border-radius: 8px;
}
.top-service-title {
font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
font-weight: 600;
font-size: 22px;
line-height: 28px;
text-align: center;
color: #333333;
}
}
</style>
{% endblock %}
{% set TagList = repository('Eccube\\Entity\\Tag').getList() %}
{% block main %}
{% if TagList is not empty %}
<div class="top-service__box">
<h2 class="top-service-title mt-0">対応サービス</h2>
<div class="pc-line"></div>
<ul class="top-service__services">
{% for Tag in TagList %}
<li class="top-service__service">
<a class="link-nav link-nav__block top-service__service-a"
href="{{ url('product_list') }}?tag_id={{ Tag.id }}">{{ Tag.name }}</a>
<i class="fa fa-chevron-right fa-lg fa-custom" aria-hidden="true"></i>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endblock %}