@charset "utf-8";

.pc-none{
display: none;
}

.sp-none{
display: block;
}

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

div.ttl-box{
text-align: center;
}

h2.ttl{
position: relative;
display: inline-block;
padding: 15px 0 15px 50px;
margin: 20px auto;
font-size: 1.8em;
font-weight: bold;
}

h2.ttl::before,h2.ttl::after{
content: "";
position: absolute;
}

h2.ttl::before{
width: 40px;
height: 40px;
background: url("../img/nikki/penki-greeb.svg") no-repeat;
background-size: contain;
top: 50%;
left: 0;
transform: translateY(-50%);
}

h2.ttl::after{
width: 100%;
height: 5px;
background: url("../img/nikki/border-green.png") repeat-x;
left: 0;
bottom: 0;
}

#mf1 .cbox{
width: 100%;
text-align: center;
}

#mf1 .cbox img.c1{
width: 80%;
margin: 40px auto 20px;
}

#mf1 .cbox p.pt{
font-size: 1.3em;
}

#mf1 .cbox div{
padding: 30px 0 20px 0;
width: 70%;
background-color: #06C755;
font-size: 1.7em;
color: #fff;
margin: 30px auto;
}

#mf1 .cbox div p{
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-bottom: 10px;
line-height: 1.5em;
}

#mf1 .cbox div p img{
width: 40px;
height: 40px;
margin-right: 10px;
}

#mf2 .cbox{
display: flex;
flex-wrap: wrap;
}

#mf2 .cbox > img{
width: 100%;
margin: 40px auto;
}

#mf2 .cbox ul{
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 80px;
}

#mf2 .cbox ul::before,#mf3 div.ibox::before{
position: absolute;
content: "";
width: 100%;
height: 20px;
background: url("../img/line/border.png") no-repeat;
background-size: contain;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: -1;
}

#mf2 .cbox ul li{
width: 27%;
background: #fff;
border: solid transparent;
border-radius: 10px;
box-shadow: 0 0 20px #CBCBCB;
}

#mf2 .cbox ul li div{
padding: 15px;
}

#mf2 .cbox ul li div.ibox img{
width: 100%;
}

#mf2 .cbox ul li div.tbox h3{
font-size: 1.3em;
font-weight: bold;
margin-bottom: 10px;
}

#mf3 div.ibox{
position: relative;
display: flex;
width: 80%;
margin: 40px auto;
justify-content: space-between;
align-items: end;
}

#mf3 div.ibox img{
width: 24%;
object-fit: contain;
}

#mf3 div.ibox::before{
width: 80%;
top: 30%;
left: 10%;
transform: translateY(-50%);
}

#mf4 .cbox{
display: flex;
justify-content: center;
margin: 60px auto 40px;
align-items: end;
}

#mf4 .cbox .cbox-right{
padding: 30px 50px;
width: 50%;
margin-left: 80px;
border: solid transparent;
border-radius: 10px;
box-shadow: 0 0 10px #CBCBCB;
}

#mf4 .cbox .cbox-right h3{
font-weight: bold;
font-size: 1.4em;
margin-bottom: 30px;
}

#mf4 .cbox .cbox-right div.stp{
display: flex;
width: 100%;
margin-bottom: 20px;
align-items: end;
}

#mf4 .cbox .cbox-right div.stp img{
width: 5%;
margin-right: 20px;
object-fit: contain;
}

#mf4 .cbox .cbox-right div.stp p{
width: 80%;
}

#mf4 .cbox .cbox-right div.stp p span{
font-weight: bold;
display: block;
font-size: 1.2em;
}

#mf4 .cbox .cbox-right ul{
padding: 15px;
border: solid transparent;
border-radius: 10px;
background-color: #FBF7EF;
}

#mf4 .cbox .cbox-right ul li{
list-style: disc;
margin-left: 20px;
margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
.pc-none{
display: block;
}

.sp-none{
display: none;
}

h2.ttl{
font-size: 1.3em;
}

#mf1 .cbox img.c1{
width: 100%;
margin: 40px auto;
}

#mf1 .cbox div{
width: 100%;
}

#mf2 .cbox{
width: 95%;
margin: 30px auto 0;
justify-content: space-between;
align-items: end;
}

#mf2 .cbox > img{
width: 19.5%;
margin: 0;
object-fit: contain;
}

#mf2 .cbox ul{
flex-wrap: wrap;
width: 75%;
margin-bottom: 0;
}

#mf2 .cbox ul::before{
background: url("../img/line/border-sp.jpg");
height: 80%;
width: 20px;
left: 50%;
}

#mf2 .cbox ul li{
margin-bottom: 20px;
width: 100%;
}

#mf2 .cbox ul li div.tbox h3{
font-size: 1.1em;
}

#mf3{
overflow: hidden;
}

#mf3 div.ibox{
width: 85%;
margin: auto;
overflow: scroll;
background-image: url("../img/line/border.png");
background-repeat: no-repeat;
background-size: 80%;
background-position: center 100px;
}

#mf3 div.ibox img{
width: 55%;
margin-right: 20px;
}

#mf3 div.ibox::before{
display: none;
}

#mf4 .cbox{
flex-wrap: wrap;
margin: 20px auto;
}

#mf4 .cbox .cbox-right{
width: 85%;
margin: 20px auto 0;
padding: 10px;
}

#mf4 .cbox .cbox-right div.stp img{
width: 35px;
}

#mf4 .cbox .cbox-right h3{
text-align: center;
}
}