@charset "utf-8";

#mf1 p{
margin: 0 0 50px 0;
}

#mf1 .mf-inner{
padding: 0 0 100px 0;
}
#mf1 .cbox{
border: #ccc solid 1px;
}
#mf1 .cbox .clist{
justify-content: space-between;
}
#mf1 .cboxs{
width: calc(100% / 4);
position: relative;
}
#mf1 .cboxs:before,
#mf1 .cboxs:after{
content: "";
width: 1px;
height: 51%;
background: #ccc;
position: absolute;
right: 20px;
}
#mf1 .cboxs:before{
top: 0;
transform: rotate(-10deg);
transform-origin: top;
}
#mf1 .cboxs:after{
bottom: 0;
transform: rotate(10deg);
transform-origin: bottom;
}
#mf1 .cboxs:last-of-type:before,
#mf1 .cboxs:last-of-type:after{
display: none;
}
#mf1 .cboxs-inner{
padding: 50px 40px;
}
#mf1 .cboxs figure{
text-align: center;
margin: 0 0 40px 0;
}
#mf1 .cboxs dl dt{
font-size: 1.12em;
font-weight: bold;
text-align: center;
margin: 0 0 20px 0;
}

#mf2{
background: #f3f3f3;
}
#mf2 .mf-inner{
padding: 80px 0;
}
#mf2 h2{
font-size: 1.88em;
font-weight: bold;
text-align: center;
margin: 0 0 40px 0;
position: relative;
}
#mf2 h2:before{
content: "";
display: table;
max-width: 100px;
max-height: 4px;
width: 13.33vw;
height: 0.63vw;
background: #ffe109;
margin: 0 auto 20px auto;
}
#mf2 .clist{
justify-content: space-between;
}
#mf2 .cbox{
width: 580px;
background: #fff;
}
#mf2 .cbox-inner{
padding: 50px 20px;
}



#mf3 .mf-inner{
padding: 80px 0;
}
#mf3 h2{
font-size: 1.88em;
font-weight: bold;
text-align: center;
margin: 0 0 40px 0;
position: relative;
}
#mf3 h2:before{
content: "";
display: table;
max-width: 100px;
max-height: 4px;
width: 13.33vw;
height: 0.63vw;
background: #ffe109;
margin: 0 auto 20px auto;
}
#mf3 h3{
display: table;
padding: 20px 50px;
margin: 0 auto 20px auto;
font-size: 1.63em;
font-weight: bold;
border: #ffe000 solid 3px;
}
#mf3 .clist{
justify-content: space-between;
}
#mf3 .cboxs{
width: 590px;
margin: 0 0 50px 0;
border: #ccc solid 1px;
}
#mf3 .ttl{
background: #ffe000;
text-align: center;
padding: 30px;
font-weight: bold;
position: relative;
}
#mf3 .ttl:before{
content: "";
max-width: 84px;
max-height: 33px;
width: 11.2vw;
height: 4.4vw;
background: url("../img/option/customer/mf3ic1.png") center center /cover no-repeat;
position: absolute;
top: 10px;
left: 10px;
}
#mf3 .ttl:after{
content: "";
max-width: 169px;
max-height: 128px;
width: 22.53vw;
height: 17.07vw;
background: url("../img/option/customer/mf3i1.png") center center /cover no-repeat;
position: absolute;
top: 50%;
right: 10px;
transform: translate(0,-50%);
}
#mf3 .ttl dl{
position: relative;
z-index: 9;
}
#mf3 .ttl dt{
font-size: 1.63em;
font-weight: bold;
margin: 0 0 20px 0;
}
#mf3 .ttl dd{
display: table;
margin: 0 auto;
font-size: 1.63em;
font-weight: bold;
position: relative;
}
#mf3 .ttl dd strong{
font-size: 1.92em;
}
#mf3 .ttl dd > span{
position: relative;
}
#mf3 .ttl dd .tax{
font-size: 0.54em;
font-weight: normal;
line-height: 1em;
position: absolute;
top: -0.8em;
right: 0;
}
#mf3 .ttl dd span span{
font-size: 0.54em;
font-weight: normal;
position: absolute;
top: -0.8em;
right: 0;
}
#mf3 .cboxs .ttl p{
font-size: 0.88em;
margin: 10px 0;
position: relative;
z-index: 9;
}
#mf3 .cboxs .ttl p strong{
font-size: 1.71em;
}
#mf3 .cboxs .ttl p.t-right{
margin: 0;
position: absolute;
right: 10px;
bottom: 10px;
z-index: 9;
}

