@charset "utf-8";

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

#mf1 p{
text-align: center;
}
#mf2{
margin: 50px 0;
}
#mf2 .mf-frame{
background: #FBF7EF;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
#mf2 .mf-inner{
padding: 50px;
}

.cbox{
margin: 0 0 80px 0;
position: relative;
}
.cbox-inner{
padding: 0 0 0 350px;
}
.cbox figure{
position: absolute;
left: 0;
}
.cbox figure img{
width: 300px;
}
.cbox dt{
display: flex;
align-items: center;
font-size: 1.5em;
font-weight: bold;
border-bottom: #00A3CE dashed 3px;
padding: 0 0 10px 0;
margin: 0 0 10px 0;
}
.cbox dt img{
max-width: 56px;
width: 8.75vw;
margin: 0 0.3em 0 0;
}
.cbox dd{
min-height: 12em;
padding: 0 0 0 70px;
position: relative;
}
.cbox dd:before{
content: "";
max-width: 36px;
width: 5.63vw;
background: linear-gradient(0deg, rgba(10,173,214,1) 0%, rgba(235,251,255,1) 100%);
position: absolute;
top: 0;
bottom: -30px;
left: 10px;
}
.cbox dd:after{
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20px 18px 0 18px;
border-color: #0aadd6 transparent transparent transparent;
position: absolute;
left: 10px;
top: calc(100% + 30px);
}

#cbox6 dl{
margin: 0;
}
#cbox6 dd{
padding: 0;
}
#cbox6 dd:before,
#cbox6 dd:after{
display: none;
}

@media screen and (max-width: 800px) {
#mf1 .mf-inner{
padding: 0 5vw;
}
#mf1 p{
display: table;
margin: 0 auto;
text-align: left;
}
#mf2{
margin: 5vw;
}
#mf2 .mf-inner{
padding: 10vw 5vw;
}

.cbox{
margin: 0 0 10vw 0;
}
.cbox-inner{
padding: 0;
}
.cbox figure{
text-align: center;
margin: 0 0 3vw 0;
position: static;
}
.cbox figure img{
max-width: 600px;
width: 80vw;
}
.cbox dt{
padding: 0 0 2vw 0;
margin: 0 0 2vw 0;
}
.cbox dt img{
max-width: 82px;
margin: 0 0.5em 0 0;
}
.cbox dd{
min-height: inherit;
padding: 0;
}
.cbox dd:before,
.cbox dd:after{
display: none;
}
}