@charset "UTF-8";

/** common **/
#front .headIcon{
    width: 37px;
    display: block;
    margin: 0 auto;
}
#front .headDeco{
    display: block;
    text-align: center;
    font-size: 80%;
    color: #234872;
}
#front .cmH2{
    text-align: center;
    font-weight: bold;
    font-size: 180%; 
    margin: 0 0 2rem 0;
}
#front .hdTxt{
    font-size: 90%;
    margin-bottom: 2rem;
    text-align: center;
}
#front #fiestTime .contentWrapper,
#front #menu .contentWrapper,
#front #skil .contentWrapper,
#front #flow .contentWrapper,
#front #qa .contentWrapper{
    padding: 2rem;
}

/** mainView **/
#front #mainView{

}
#front #mainView .leftWrap{
    flex:2;
    position: relative;
    overflow: hidden;
    height: 27vw;
}
#front #mainView .leftWrap #metaslider-id-1792{
    position: absolute;
}
#front #mainView .leftWrap .txtBox{
    position: absolute;
    z-index: 100;
    padding: 1rem 3rem;
}
#front #mainView .leftWrap h2{
    padding: 6rem 0 1rem 0;
    color: #FFF;
    font-size: 230%;
    font-weight: bold;
    text-shadow: 0 0 10px #ffffff;
    color: #234872;
}
#front #mainView .leftWrap p{
    color: #FFF;
    font-size: 140%; 
    padding: 0 0 12rem 0;
    text-shadow: 0 0 10px #ffffff;
    color: #234872;
}
#front #mainView .rightWrap{
    flex:1;
}
#front #mainView .rightWrap a{
    display: block;
    width: 100%;
    height: 50%;
}
#front #mainView .rightWrap a:nth-of-type(1){
    background: url(../img/index/mv_icon1.jpg) no-repeat;
    background-size: cover;
}
#front #mainView .rightWrap a:nth-of-type(2){
    background: url(../img/index/mv_icon2.jpg) no-repeat;
    background-size: cover;
}
/** info **/
#front #info{
}
#front #info .leftWrap{
}
#front #info .leftWrap h2{
    background: #4774b9;
    color: #FFF;
    font-size: 100%;
    margin: 0;
    padding: 1rem 4rem;
}
#front #info .leftWrap a{
    background: #234872;
    color: #FFF;
    display: block;
    padding: 1rem 1.5rem;
}
#front #info .rightWrap{
    background: #f7f7f7;
    flex: 1;
}
#front #info .rightWrap time{
    margin: 0;
    padding: 1rem;
    font-weight: bold;
}
#front #info .rightWrap time::before{
    display: none;
}
#front #info .rightWrap .categoly a{
    font-weight: bold;
}
#front #info .rightWrap .title{
    padding-left: 1rem;
    font-weight: bold;
}
/** fiestTime **/
#front #fiestTime{
    padding:0 2rem;
    background: #f7f7f7;
}
#front #fiestTime .hdTxt{
    font-size: 150%;
    font-weight: bold;
}
#front #fiestTime .txtWrap{
    flex: 1.5;
    padding:0 1rem;
}
#front #fiestTime .txtWrap p{
    padding: 0.5rem;
}
#front #fiestTime .txtWrap .name{
    text-align: right;
    font-weight: bold;
}
#front #fiestTime .txtWrap .name span{
    font-size: 180%;
    letter-spacing: 0.2rem;
    padding-left: 1rem;
}
#front #fiestTime .txtWrap .from{
    text-align: right;
    font-weight: bold;
    margin-top: 0.5rem;
    font-size: 90%;
    letter-spacing: 0.1rem;
}
#front #fiestTime .imgWrap{
    flex: 1;
    padding:0 1rem;
}

/** menu **/
#front #menu{

    padding: 0;
}
#front #menu h3{
    background: #4e4d4d;
    text-align: center;
    color: #FFF;
    padding: 0.5rem;
    margin-top: 3rem;
}
#front #menu .cpWrap,#front #menu .indWrap{
    flex-wrap: wrap;
}
#front #menu .menuCont img{
    width: 74px;
    margin: 0 auto 10px auto;
}
#front #menu .menuCont{
    margin: 1.7px;
    background: #f7f7f7;
    padding: 1rem;
}
#front #menu .menuCont p{
    text-align: center;
    font-weight: bold;
    font-size: 110%; 
}
#front #menu .cpWrap .menuCont{
    width: 32.9%;
}
#front #menu .indWrap .menuCont{
    width: 24.6%;
}


/** skil **/
#front #skil{
    padding: 0;
}
#front #skil .skillWrap{
    background: #FFF;
    margin: 1rem 0;
}
#front #skil .skillWrap .txtWrap{
    flex:2;
}
#front #skil .skillWrap .txtWrap h3{
    font-weight: bold;
    margin: 0 2rem 1rem 2rem;
    border-bottom: 3px solid #234872;
    padding: 0 0 5px 2rem;
    position: relative;
    font-size: 120%;
}
#front #skil .skillWrap .txtWrap h3::before{
    content: "";
    background: url(../img/common/icon.png) no-repeat;
    background-size: cover;
    position: absolute;
    width: 25px;
    height: 25px;
    left: 0;
    top: 5px;
}
#front #skil .skillWrap .txtWrap p{
    padding: 0 2rem;
    font-size: 90%;
}
#front #skil .imgWrap{
    flex:1;
}
#front #skil .imgWrap img{
    width: 100%;
}

