@charset "UTF-8";

h2,h3,h4,p,li,td,th{
    color: #0f3b58;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pcBr{
    display:block;
}
#front .under{
    background: #f6fcfe;
    padding: 4rem 1rem;
}
#front h2{
    font-weight: 800;
    font-size: 200%;
    text-align: center;
    margin: 3rem 0 2.5rem 0;
    color: #0f3b58;
}
#front h2 svg{
    width: 23px;
    margin-right: 10px;
    fill: #1cae7a;
}

/*------------------------------------------------------------
  mainView
------------------------------------------------------------*/
#front #mainView{
    background: url(../img/index/mainBg.jpg) no-repeat;
    background-position: right -10% bottom;
    background-size: contain;
}
#front #mainView h1{
    width: 60%;
    padding: 10rem 0 0 1rem;
}
#front #mainView h1 img{
    width: 600px;
}
#front #mainView p{
    font-weight: 600;
    width: 80%;
    line-height: 190%;
    color: #0f3b58;
    padding-bottom: 10rem;
    padding-left:1rem;
}


/*------------------------------------------------------------
  intro
------------------------------------------------------------*/
#front #intro{
    padding: 2rem 1rem;
}
#front #intro .contentWrapper{
background: #FFF;
    padding: 1rem 3rem 4rem 3rem;
    border-radius: 20px;
    box-shadow: 0 0 10px #cccccc47;
}

/*------------------------------------------------------------
  service
------------------------------------------------------------*/
#front #service{
    padding: 2rem 1rem;
}
#front #service .contentWrapper{
    background:#FFF;background: #FFF;
    padding: 1rem 3rem 4rem 3rem;
    border-radius: 20px;
    box-shadow: 0 0 10px #cccccc47;
}
#front #service h3{
    font-weight: 700;
    font-size: 150%;
    border-bottom: 1px solid;
    padding: 5px 0; 
}
#front #service .leanBox{

}
#front #service .leanBox h4{
    background: #0f3b58;
    color: #FFF;
    font-weight: 700;
    padding: 2px 20px 2px 20px;
    border-radius: 10px 10px 0 0;
    width: 200px;
    font-size: 110%;
}
#front #service .leanBox ul{
    border: 2px solid #0f3b58;
    padding: 1rem;
    margin-bottom: 3rem;
}
#front #service .leanBox ul li{
    padding: 10px;
    font-weight: 700; 
}
#front #service .leanBox ul li svg{
    width: 19px;
    vertical-align: sub;
    margin-right: 10px;
    fill: #1cae7a;
}

/*------------------------------------------------------------
  fee
------------------------------------------------------------*/
#front #fee{
    padding: 2rem 1rem;
}
#front #fee .contentWrapper{
    background: #FFF;
    padding: 1rem 3rem 4rem 3rem;
    border-radius: 20px;
    box-shadow: 0 0 10px #cccccc47;
}
#front #fee table{
    border-collapse: collapse;
    width: 100%;
}
#front #fee table th,#front #fee table td{
    font-size: 120%;
    padding: 10px 30px;
    border: 2px solid #0f3b58;
    text-align: left;
    font-weight: 700;
}
#front #fee table th{
    width: 40%;
    background: #0f3b58;
    color: #FFF;
    border-bottom: 2px solid #FFF;
}
#front #fee table tr:nth-of-type(4) th{
    border-bottom:2px solid #0f3b58;
}
#front #fee table td{

}
#front #fee table td span{
    font-size:80%;
}
#front #fee .total{
    background: #f1f6ff;
    font-weight: 800;
    font-size: 200%;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
}
#front #fee .total .label{
    font-size: 70%;
}
#front #fee .total .small{
    font-size: 50%;
    margin: 0 10px;
}
#front #fee .title{
    font-weight: 800;
    font-size: 120%;
    margin-bottom: 4px;
    border-bottom: 1px solid;
    padding-bottom: 5px;
}
#front #fee .caution{
    margin: 0;
}
#front #fee .caution li{
    text-align: left;
    font-weight: 700;
    padding: 5px 0;
}
#front #fee .caution li svg{
    width: 19px;
    vertical-align: sub;
    margin-right: 10px;
    fill: #0f3b58;
}

/*------------------------------------------------------------
  application
------------------------------------------------------------*/
#front #application{
    padding: 2rem 1rem;
}
#front #application .contentWrapper{
    background: #FFF;
    padding: 1rem 3rem 4rem 3rem;
    border-radius: 20px;
    box-shadow: 0 0 10px #cccccc47;
}
#front #application p{
    text-align:center;
}
#front #application .mail{
    background: #f1f6ff;
    font-weight: 800;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    font-size: 160%;  
}
#front #application .comp{
    font-weight: 800;
    font-size: 120%;
    margin: 0;
}
#front #application .adress{
    margin: 0;
}

@media (max-width: 1099px) {
    #front .underlayerWrapper.double{
        padding: 10px;
    }
}


@media (max-width: 650px) {

    .pcBr{
        display:none;
    }

    #front #mainView{
        background-position: right 10% bottom;
        background-size: 70%;
    }
    #front #mainView h1{
        width: 95%;
    }
    #front #mainView h1 img{
        width:100%;
    }
    #front #mainView p{
        width:95%;
    }
    #front #fee table th, #front #fee table td{
        display:block;
        text-align:center;
    }
    #front #fee table th{
        width:100%;
        border: none;
    }
}

@media (max-width: 480px) {
    #front .underlayerWrapper.double{
        padding: 10px;
    }
    #front #mainView h1{
        width: 95%;
    }
    #front h2{
        font-size: 160%;
        margin: 2rem 0 1.5rem 0;
    }
    #front #service h3{
        font-size: 130%;
    }
    #front #intro .contentWrapper,
    #front #service .contentWrapper,
    #front #fee .contentWrapper,
    #front #application .contentWrapper{
        padding: 1rem 1rem 3rem 1rem;
    }

}

@media (max-width: 380px) {

    #front .under{
        padding: 0 0 3rem 0;
    }
    #front #intro .contentWrapper, #front #service .contentWrapper, #front #fee .contentWrapper, #front #application .contentWrapper{
        padding: 1rem 1rem 2rem 1rem;
    }
    #front #mainView{
        background-position: right 419% bottom;
        background-size: 95%;
    }
    #front #mainView h1{
        padding: 4rem 0 0 1rem;
    }
    #front h2{
        font-size: 140%;
    }
    #front #mainView p{
        font-size: 79%;
    }
    #front #service h3{
        font-size: 120%;
        line-height: 140%;
    }
    #front #application .adress{
        font-size: 80%;
    }

}