@charset "utf-8";

#mainvis{
background-image: url("../img/faq/mi.png");
}

#mf1 .mf-frame{
background: #FBF7EF;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
#mf1 .mf-inner{
padding: 40px 0;
}
#mf1 p{
text-align: center;
margin: 0 0 20px 0;
}
#mf1 ul{
display: flex;
justify-content: center;
}
#mf1 ul li{
margin: 0 25px;
}
#mf1 ul li a{
display: block;
background: #0AADD6;
color: #fff;
font-size: 1.5em;
font-weight: bold;
padding: 10px 50px 10px 30px;
border-radius: 100px;
line-height: 1em;
text-decoration: none;
position: relative;
}
#mf1 a:after{
content: "";
max-width: 20px;
max-height: 15px;
width: 2.67vw;
height: 2vw;
background: url("../img/cmn/arr4.png") center center /cover no-repeat;
position: absolute;
right: 20px;
top: 50%;
transform: translate(0,-50%);
}

#mf2{
margin: 50px 0;
}
.cbox{
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
margin: 0 0 100px 0;
}
.cbox:nth-of-type(odd){
background: #FBF7EF;
}
.cbox-inner{
padding: 50px;
}

#mf2 h2{
display: table;
font-size: 1.75em;
font-weight: bold;
text-align: center;
margin: 0 auto 40px auto;
padding: 0 0 20px 50px;
border-bottom: #B4E088 dashed 5px;
position: relative;
}
#mf2 h2:before{
content: "";
display: inline-block;
max-width: 45px;
max-height: 45px;
width: 6vw;
height: 6vw;
background: url("../img/faq/ic1.png") center center /cover no-repeat;
position: absolute;
left: 0;
}

#mf2 dl{
margin: 0 0 40px 0;
}
#mf2 dt{
font-size: 1.5em;
font-weight: bold;
border-bottom: #D9D9D9 dashed 3px;
padding: 0 0 20px 30px;
position: relative;
}
#mf2 dt:before{
content: "";
width: 17px;
height: 27px;
background: url("../img/faq/ic3.png") center center /cover no-repeat;
position: absolute;
left: 0;
top: 0;
}
#mf2 dt:after{
content: "";
width: 27px;
height: 25px;
background: url("../img/faq/ic2.png") center center /cover no-repeat;
position: absolute;
right: 0;
top: 50%;
transform: translate(0,-50%);
transition: 0.2s;
}
#mf2 dt.op:after{
transform: translate(0,-50%) rotate(180deg);
}
#mf2 dd{
display: none;
margin: 0 0 0 1em;
padding: 20px 0 20px 60px;
border-bottom: #D9D9D9 dashed 3px;
position: relative;
}
#mf2 .op + dd{
display: block;
}
#mf2 dd:before{
content: "";
max-width: 45px;
max-height: 45px;
width: 6vw;
height: 6vw;
background: url("../img/faq/ic1.png") center center /cover no-repeat;
position: absolute;
left: 0;
top: 20px;
}

@media screen and (max-width: 800px) {
#mainvis{
background-position: right;
}

#mf1{
margin: 0 5vw;
}
#mf1 .mf-inner{
padding: 3vw;
}
#mf1 p{
display: table;
text-align: left;
margin: 0 auto 3vw auto;
}
#mf1 ul{
flex-wrap: wrap;
}
#mf1 ul li{
margin: 0 0.5vw 2vw 0.5vw;
}
#mf1 ul li a{
font-size: 0.8em;
padding: 2vw 6vw 2vw 3vw;
}
#mf1 a:after{
right: 2vw;
}

#mf2{
margin: 10vw 5vw;
}
.cbox{
margin: 0 0 10vw 0;
}
.cbox-inner{
padding: 5vw 3vw;
}

#mf2 h2{
font-size: 1.2em;
margin: 0 auto 8vw auto;
padding: 0 0 3vw 8vw;
}

#mf2 dl{
margin: 0 0 5vw 0;
}
#mf2 dt{
font-size: 1.2em;
padding: 0 30px 3vw 30px;
}

#mf2 dd{
padding: 2vw 0 2vw 8vw;
}

#mf2 dd:before{
top: 2vw;
}
}