@charset "utf-8";

#mf1{
margin: 150px 0;
}
#mf1 .st{
display: table;
margin: 0 0 50px 0;
padding: 0 0 20px 0;
font-size: 3em;
background: url("../images/l1.png") center bottom /contain no-repeat;
}

#mf1 .clist{
display: flex;
align-items: center;
border: #1DB687 solid 1px;
border-width: 1px 0 0 0;
padding: 30px 0;
}
#mf1 .clist:last-of-type{
border-width: 1px 0;
}

#mf1 .clist h2{
width: 10em;
color: #1DB687;
font-size: 1.5em;
font-weight: bold;
}

#mf2{
margin: 0 0 100px 0;
}
#mf2 .mf-frame{
max-width: calc(1400px + (50vw - 650px));
width:100vw;
position: relative;
margin: 0 0 0 auto;
}
#mf2 .mf-frame:before{
content: "";
background: linear-gradient( 90deg, rgba(208, 247, 235, 1) 0%, rgba(255, 233, 195, 1) 100% );
z-index: -1;
position: absolute;
right: 0;
height: 100%;
left: 0;
}
#mf2 .mf-inner{
padding: 100px 50px;
padding-right: 0;
}
#mf2 .st{
display: inline-block;
margin: 0 0 50px 0;
padding: 0 0 20px 0;
font-size: 3em;
background: url("../images/l2.png") center bottom /contain no-repeat;
}
#mf2 .st span{
display: table;
font-size: 0.6em;
}
#mf2 dl{
margin: 0 0 20px 0;
}
#mf2 dl dt{
display: table;
padding: 5px;
margin: 0 0 10px 0;
background: #000;
color: #fff;
}
#mf2 .gmap{
height: 500px;
position: absolute;
right: 0;
left: 45vw;
top: 50%;
transform: translate(0,-50%);
}
#mf2 .gmap iframe{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}


@media (max-width: 768px) {
#mf1{
margin: 15vw 0;
}
#mf1 .st{
margin: 0 0 5vw 0;
padding: 0 0 2vw 0;
font-size: 1.6em;
}

#mf1 .clist{
display: block;
padding: 3vw 0;
}
#mf1 .clist h2{
width: auto;
font-size: 1em;
}

#mf2{
margin: 0 0 15vw 0;
}
#mf2 .mf-frame{
}
#mf2 .mf-inner{
padding: 10vw 5vw;
}
#mf2 .st{
margin: 0 0 5vw 0;
padding: 0 0 2vw 0;
font-size: 1.6em;
}
#mf2 .st span{
font-size: 0.7em;
}
#mf2 dl{
margin: 0 0 3vw 0;
}
#mf2 dl dt{
padding: 5px;
margin: 0 0 10px 0;
}
#mf2 .gmap{
width: 100%;
height: 100vw;
position: static;
transform: translate(0,0);
}


}