@charset "utf-8";

.container{
width: 95%;
margin: 0 0 0 auto;
position: relative;
}
.container h1{
display: flex;
flex-direction: column;
justify-content: center;
min-height: 370px;
color: #78ad66;
text-align: left;
font-size: 2.5em;
font-weight: bold;
position: absolute;
top: 50%;
left: 50px;
transform: translate(0,-50%);
}
.container h1:before{
content: "";
background: url("../images/example-voice/bg3.png") center center /cover no-repeat;
max-width: 370px;
max-height: 370px;
width: 50vw;
height: 50vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: -1;
}
.container h1 span{
display: block;
font-size: 2.5em;
color: #fff;
text-shadow: 0 1px 0 #78ad66,0 -1px 0 #78ad66,1px 0 0 #78ad66,-1px 0 0 #78ad66;
}

.container figure{
display: table;
margin: 0 0 0 auto;
}

#mf1{
margin: 0 0 100px 0;
}
#mf1 .mf-inner{
padding: 0 100px 0 50px;
}

#mf1 .clist{
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}

#mf1 .clist a{
max-width: 600px;
width: 48%;
margin: 0 0 50px 0;
}
#mf1 dl{
display:flex;
justify-content: space-between;
align-items: center;
}
#mf1 dl dt{
width: 250px;
}
#mf1 dl dt img{
border-radius: 20px;
overflow: hidden;
width: 100%;
}
#mf1 dl dd{
width: 50%;
text-align: left;
}
#mf1 dl dd span{
background: #78ad66;
color: #fff;
border-radius: 100px;
padding: 0 5px;
line-height: 1em;
}
#mf1 dl dd strong{
display: table;
color: #78ad66;
font-size: 1.13em;
}



#pager{
color: #fff;
}
#pager .nav-links{
display: flex;
justify-content: center;
}
#pager .nav-links > *{
margin: 0 0.5em;
}
#pager span{
display: flex;
justify-content: center;
align-items: center;
width: 3em;
height: 3em;
background: #78ad66;
border-radius: 100%;
}
#pager a{
display: flex;
justify-content: center;
align-items: center;
width: 3em;
height: 3em;
color: #78ad66;
border: #78ad66 solid 1px;
border-radius: 100%;
}
#pager .prev,
#pager .next{
width: auto;
height: auto;
border: none;
}


#mf2 .mf-inner{
padding: 0 100px 0 50px;
}
#mf2 .ttl{
text-align: left;
margin: 0 0 30px 0;
}
#mf2 .ttl h1{
color: #78ad66;
font-size: 2.13em;
font-weight: bold;
margin: 0.3em 0;
}
#mf2 .ttl p{
color: #78ad66;
line-height: 1em;
}
#mf2 .ttl p span{
margin: 0 0 0 0.5em;
color: #fff;
background: #78ad66;
padding: 0 5px;
border-radius: 100px;
}

#mf2 .ttl figure{
border-radius: 30px;
overflow: hidden;
}
#mf2 .ttl figure img{
width: 100%;
}

#mf2 .cday{
text-align: left;
}
#mf2 .cday dl{
display: flex;
align-items: center;
color: #78ad66;
text-align: left;
margin: 0 0 20px 0;
line-height: 1em;
}
#mf2 .cday dl dt{
width: 5em;
margin: 0 1em 0 0;
font-size: 1.88em;
font-weight: bold;
border: #78ad66 solid;
border-width: 0 1px 0 0;
}
#mf2 .cday dl dt span{
font-size: 0.6em;
margin: 0 0 0 0.3em;
font-weight: normal;
}


#mf3{
margin: 300px 0;
background: rgb(237,246,250);
background: linear-gradient(90deg, rgba(237,246,250,1) 0%, rgba(248,251,232,1) 100%);
position: relative;
}
#mf3:before,
#mf3:after{
content: "";
max-height: 230px;
width: 100vw;
height: 30.67vw;
position: absolute;
left: 0;
}

#mf3:before{
background: url("../images/example-voice/bg1.jpg") top center /cover no-repeat;
bottom: 100%;
}
#mf3:after{
background: url("../images/example-voice/bg2.jpg") bottom center /cover no-repeat;
top: 100%;
}

#mf3 .mf-frame{
width: 800px;
margin: 0 auto;
}

#mf3 h2{
font-size: 1.63em;
font-weight: bold;
text-align: left;
margin: 0 0 1em 0;
}
#mf3 h3{
font-size: 1.5em;
font-weight: bold;
color: #7AC27A;
border-bottom: #7AC27A dashed 1px;
padding: 0 0 0.5em 0;
margin: 0 0 1em 0;
text-align: left;
}
#mf3 h4{
font-size: 1.25em;
font-weight: bold;
color: #fff;
background: #7AC27A;
padding: 0.3em;
margin: 0 0 1em 0;
text-align: left;
}
#mf3 p{
line-height: 1.8em;
margin: 0 0 1em 0;
}

