@charset 'UTF-8';

/*===========================================
violet
===========================================*/

.tag_violet {
background-color: #d5ade1;
}

/*===========================================
other
===========================================*/

.tag_other {
background-color: #d9b56c;
}

/*===========================================
info_tag
===========================================*/
.info_tag	 {
display: flex;
justify-content: space-between;
align-items: center;
}

/*===========================================
csrBtn
===========================================*/
.csrBtn{
margin-top: 6%;
}
.csrBtn .ttl > *{
font-size: 2rem;
text-align: center;
font-weight: bold;
}
.csrBtn .list{
margin-top: 3%;
text-align: center;
}
.csrBtn .list img{
height: 54px;
margin-bottom: 1.5em;
}
.csrBtn .list li{
flex-basis: calc((100% - 40px) / 4);
margin-right: 10px;
}
.csrBtn .list li > span {
padding: 1em;
}
.csrBtn .list li > *{
flex: 1;
display: flex;
justify-content: center;
position: relative;
border: 1px solid #ccc;
padding: 1em 2em 1em 1em;
font-size: 1.2rem;
text-decoration: none;
background: #fff;
overflow: hidden;
}
.csrBtn .list li:nth-of-type(4n){
margin-right: 0;
}
.csrBtn .list li:nth-of-type(n + 5){
margin-top: 10px;
}
.csrBtn .list li > *:after{
transform: rotate(45deg);
top: 0;
bottom: 0;
right: 12px;
left: auto;
border-color: #E30934;
}
.csrBtn .list li > span{
border-color: #E30934;
color: #fff;
background: #E30934;
}

@media screen and (max-width:767px){
.csrBtn{
margin-top: 15%;
}
.csrBtn .list li{
flex-basis: calc((100% - 10px) / 2);
margin-right: 5px;
}
.csrBtn .list li:nth-of-type(2n){
margin-right: 0;
}
.csrBtn .list li:nth-of-type(n + 3){
margin-top: 5px;
}
.csrBtn .list li > *{
padding: 1em 2em 1em 1em;
font-size: 1rem;
}
}