@charset "utf-8";

#mf1 div.mf-inner{
display: block;
}
#mf1 h2{
background:url("../img/top/line1.png") left center repeat-x;
line-height: 1em;
margin: 0 0 50px 0;
position: relative;
}
#mf1 h2:before{
content: "";
background:#fff url("../img/top/ic2.png") center center no-repeat;
max-width: 44px;
max-height: 46px;
width: 6.88vw;
height: 7.19vw;
position: absolute;
left: 0;
top: 50%;
transform: translate(0,-50%);
}
#mf1 h2 span{
display: table;
margin: 0 auto;
font-size: 1.38em;
background: #fff;
padding: 0 1em;
line-height: 1em;
position: relative;
}
#mf1 h2 span:before,
#mf1 h2 span:after{
content: "";
max-height: 20px;
width: 2px;
height: 10vw;
background: #00A3CE;
position: absolute;
top: 50%;
}
#mf1 h2 span:before{
transform:translate(0,-50%) rotate(-45deg);
left: 0;
}
#mf1 h2 span:after{
transform:translate(0,-50%) rotate(45deg);
right: 0;
}
#mf1 .clist{
justify-content: space-between;
}
#mf1 .cbox{
width: 300px;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
#mf1 .cbox.dum{
box-shadow: none;
}
#mf1 .cbox-inner{
margin: 10px;
font-weight: bold;
background: #FFF3DE;
}
#mf1 a{
text-decoration: none;
}
#mf1 a:hover{
opacity: 0.7;
}
#mf1 .cbox figure{
margin: 0;
}
#mf1 .cbox img{
width: 100%;
}
#mf1 .cbox a:hover img{
opacity: 1;
}
#mf1 .cbox dl{
padding: 5px;
}

#mf2 figure{
text-align: center;
}

@media screen and (max-width: 800px) {
#mf1 h2{
margin: 0 0 5vw 0;
}
#mf1 h2 span{
font-size: 1.2em;
}
#mf1 .clist{
justify-content: center;
}
#mf1 .cbox{
max-width: 600px;
width: 80vw;
margin: 0 0 5vw 0;
}
#mf1 .cbox-inner{
margin: 2vw;
}
#mf1 .cbox dl{
padding: 3vw;
}
}