@charset "utf-8";

#pankuzu{display: none;}

#mainvis{
background-image: url("../img/top/mbg.png");
}
#mainvis figure{
transform: translate(20px,10px);
}
#mainvis figure img{
width: 560px;
}
#mainvis .ctext{
width: 500px;
font-size: 0.88em;
}
#mainvis .ctext dl{
background: #fff;
border-radius: 30px;
padding: 40px 60px;
margin: 0 0 1em 0;
}
#mainvis .ctext dl img{
width: 100%;
}
#mainvis .ctext dl dt{
margin: 0 0 20px 0;
}
#mainvis .ctext p{
line-height: 1.5em;
padding: 0 0 0 10px;
}

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

#mf2{
background: #F7F5F1;
border-radius: 30px 30px 0 0;
}
#mf2 .mf-inner{
padding: 100px 0;
}
#mf2 h2{
font-size: 2em;
text-align: center;
margin: 0 0 50px 0;
}

#mf2 ul{
display: flex;
justify-content: space-between;
}
#mf2 ul li{
width: 300px;
background: #ff7784;
color: #fff;
border-radius: 20px;
overflow: hidden;
text-align: center;
padding: 0 0 20px 0;
}
#mf2 ul li strong{
display: table;
margin:  0 auto;
padding: 50px 0 0 0;
font-size: 1.44em;
line-height: 1em;
position: relative;
}
#mf2 ul li strong img{
display: table;
margin: 0 auto;
width: 70px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-30%,-50%);
}


/**/
#main h3{
font-size: 2em;
text-align: center;
padding: 50px 0 0 0;
margin: 0 0 100px 0;
position: relative;
}
#main h3:before{
content: "";
display: table;
width: 270px;
height: 1px;
background: #4e4e4e;
margin: 0 auto 80px auto;
}
#main h3 img{
width: 110px;
position: absolute;
top: 0px;
left: 50%;
transform: translate(-40%,0);
}
/**/

#mf3{
background: #F7F5F1;
}
#mf3 .mf-inner{
padding: 50px 0;
}
#mf3 .cbox{
background: #fffff8;
margin: 0 0 30px 0;
border-radius: 20px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}
#mf3 .cbox-inner{
padding: 30px;
position: relative;
}
#mf3 .cbox figure{
position: absolute;
top: 50%;
left: 30px;
transform: translate(0,-50%);
}
#mf3 .cbox figure img{
width: 230px;
}
#mf3 dl{
width: 680px;
margin: 0 0 0 auto;
}
#mf3 dl dt{
background: #cce9ff;
text-align: center;
font-weight: bold;
margin: 0 0 20px 0;
position: relative;
}

#mf3 dl dt:before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translate(0,-50%);
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 1em 0 1em 10px;
   border-color: transparent transparent transparent #fffff8;
}
#mf3 dl dt:after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translate(0,-50%);
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 1em 10px 1em 0;
   border-color: transparent #fffff8 transparent transparent;
}
#mf3 dl dd{
display: flex;
justify-content: space-between;
align-items: center;
}
#mf3 dl dd img{
width: 350px;
}

#mf3 .cbox:last-of-type{
background: #fff2e0;
}
#mf3 .cbox:last-of-type dl dt{
background: #ff7784;
color: #fff;
}
#mf3 .cbox:last-of-type dl dt:before {
   border-color: transparent transparent transparent #fff2e0;
}
#mf3 .cbox:last-of-type dl dt:after {
   border-color: transparent #fff2e0 transparent transparent;
}

#mf4{
background: #F7F5F1;
}
#mf4 .mf-inner{
padding: 50px 0;
}
#mf4 dl{
display: flex;
align-items: center;
font-size: 1.61em;
background: #fff;
margin: 0 0 50px 0;
}
#mf4 dl dt{
display: flex;
align-items: center;
justify-content: center;
width: 250px;
letter-spacing: 0.3em;
text-align: center;
background: #ff7784;
color: #fff;
font-weight: bold;
padding: 10px;
height: 70px;
position: relative;
transform: translate(-20px,-20px);
}
#mf4 dl dt:before{
content: "";
position: absolute;
top: 100%;
left: 0;
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 20px 10px 0;
   border-color: transparent #b6423b transparent transparent;
}
#mf4 dl dt:after{
content: "";
position: absolute;
left: 100%;
top: 50%;
transform: translate(0,-50%);
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 35px 0 35px 20px;
   border-color: transparent transparent transparent #ff7784;
}
#mf4 dl dd{
margin: 0 0 0 1em;
}

#mf5{
background: #F7F5F1;
}
#mf5 .mf-inner{
padding: 50px 0;
}
#mf5 ul{
display: flex;
justify-content: space-between;
margin: 0 0 30px 0;
}
#mf5 ul li{
font-size: 1.11em;
padding: 20px 10px;
text-align: center;
width: calc(100% / 6 - 1px);
background: #ff7784;
color: #fff;
}

#mf5 table{
width: 100%;
background: #fff;
font-size: 1.11em;
}
#mf5 table tr{
border-bottom: #383730 solid 1px;
}
#mf5 table th,
#mf5 table td{
text-align: center;
padding: 20px;
border-right: #383730 solid 1px;
}
#mf5 table th{
background: #f2ebde;
color: #ff7784;
}
#mf5 table tr *:last-child{
border-right: none;
}
#mf5 table tr:first-of-type{
border-bottom-width: 2px;
}
#mf5 table tr:first-of-type th:first-of-type{
background: #ede2cd;
color: #000;
}
#mf5 table tr:not(:first-of-type) th{
text-align: left;
color: #00a0e9;
}