/** flow **/
#front #flow{
    margin: 3rem 1rem;
}
#front #flow .flowWrap{
    background: #f7f7f7;
    margin: 5px;
    flex: 1;
}
#front #flow .flowWrap h3{
    color: #234872;
    font-weight: bold;
    margin: 1rem 1rem 0.5rem 1rem;
}
#front #flow .flowWrap h3 span{
    font-size: 140%;
}
#front #flow .flowWrap p{
    padding: 0 1rem 1rem 1rem;
}

/** column **/
#front #column{

}
#column .basicLink{
    background: #234872;
}

/** qa **/
#front #qa{

}
#front #qa .qaContent dl dt{
    background: #3a9cc3;
    color: #FFF;
    margin: 1rem 0;
}
#front #qa dt::before{
    color: #FFF;
}
#front #qa dl::after{
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
}
#front #qa .qaContent dl dd a.qaMore{
    border: 2px solid #3a9cc3;
    color: #3a9cc3;
    border-radius: 100px;
    background: none;
    position: relative;
}
#front #qa .qaContent dl dd a.qaMore::after{
    position: absolute;
    top: 13px;
    right: 26px;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    transform: rotate(44deg);
    border-top: 2px solid #3a9cc3;
    border-right: 2px solid #3a9cc3;
}

@media (max-width: 1099px) {
    #front .underlayerWrapper.double{
        padding: 10px;
    }
    #front #skil,#front #menu{
        padding: 2rem 0;
    }
    #front #mainView .leftWrap .txtBox{
        padding: 1rem;
    }
}

@media (max-width: 999px) {
    #front #mainView .leftWrap p{
        font-size: 110%;
        padding: 0;
    }
    #front #mainView .leftWrap h2{
        padding: 1rem 0 1rem 0;
        font-size: 160%;
    }
    #front #info .rightWrap time{
        padding: 5px 1rem 0 1rem;
        font-size: 70%;
    }
    #front #info .rightWrap .categoly a{
        font-size: 50%;
    }
    #front #info .leftWrap h2{
        font-size: 70%;
        padding: 1rem;
    }
    #front #info .rightWrap .title{
        font-size: 70%;
        display: block;
        margin-top: -2px;
    }
    #front main .contentWrapper{
        padding: 1rem;
    }
    #front #fiestTime{
        padding: 2rem 0;
    }
    #front #fiestTime .flex{
        display: block;
    }
    #front #fiestTime .imgWrap{
        width: 70%;
        margin: 0 auto;
    }
    #front #menu .cpWrap .menuCont{
        width: 32.85%;
    }
    #front #menu .indWrap .menuCont{
        width: 24.48%;
    }
}

@media (max-width: 480px) {
    #front .underlayerWrapper.double{
        padding: 10px;
    }
    #front #mainView .contentWrapper,
    #front #fiestTime .contentWrapper,
    #front #menu .contentWrapper,
    #front #skil .contentWrapper,
    #front #flow .contentWrapper,
    #front #qa .contentWrapper{
        padding: 1rem;
        margin: 0;
    }
    #front #mainView .leftWrap{
        height: 109vw;
    }
    #front #mainView .leftWrap h2{
        padding: 2rem 0 1rem 0;
        font-size: 190%;
    }
    #front #mainView .leftWrap p{
        padding: 0rem 0 3rem;
        font-size: 100%;
        width: 60%;
    }
    #front #info{
        display: block;
    }
    #front #info .leftWrap h2{
        font-size: 70%;
        padding: 13px 10px 10px 10px;
        flex: 20;
    }
    #front #info .leftWrap a{
        padding: 10px 1rem;
        flex: 1;
        text-align: center;
    }
    #front #info .rightWrap time{
        padding: 5px 5px 0 15px;
    }
    #front #info .rightWrap .title{
        padding: 0 5px 7px 15px;
    }
    #front #info .rightWrap .categoly a{
        font-size: 60%;
    }
    #front .headIcon{
        width: 27px;
    }
    #front .cmH2{
        font-size: 130%;
    }
    #front #fiestTime .txtWrap p{
        margin: 1rem 0;
    }
    #front #fiestTime .txtWrap .name{
        font-size: 80%;
    }
    #front #fiestTime .txtWrap .from{
        font-size: 80%;
    }
    #front #fiestTime .imgWrap{
        width: 100%;
        margin: 1rem auto 0 auto;
    }
    #front #menu .cpWrap .menuCont,#front #menu .indWrap .menuCont{
        width: 49%;
    }
    #front #menu .menuCont p{
        font-size: 80%;
    }
    #front #skil .skillWrap{
        display: block;
    }
    #front #skil .skillWrap .txtWrap h3{
        margin: 1rem;
        font-size: 104%;
    }
    #front #skil .skillWrap .txtWrap{
        padding: 1rem 0;
    }
    #front #flow{
        padding: 2rem 0;
    }
    #front #flow .flex{
        display: block;
    }
    #front #flow .flowWrap{
        margin: 1rem 0;
    }






































}