@charset "utf-8";

h2 {
text-align: center;
position: relative;
margin: 2em auto;
font-size: 1.2em;
}
h2:before {
content: "";
display: block;
width: 2em;
height: 2em;
background: url("../img/about/ic2.png") center / contain no-repeat;
position: absolute;
top: -2em;
left: 50%;
transform: translate(-50%, -50%);
}
h2 span {
display: block;
margin: 1em auto;
color: #8D8D8D;
width: fit-conetnt;
width: -moz-fit-conetnt;
padding: 0 1em;
}
h2 span:before {
content: "";
display: block;
width: 6em;
height: 2px;
margin: .5em auto;
background: #2EA761;
}

#main .mf .mf-inner {
width: 1000px;
margin: 0 auto;
}

#mf1 .mf-inner {
margin: 5vw auto;
}
#mf1 .cbox {
display: flex;
}
#mf1 .cbox {
display: flex;
justify-content: center;
}
#mf1 figure {
width: 45%;
margin-right: 5%;
text-align: right;
}
#mf1 figcaption {
color: #707070;
font-size: .9em;
text-align: right
}
#mf1 figcaption span {
margin: 0 1em 0 3em;
}
#mf1 .cboxs {
width: 50%;
}
#mf1 .cboxs h3 {
color: #2EA761;
font-weight: bold;
font-size: 1.4em;
margin: 0 0 1em;
}
#mf1 .cboxs p {
margin-bottom: 1em;
}

#mf2 .cbox {
display: flex;
justify-content: center;
border: 1px solid #ccc;
border-radius: 15px;
margin: 3vw auto 5vw;
}
#mf2 .cboxs {
width: 40%;
margin: 2vw 5% 3vw;
}
#mf2 h3 {
font-size: 1.4em;
line-height: 3;
border-bottom: 2px solid #2EA761;
}
#mf2 .cboxs li {
line-height: 2.5;
}

#mf3 {
background: #F2F0EC;
padding: 5vw 0;
}
#mf3 .mf-inner {
background: #fff;
border-radius: 15px;
padding: 5em 0 3em;
}

#mf3 dt {
float: left;
width: 15%;
line-height: 3;
padding: 0 0 0 3em;
margin-left: 15%;
}
#mf3 dd {
line-height: 3;
border-bottom: 2px solid #2EA761;
margin: 0 15% 0 17%;
padding-left: 12em;
}
#mf3 .cbox {
display: flex;
}
#mf3 h3 {
line-height: 3;
color: #2EA761;
text-align: center;
}
#mf3 .cbox {
margin: 3vw auto 2vw;
justify-content: center;
}
#mf3 .cbox .cboxs {
display: flex;
flex-direction: column;
align-content: center;
margin-right: 5%;
}
#mf3 .cbox .cboxs iframe,#mf3 .cbox .cboxs img{
margin:10px auto 20px
}

#mf3 .cboxs:last-child {
margin-right: 0;
}
#mf3 .cbox iframe {
width: 337px;
height: 264px;
}
#mf3 .cbox dt, 
#mf3 .cbox dd {
width: auto;
line-height: 1.6;
padding: 0;
margin: 0;
font-size: .9em;
}
#mf3 .cbox dt {
padding-left: 1em;
position: relative;
float: none;
}
#mf3 .cbox dt:last-of-type {
margin-top: .8em;
}
#mf3 .cbox dt:before,
#mf3 .cbox dt:after {
content: "";
display: block;
width: 3px;
height: 1em;
background: #2EA761;
position: absolute;
left: 0;
top: .4em;
}
#mf3 .cbox dt:after {
left: 6px;
}
#mf3 .cbox dd {
border-bottom: none;
padding-left: 2em;
}
#mf3 .cboxs p {
font-size: .9em;
}

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

.pc {
display: none;
}
.sp {
display: block;
}

#main .mf .mf-inner {
width: auto;
}

#mf1 .cbox {
display: block;
}
#mf1 figure,
#mf1 .cboxs {
width: 100%;
margin: 3vw auto;
}
#mf1 figure {
text-align: center;
}

#mf1 figcaption {
margin-right: 10%;
}
#mf1 .sp {
display: block;
}

#mf2 .cbox {
display: block;
}
#mf2 .cboxs {
width: auto;
}
#mf3 dl {
margin: 0 5vw;
}
#mf3 dt,
#mf3 dd {
display: block;
width: auto;
margin: 0;
float: none;
line-height: 2;
padding: 0 1em;
}
#mf3 dd {
margin-bottom: .8em;
}

#mf3 .cbox {
display: block;
}
#mf3 .cbox .cboxs {
width: 80vw;
display: flex;
justify-content: center;
align-content: center;
margin: 10vw auto 0;
text-align: center;
}
#mf3 h3 {
font-size: 1.2em;
line-height: 1.2;
}
#mf3 .cbox .cboxs iframe,
#mf3 .cbox .cboxs img{
margin: 5vw auto;
}
#mf3 .cbox iframe {
width: 100%;
height: 40vw;
}
#mf3 .cbox .cboxs dl {
margin: 0;
}
#mf3 .cbox .cboxs dt,
#mf3 .cbox .cboxs dd,
#mf3 .cbox .cboxs p {
text-align: left;
}

}

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

h2:before {
width: 1.2em;
height: 1.2em;
top: -1em;
}
h2 span {
margin: 0;
line-height: 1;
}
#mf1 figure img {
width: 100%;
}
#mf1 figcaption {
line-height: 1.4;
margin-top: .5em;
margin-right: 0;
}
#mf1 figcaption span {
margin: 0;
}
#mf3 .mf-inner {
padding: 3em 0;
}
#mf3 .cbox iframe {
height: 60vw;
}

}