#mf5 table th img{
margin: 0 1em 0 0;
width: 50px;
}
#mf5 a{
display: block;
text-align: center;
margin: 50px auto;
width: 260px;
padding: 20px;
color: #fff;
background: #00a0e9;
}



@media screen and (max-width: 1024px) {
#mainvis{
background:none;
}
#mainvis .mf-inner{
display: block;
background: url("../img/top/mbgs.png") center bottom /100% auto no-repeat;
height: auto;
max-height: inherit;
border-radius: 30px;
overflow: hidden;
}
#mainvis figure{
text-align: center;
transform: translate(0,2vw);
}
#mainvis figure img{
max-width: 700px;
width: 90vw;
}
#mainvis .ctext{
width: auto;
font-size: 1em;
}
#mainvis .ctext dl{
padding: 5vw 7vw;
padding-top:10vw; 
margin: 0;
}
#mainvis .ctext dl img{
max-width: 100%;
width: auto;
}
#mainvis .ctext dl dt{
margin: 0 0 5vw 0;
}
#mainvis .ctext p{
text-align: right;
padding: 3vw 5vw;
}

#mf1 .mf-inner{
padding:10vw 5vw;
}
#mf1 figure{
margin: 0 0 1em 0;
}


#mf2 .mf-inner{
padding: 10vw 5vw;
}
#mf2 h2{
font-size: 1.7em;
margin: 0 0 50px 0;
}

#mf2 ul{
flex-wrap: wrap;
justify-content: center;
}
#mf2 ul li{
max-width: 700px;
width: 100%;
padding: 0 0 5vw 0;
margin: 0 0 10vw 0;
}
#mf2 ul li strong{
padding: 5vw 0 0 0;
}
#mf2 ul li strong img{
margin: 0 auto;
max-width: 140px;
width: 20vw;
left: 0;
transform: translate(-75%,-50%);
}


/**/
#main h3{
font-size: 1.7em;
padding: 10vw 0 0 0;
margin: 0 0 10vw 0;
position: relative;
}
#main h3:before{
width: 100%;
margin: 0 auto 15vw auto;
}
#main h3 img{
max-width: 190px;
width: 25vw;
margin: 0 0 3vw 0;
}
/**/


#mf3 .mf-inner{
padding: 10vw 5vw;
}
#mf3 .cbox{
background: #fffff8;
margin: 0 0 30px 0;
border-radius: 20px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}
#mf3 .cbox-inner{
padding: 30px;
position: relative;
}
#mf3 .cbox figure{
position: static;
transform: translate(0);
margin:0 0 5vw 0;
}
#mf3 .cbox figure img{
max-width: 700px;
width: 80vw;
}
#mf3 dl{
width: 100%;
margin: 0;
}
#mf3 dl dt{
padding: 2vw;
margin: 0 0 3vw 0;
font-size: 1.2em;
}
#mf3 dl dt:before {
border-width: 1.3em 0 1.3em 10px;
}
#mf3 dl dt:after {
border-width: 1.3em 10px 1.3em 0;
}

#mf3 dl dd{
flex-wrap: wrap;
justify-content: center;
}
#mf3 dl dd img{
max-width: 700px;
width: 80vw;
}


#mf4 .mf-inner{
padding: 10vw 5vw;
}
#mf4 dl{
display: block;
font-size: 1.5em;
padding: 5vw;
padding-top:2vw; 
margin: 0 0 10vw 0;
}
#mf4 dl dt{
width: 10em;
padding: 2vw;
height: auto;
transform: translate(0,calc(-2vw - 10px));
}
#mf4 dl dt:before{
top:0;
right: 100%;
left: auto;
   border-width: 0 0 10px 10px;
   border-color: transparent transparent #b6423b transparent;
}

#mf4 dl dt:after{
left: 0;
top: 100%;
transform: translate(0);
   border-width: 10px 5em 0 5em;
   border-color:#ff7784 transparent transparent transparent ;
}
.triangle {
   border-width: 35px 17.5px 0 17.5px;
   border-color: #FF4532 transparent transparent transparent;
   transform: rotate(0deg);
}
#mf4 dl dd{
margin: 0;
}


#mf5 .mf-inner{
padding: 10vw 5vw;
}
#mf5 ul{
flex-wrap: wrap;
margin: 0 0 5vw 0;
}
#mf5 ul li{
padding: 2vw;
text-align: center;
width: calc(100% / 3 - 1px);
margin: 0 0 2px 0;
}

#mf5 table,
#mf5 table tr,
#mf5 table tbody,
#mf5 table th{
display: block;
width: 100%;
border: none;
font-size: 0.9em;
}
#mf5 table{
background: none;
}
#mf5 table tr{
margin: 0 0 5vw 0;
}
#mf5 table tr:not(:first-of-type){
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#mf5 table th{
padding: 2vw;
}
#mf5 table td{
width: calc(25% - 1px);
border: none;
background: #fff;
padding: 3.5em 1vw 2vw 1vw;
position: relative;
}
#mf5 table td:before{
content: attr(data-label);
background: #f2ebde;
color: #ff7784;
position: absolute;
top: 0;
left: 0;
right: 0;
}

#mf5 table tr:not(:first-of-type) th{
margin: 0 0 2vw 0;
}
#mf5 table tr:first-of-type th:not(:first-of-type){
display: none;
}



#mf5 table th img{
width: 7vw;
max-width: 50px;
vertical-align: middle;
}
#mf5 a{
margin: 5vw auto;
max-width: 670px;
width: 80vw;
padding: 3vw;
}


}