@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 .clist{
justify-content: space-between;
}
#mf2 .clist > p{
width: calc(100% / 5 - 0.5em);
}
#mf2 .vbox{
width: calc(100% / 5 - 0.5em);
margin: 0 0 10px 0;
padding: 10px;

border: #FF8787 solid 2px;
background: #fff;
background: linear-gradient(0deg, rgba(255,218,218,1) 0%, rgba(255,255,255,1) 30%);
}
#mf2 dl{
cursor: pointer;
height: 100%;
font-size:0.8em;
display: flex;
justify-content: center;
flex-direction: column;
}
#mf2 dl dt{
	margin: 0 0 10px 0;
	line-height: 2em;
  background-image:
  linear-gradient(90deg, rgba(255, 246, 230, 0) 0%, rgba(255, 246, 230, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
}
#mf2 dl dd{
line-height: 1.3em;
text-align:right;
}

#mf2 .vpop{
display: none;
overflow: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 99999;
background: rgba(0,0,0,0.3);
}
#mf2 .op .vpop{
display: block;
}
body.vop{
overflow: hidden;
height: 100%;
}
#mf2 .vpop-inner{
width: 70vw;
background: #fff;
border: #55B4DC solid 2px;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 2em
}


#mf2 .vpop .name{
margin: 0 0 1em 0;
display: flex;
justify-content: space-between;
}
#mf2 .vpop .name strong{
font-size: 1.5em;
}
#mf2 .ctext{
	line-height: 2em;
  background-image:
  linear-gradient(90deg, rgba(255, 246, 230, 0) 0%, rgba(255, 246, 230, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #999 100%);
  background-size: 8px 100%,100% 2em;
}
#mf2 .ctext p{
margin: 0 0 2em 0;
}
#mf2 .vpop span{
display: block;
text-align: center;
background: #fff;
font-weight: bold;
padding: 1em;
line-height: 1em;
border-radius: 10px;
cursor: pointer;
position: absolute;
top: calc(100% + 1em);
left: 50%;
transform: translate(-50%,0);
}

#mf2 .cbox + p{
display: table;
margin: 0 auto;
}
#mf2 .cbox + 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 .clist > p{
display: none;
}
#mf2 .vbox{
width: calc(100% / 2 - 0.5em);
margin: 0 0 2vw 0;
padding: 1.5vw;
}
#mf2 dl dt{
	margin: 0 0 1.5vw 0;
}

#mf2 .vpop{
font-size: 1em;
}
#mf2 .vpop-inner{
width: 90vw;
top: 2vw;
transform: translate(-50%,0);
}


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


}

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





}