@charset "utf-8";

.sp{display: none;}
section{
line-height: 2em;
letter-spacing: 0.01em;
margin: 0 0 100px 0;
}
section h2{
text-align: center;
font-size: 2.2em;
font-weight: bold;
margin: 0 0 2em 0 ;
}
section h2 span{
display: table;
margin: 0 auto 1em auto;
line-height: 1em;
font-size: 0.5em;
letter-spacing: 0.3em;
}
section figure{
line-height: 1em;
}

#mf1{
text-align: center;
}
#mf1 h3{
text-align: center;
font-size: 1.5em;
font-weight: bold;
margin: 2em 0 1em 0;
}
#mf1 ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#mf1 li{
width: 50%;
position: relative;
color: #fff;
}
#mf1 li img{
width: 100%;
object-fit: cover;
}
#mf1 ul span{
font-size: 1.3em;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translate(0,-50%);
}

#mf2 .cbox{
position: relative;
}
#mf2 .cbox > figure{
overflow: hidden;
}
#mf2 .cbox > figure img{
width: 100%;
object-fit: cover;
}
#mf2 .cbox .ctext{
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,0.8);
}
#mf2 .cbox:nth-of-type(2n) .ctext{
flex-direction: row-reverse;
}
#mf2 .ctext figure{
width: 20%;
}
#mf2 .ctext figure img{
width: 100%;
}
#mf2 .ctext dl{
width: 75%;
padding: 0 4em;
}
#mf2 .ctext dt{
font-size: 1.8em;
font-weight: bold;
}

#mf3{
margin: 0;
}
#mf3 .cbox{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#mf3 .cbox > figure{
margin: 0 2em 0 0;
text-align: center;
position: relative;
padding: 0 0 30px 0;
}
#mf3 .cbox > figure img{
width: 100%;
max-width: 500px;
}
#mf3 .cbox:not(:last-of-type) figure:before{
content: "";
width: 1px;
background: #333;
position: absolute;
bottom: 0;
top: 0;
left: 50%;
z-index: -1;
}
#mf3 .cbox dl{
width: 450px;
}
#mf3 .cbox dl dt{
font-size: 1.5em;
font-weight: bold;
margin: 0 0 0.5em 0;
}
#mf3 .cbox dl dt img{
display: table;
margin: 0 0 2em 0;
}


@media screen and (max-width: 782px) {
.pc{display: none;}
.sp{display: inline-block;}

section{
margin: 0 0 10vw 0;
}
section h2{
font-size: 1.8em;
line-height: 1.5em;
margin: 0 0 1.5em 0 ;
}
section h2 span{
font-size: 0.5em;
}


#mf1 h3{
font-size: 1.2em;
}
#mf1 li{
width: 100%;
}
#mf1 ul span{
font-size: 1.3em;
}

#mf2 .cbox > figure img{
width: 100%;
height: 80vw;
max-height: 520px;
}
#mf2 .ctext figure{
width: 20%;
position: absolute;
bottom: 100%;
}
#mf2 .ctext dl{
width: auto;
padding: 0.5em;
}
#mf2 .ctext dt{
font-size: 1.2em;
}
#mf2 .ctext dd{
font-size: 0.8em;
line-height: 1.8em;
}

#mf3 .cbox{
display: table;
max-width: 500px;
margin: 0 auto;
padding: 0 0 5vw 0;
position: relative;
}
#mf3 .cbox figure{
margin: 0 0 1em 0;
position: static;
padding: 0;
}
#mf3 .cbox:not(:last-of-type) figure:before{
left: 0.5em;
}
#mf3 .cbox dl{
width: auto;
padding: 1.5em 0 2em 2em;
}
#mf3 .cbox dl dt{
font-size: 1.3em;
font-weight: bold;
margin: 0 0 0.5em 0;
}
#mf3 .cbox dl dt img{
max-width: 160px;
width: 30%;
margin: 0 0 1em 0;
}
#mf3 .cbox dl dd{
font-size: 30
}

}