#mf3 p.btn{
max-width: 400px;
width: 80vw;
margin: 30px auto;
}
#mf3 p.btn a{
display: block;
font-size: 1.13em;
text-align: center;
color: #78ad66;
border: #78ad66 solid 1px;
border-radius: 100px;
font-weight: bold;
padding: 20px;
line-height: 1em;
margin: 0 auto;
}
#mf3 p.btn.entry a{
color: #fff;
background: #ff9f28;
border: none;
}


#mf4{
margin: 0 0 100px 0;
}
#mf4 .mf-inner{
padding: 0 100px 0 50px;
}
#mf4 .clist{
justify-content: center;
align-items: center;
}
#mf4 dl{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 400px;
min-height: 360px;
background: url("../images/example-voice/bg3.png") center center /cover no-repeat;
}
#mf4 dl dt{
color: #fff;
text-shadow: 0 1px 0 #ff9f28,0 -1px 0 #ff9f28,1px 0 0 #ff9f28,-1px 0 0 #ff9f28;
font-size: 6em;
font-weight: bold;
margin: 0 0 0.3em 0;
line-height: 1em;
}
#mf4 dl dd{
text-align: left;
}
#mf4 dl dd strong{
display:block;
font-size: 2.5em;
}
#mf4 .cbox{
margin: 0 0 0 30px;
}
#mf4 ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 10px 0;
}
#mf4 ul li{
width: 31%;
}
#mf4 li a{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
background: #ff9f28;
border-radius: 20px;
padding: 30px 10px;
line-height: 2em;
}
#mf4 li a img{
max-width: 50px;
width: 6.67vw;
}



@media screen and (max-width: 767px) {
.container h1{
background-size: auto 100%;
font-size: 1.5em;
left: 5vw;
}
.container h1 span{
font-size: 3em;
}
.container figure img{
width: 95vw;
}


#mf1{
margin: 0 0 20vw 0;
}
#mf1 .mf-inner{
padding: 0 5vw;
}
#mf1 .clist a{
max-width: 750px;
width: 100%;
margin: 0 0 5vw 0;
}
#mf1 dl{
font-size: 0.9em;
align-items:flex-start;
}
#mf1 dl dt{
width: 40%;
}
#mf1 dl dt img{
width: 100%;
}
#mf1 dl dd{
width: 55%;
text-align: left;
}
#mf1 dl dd span{
padding: 1vw 2vw;
margin: 0 0 2vw 0;
}
#mf1 dl dd strong{
font-size: 1em;
}


#mf2 .mf-inner{
padding: 0 5vw;
}
#mf2 .ttl{
margin: 0 0 5vw 0;
}
#mf2 .ttl h1{
font-size: 1.5em;
}
#mf2 .ttl p{
margin: 0 0 5vw 0;
line-height: 1.5em;
}



#mf2 .cday dl{
justify-content: space-between;
align-items: flex-start;
margin: 0 0 3vw 0;
}
#mf2 .cday dl dt{
width: 35%;
margin: 0;
}
#mf2 .cday dl dd{
width: 60%;
line-height: 1.5em;
}


#mf3{
margin: 40vw 0;
}
#mf3 .mf-frame{
width: auto;
}
#mf3 .mf-inner{
padding: 0 5vw;
}
#mf3:before,
#mf3:after{
max-width: 1330px;
}


#mf3 p.btn{
margin: 5vw auto;
}
#mf3 p.btn a{
padding: 2vw;
}

#mf4{
margin: 0 0 20vw 0;
}
#mf4 .mf-inner{
padding: 0 5vw;
}

#mf4 dl{
width: auto;
background: url("../images/example-voice/bg3.png") center center /auto 100% no-repeat;
}
#mf4 dl dt{
font-size: 5em;
text-align: left;
}
#mf4 dl dd strong{
font-size: 1.5em;
}
#mf4 .cbox{
margin: 0;
}
#mf4 ul{
flex-wrap: wrap;
margin: 0 0 5vw 0;
}
#mf4 ul li{
width: 48%;
margin: 0 0 2vw 0;
}
#mf4 ul li:last-of-type{
width: 100%;
}
#mf4 li a{
text-align: left;
flex-direction:row;
padding: 5vw 1vw;
line-height: 1.3em;
}
#mf4 li a img{
margin: 0 1vw 0 0;
}

}

@media screen and (max-width: 640px) {
#mf1 ul{
justify-content: center;
}
#mf1 li{
width: 100%;
}

}