@charset "utf-8";

.ttl h2{
font-size: 2.5em;
font-weight:bold;
padding: 40px;
margin: 0 0 20px 0;
text-align: center;
background: #ffe000;
position: relative;
line-height: 1em;
}
.ttl h2 span{
font-size: 1.5em;
position: absolute;
top: 50%;
left: 40px;
transform: translate(0,-50%);
}
.ttl p{
text-align: center;
margin: 0 50px 50px 50px;
}


/*---------------------------------*/

#mf1 .mf-inner{
padding: 0 0 100px 0;
}
#mf1 h2{
font-size: 1.88em;
font-weight: bold;
text-align: center;
margin: 0 0 30px 0;
line-height: 1.8em;
}
#mf1 h2 strong{
font-size: 1.27em;
line-height: 1em;
}
#mf1 h2 .orange{
color: #f49c00;
}

#mf2 .mf-inner{
padding: 0 0 100px 0;
}
#mf2 ul{
display: flex;
justify-content: space-around;
}
#mf2 ul li{
width: 180px;
font-size: 1.13em;
text-align: center;
}
#mf2 ul img{
width: 100%;
display: table;
margin: 0 auto 20px auto;
}

#mf3{
background: #f3f3f3
}
#mf3 .mf-inner{
padding: 130px 0;
}
#mf3 .ctext{
width: 570px;
margin: 0 0 0 300px;
position: relative;
}
#mf3 .ctext:after{
content: "";
background: url("../img/about/function/mf3i1.png") center center /cover no-repeat;
width: 240px;
height: 335px;
position: absolute;
left: 100%;
top: 50%;
transform: translate(0,-50%);
}
#mf3 h2{
display: table;
font-size: 1.88em;
font-weight: bold;
margin: 0 0 30px 0;
position: relative;
z-index: 9;
}
#mf3 h2:after{
content: "";
background: #fff;
position: absolute;
top: 0.5em;
bottom: -0.5em;
left: -0.2em;
right: -0.2em;
z-index: -1;
}
#mf3 p{
font-size: 1.13em;
}


#mf4 .mf-inner{
padding: 100px 0;
}
#mf4 .clist{
justify-content: space-between;
}
#mf4 .cboxs{
width: 350px;
border: #ccc solid 1px;
}
#mf4 .cboxs-inner{
padding: 60px;
}
#mf4 .cboxs figure{
margin: 0 0 30px 0;
text-align: center;
}
#mf4 .cboxs img{
width:  230px;
}
#mf4 .cboxs dl dt{
font-weight: bold;
text-align: center;
}

#mf5{
background: #f3f3f3
}
#mf5 .mf-inner{
padding: 120px 0;
position: relative;
}
#mf5 ul{
width: 780px;
display: flex;
background: #fff;
padding: 30px 50px;
margin: 0 auto;
position: relative;
}
#mf5 ul:after{
content: "";
max-width: 351px;
max-height: 292px;
width: 46.8vw;
height: 38.93vw;
background: url("../img/about/function/mf5i1.png") center center /cover no-repeat;
position: absolute;
right: 0;
top: 40%;
transform: translate(0,-50%);
}
#mf5 ul li{
font-size: 1.25em;
padding: 10px 20px;
line-height: 1em;
border-radius: 10px;
margin: 0 10px;
background: #ffe000;
}

#mf6 .mf-inner{
padding: 100px 0;
}
#mf6 p.t-right{
text-align: right;
}

#mf6 .fbox{
display: flex;
flex-wrap: wrap;
justify-content: center;
}

#mf6 .fbox p{
display: flex;
flex-wrap: wrap;
text-align: center;
width: 30%;
margin: 0;
}

#mf6 .fbox p a{
width: 100%;
}

#mf6 .fbox p a:nth-of-type(2){
width: auto;
margin: auto;
padding: 10px 25px;
margin-top: 20px;
border: solid 2px #f49c00;
border-radius: 10px;
text-decoration: none;
color: #f49c00;
font-size: 14px;
}










@media screen and (max-width: 1024px) {
.ttl h2{
font-size: 1.5em;
padding: 5vw;
margin: 0 0 3vw 0;
}
.ttl h2 span{
font-size: 1.5em;
left: 2vw;
}
.ttl p{
margin: 0 5vw 5vw 5vw;
}


/*---------------------------------*/

#mf1 .mf-inner{
padding: 0 5vw 10vw 5vw;
}
#mf1 h2{
font-size: 1.3em;
margin: 0 0 5vw 0;
}


#mf2 .mf-inner{
padding: 0 0 10vw 0;
}
#mf2 ul{
padding: 5vw;
justify-content:space-between;
flex-wrap: wrap;
}
#mf2 ul li{
width: 45%;
margin: 0 0 5vw  0;
}
#mf2 ul img{
margin: 0 auto 2vw auto;
}

#mf3 .mf-inner{
padding: 10vw 0;
position: relative;
}
#mf3 .ctext{
width: auto;
margin: 0 auto;
padding: 0 5vw;
position: static;
}
#mf3 .ctext:after{
max-width: 127px;
max-height: 177px;
width: 16.93vw;
height: 23.6vw;

left: auto;
top: auto;
transform: translate(0,0);
bottom: 80%;
right: 5vw;
}
#mf3 h2{
font-size: 1.5em;
margin: 0 0 5vw 0;
}
#mf3 p{
font-size: 1em;
}


#mf4 .mf-inner{
padding: 10vw 0;
}
#mf4 .clist{
justify-content: center;
margin: 0 5vw;
}
#mf4 .cboxs{
width: 80vw;
margin: 0 0 5vw 0 ;
}
#mf4 .cboxs-inner{
padding: 5vw;
}
#mf4 .cboxs figure{
margin: 0 0 3vw 0;
text-align: center;
}
#mf4 .cboxs img{
max-width: 347px;
width:  46.27vw;
}

#mf5 .mf-inner{
padding: 15vw 5vw;
}
#mf5 ul{
display: block;
width: 80vw;
padding: 5vw;
}
#mf5 ul:after{
max-width: 320px;
max-height: 266px;
width: 42.67vw;
height: 35.47vw;
right: -5vw;
top: 10%;
}
#mf5 ul li{
display: table;
padding: 2vw 5vw;
margin: 0 0 2vw 0;
}
#mf5 ul li:nth-of-type(2){
margin-left:20vw;
}
#mf5 ul li:nth-of-type(3){
margin-left:40vw;
}

#mf6 .mf-inner{
padding: 10vw 0;
}


}