@charset "utf-8";

#mf1 p{
margin: 0 0 50px 0;
}
#mf1 ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#mf1 ul li{
width: calc(100% / 4 - 1em);
margin: 0 0 10px 0;
}
#mf1 ul a{
display: block;
color: #fff;
font-weight: bold;
padding: 20px;
text-align: center;
border-radius: 10px;
position: relative;
}
#mf1 ul a:after{
content: "";
display: block;
max-width: 10px;
max-height: 10px;
width: 1.33vw;
height: 1.33vw;
border:#fff  solid;
border-width: 0 1px 1px 0;
position: absolute;
right: 20px;
top: 50%;
transform: translate(0,-50%) rotate(-45deg);
}


#mf2 .cbox{
margin: 0 0 80px 0;
}
#mf2 h2{
color: #fff;
font-size: 1.25em;
font-weight: bold;
padding: 10px;
border-radius: 10px;
margin: 0 0 20px 0;
}
#mf2 ul{
display: flex;
flex-wrap: wrap;
}
#mf2 ul li{
width: calc(100% / 5 - 0.7em);
margin: 0 5px 10px 5px;
}
#mf2 ul li img{
width: 100%;
}


#mf2 dl{
width: calc(100% / 5 - 1em);
	font-size:0.8em;
margin: 0 5px 10px 5px;
	padding: 10px;
	text-align:center;
	
border: #FF8787 solid 2px;
background: #fff;
background: linear-gradient(0deg, rgba(255,218,218,1) 0%, rgba(255,255,255,1) 30%);
}
#mf2 dl dt{
	margin: 0 0 5px 0;
}
#mf2 dl dd{
line-height: 1.3em;
	text-align:right;
}
#mf2 dl dd span{
	font-weight:bold;
	color:#fff;
	margin:0 5px 0 0;
	padding:0 5px;
	
	background:#d74a4a;
}

#mf2 dl.kou{
border: #FF8787 solid 2px;
background: #fff;
background: linear-gradient(0deg, rgba(255,218,218,1) 0%, rgba(255,255,255,1) 50%);
}



#mf2 p{
display: table;
margin: 0 auto;
}
#mf2 p a{
display: block;
color: #fff;
font-size: 1.25em;
padding: 10px 50px;
font-weight: bold;
text-align: center;
border-radius: 100px;
}






@media screen and (max-width: 850px) {

#mf1{
margin: 0 5vw;
}
#mf1 p{
margin: 0 0 5vw 0;
}
#mf1 ul li{
width: calc(100% / 2 - 0.5em);
margin: 0 0 3vw 0;
}
#mf1 ul a{
font-size: 0.8em;
padding: 2vw;
}
#mf1 ul a:after{
right: 1vw;
}

/*---------------------------*/

#mf2{
margin: 0 5vw;
}

#mf2 .cbox{
margin: 0 0 10vw 0;
}
#mf2 h2{
font-size: 1em;
padding: 2vw;
margin: 0 0 3vw 0;
}
#mf2 ul li{
width: calc(100% / 3 - 0.4em);
margin: 0.5vw;
}



#mf2 dl{
width: calc(100% / 3 - 0.7em);
	font-size:0.6em;
margin: 0.5vw;
	padding: 1.5vw;
}
#mf2 dl dt{
	margin: 0 0 1.5vw 0;
}


#mf2 p{
width: 80%;
}
#mf2 p a{
font-size: 1em;
padding: 2vw;
}


}

@media screen and (max-width: 640px) {
#mf2 ul li{
width: calc(100% / 2 - 0.4em);
}

#mf2 dl{
width: calc(100% / 2 - 0.7em);
}





}