#mf3 .cboxs .ttl + p{
padding: 60px;
}

#mf3 #cbox32 h3{
border-color: #ffbb03;
}
#mf3 #cbox32 .ttl{
background: #ffbb03;
}

#mf3 .cboxs:nth-of-type(2) .ttl:before{
background-image: url("../img/option/customer/mf3ic2.png");
}
#mf3 .cboxs:nth-of-type(3) .ttl:before{
background-image: url("../img/option/customer/mf3ic3.png");
}


#mf3 #cbox31 .cboxs:nth-of-type(2)  .ttl:after{
max-width: 113px;
max-height: 130px;
width: 15.07vw;
height: 17.33vw;
background: url("../img/option/customer/mf3i2.png") center center /cover no-repeat;
}
#mf3 #cbox32 .cboxs:nth-of-type(1){
width: 100%;
}
#mf3 #cbox32 .cboxs:nth-of-type(1)  .ttl:after{
max-width: 280px;
max-height: 130px;
width: 37.33vw;
height: 17.33vw;
background: url("../img/option/customer/mf3i3.png") center center /cover no-repeat;
}
#mf3 #cbox32 .cboxs:nth-of-type(2)  .ttl{
display: flex;
justify-content: center;
align-items: center;
height: 8.7em;
}
#mf3 #cbox32 .cboxs:nth-of-type(2)  .ttl:after{
max-width: 156px;
max-height: 150px;
width: 20.80vw;
height: 20vw;
background: url("../img/option/customer/mf3i4.png") center center /cover no-repeat;
}
#mf3 #cbox32 .cboxs:nth-of-type(3)  .ttl:after{
max-width: 118px;
max-height: 150px;
width: 15.73vw;
height: 20vw;
background: url("../img/option/customer/mf3i5.png") center center /cover no-repeat;
}






@media screen and (max-width: 1024px) {
#mf1 .mf-inner{
padding: 0 5vw 10vw 5vw;
}
#mf1 p{
margin: 0 0 5vw 0;
}
#mf1 .cbox .clist{
flex-direction: column;
}
#mf1 .cboxs{
width: 100%;
}
#mf1 .cboxs:before,
#mf1 .cboxs:after{
width: 51%;
height: 1px;
right: auto;
bottom: 2vw;
}
#mf1 .cboxs:before{
transform: rotate(10deg);
top: auto;
left: 0;
}
#mf1 .cboxs:after{
transform: rotate(-10deg);
right: 0;
}

#mf1 .cboxs-inner{
padding: 10vw 5vw;
}
#mf1 .cboxs figure{
margin: 0 0 5vw 0;
}
#mf1 .cboxs figure img{
max-width: 170px;
width: 27vw;
}
#mf1 .cboxs dl dt{
margin: 0 0 2vw 0;
}

#mf2 .mf-inner{
padding: 10vw 5vw;
}
#mf2 h2{
font-size: 1.5em;
margin: 0 0 5vw 0;
}
#mf2 h2:before{
margin: 0 auto 3vw auto;
}
#mf2 .clist{
justify-content:center;
}
#mf2 .cbox{
max-width: 580px;
width: 80vw;
margin: 0 0 5vw 0;
}
#mf2 .cbox-inner{
padding: 5vw;
}



#mf3 .mf-inner{
padding: 10vw 5vw;
}
#mf3 h2{
font-size: 1.5em;
margin: 0 0 5vw 0;
}
#mf3 h2:before{
margin: 0 auto 5vw auto;
}
#mf3 h3{
padding: 3vw;
margin: 0 auto 5vw auto;
font-size: 1.2em;
}
#mf3 .clist{
justify-content:center;
}
#mf3 .cboxs{
width: auto;
margin: 0 0 5vw 0;
}
#mf3 .ttl{
padding: 3vw;
}
#mf3 .ttl:before{
top: 2vw;
left: 2vw;
}
#mf3 .ttl:after{
right: 2vw;
}

#mf3 .ttl dt{
font-size: 1.2em;
margin: 0 0 3vw 0;
}
#mf3 .ttl dd{
font-size: 1em;
}
#mf3 .ttl dd strong{
font-size: 2em;
}

#mf3 .cboxs .ttl p{
font-size: 0.7em;
margin: 1vw 0;
}
#mf3 .cboxs .ttl p strong{
font-size: 1.5em;
}
#mf3 .cboxs .ttl p.t-right{
text-align: right;
position: static;
}

#mf3 .cboxs .ttl + p{
padding: 5vw;
}


#mf3 #cbox32 .cboxs:nth-of-type(2)  .ttl{
height: auto;
}



}