@charset "UTF-8";

/*------------------------------------------------------------
  common
------------------------------------------------------------*/
#front a.arrow span{
    position: relative;
}
#front a.arrow span::before{
    content: '\f054';
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: -20px;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    color: #FFF;
}
/*------------------------------------------------------------
  mainView
------------------------------------------------------------*/
#front #mainView{
    padding: 2rem 0 0 0;
}
#front #mainView .leftWrap{
    padding: 5rem 2rem 0 0;
}
#front #mainView .leftWrap h2{
    color: #005bac;
    font-weight: 700;
    font-size: 275%;
}
#front #mainView .leftWrap p{
    font-size: 110%;
    letter-spacing: 0.1rem;
}

/*------------------------------------------------------------
  point
------------------------------------------------------------*/
#front #point{
    padding: 2rem 1rem;
    background: url(../img/common/cmBg.jpg) no-repeat;
    background-position: bottom;
    background-size: cover;
}
#front #point .flex{
    flex-wrap: wrap;
}
#front #point .pointWrap{
    width: 32%;
    margin: 1rem 0 1rem 1rem;
}
#front #point .pointWrap.noMg{
    margin-left: 0;
}
#front #point .pointWrap h3{
    font-weight: 700;
    border-top: 3px solid #005bac;
    color: #005bac;
    font-size: 150%;
}
#front #point .pointWrap h3 i{
    background: #005bac;
    color: #FFF;
    font-weight: 500;
    letter-spacing: 0.3rem;
    border: 2px solid #005bac;
    font-size: 80%;
    padding: 8px 10px 10px 10px;
    margin-right: 1rem;
}
#front #point .pointWrap h3 i span{
    font-size: 160%;
}
#front #point .pointWrap img{
    margin: 1.5rem 0 0 0;
}
#front #point .pointWrap p{
    margin: 10px 0;
    font-size: 90%;
    line-height: 150%;
}
#front #point .pointWrap a{
    background: #01abeb;
    color: #FFF;
    width: 100%;
    display: block;
    padding: 10px;
    text-align: center;
    font-weight: 800;
}

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

}
/** mainMenuFlex **/
#front #menu .mainMenuFlex{

}
#front #menu .mainMenuFlex div{
    flex: 1;
    text-align: center;
    padding: 2rem;
}
#front #menu .mainMenuFlex div h2{
    color: #FFF;
    font-weight: 600;
    font-size: 170%;
}
#front #menu .mainMenuFlex div p{
    color: #FFF;
    width: 40%;
    margin: 1rem auto;
    font-size: 95%;
    text-align: left;
    line-height: 200%;
}
#front #menu .mainMenuFlex div a{
    color: #FFF;
    border: 1px solid;
    display: block;
    width: 50%;
    margin: 1rem auto;
    padding: 10px;
}
#front #menu .mainMenuFlex .leftWrap{
    background: url(../img/index/menu1Bg.jpg) no-repeat;
    background-size: cover;
}
#front #menu .mainMenuFlex .rightWrap{
    background: url(../img/index/menu2Bg.jpg) no-repeat;
    background-size: cover;
}

/** bunnerArea **/
#front #menu .bunnerArea{
    padding: 3rem 0 0 0;
}
#front #menu .bunnerArea a{
    border: 1px solid #ccc;
    border-radius: 20px;
    overflow:hidden;
}
#front #menu .bunnerArea a img{
    width:100%;
}
/** laborWrap **/
#front #menu .laborWrap{
    border-bottom: 1px solid #005bac;
    border-top: 1px solid #005bac;
    padding: 2rem;
    margin-top: 4rem;
}
/** underMenuFlex **/
#front #menu .underMenuFlex{
    padding: 1rem 0;
}
#front #menu .underMenuFlex .leftWrap{
    flex:inherit;
    padding:1rem;
}
#front #menu .underMenuFlex .leftWrap h2{
    writing-mode: vertical-rl;
    color: #005bac;
    font-weight: 700;
    font-size: 220%;
    letter-spacing: 0.5rem;
    line-height: 100%;
}
#front #menu .underMenuFlex .leftWrap h2 span{
    font-size: 40%;
    display: block;
    font-weight: 300;
    letter-spacing: 0.3rem;
} 
#front #menu .underMenuFlex .centerWrap{
    flex:3;
    padding:1rem;
}
#front #menu .underMenuFlex .rightWrap{
    flex:3;
    padding:1rem;  
}
#front #menu .underMenuFlex .rightWrap p{
    margin: 0 0 1.5rem 0;
    color: #0d3e59;
    font-weight: 500;
    font-size: 94%;
}
#front #menu .reverse .underMenuFlex{
    flex-direction: row-reverse;
    padding-top: 4rem;
}
/** menuFlex **/
#front #menu .contentWrapper h3{
    background: #01abeb;
    color: #FFF;
    font-size: 120%;
    font-weight: 700;
    letter-spacing: 0.2rem;
    padding: 5px 5px 5px 1rem;
}
#front #menu .contentWrapper h3:nth-of-type(2){
    background: #005bac; 
}
#front #menu .contentWrapper .menuFlex{
    flex-wrap: wrap;
    margin: 1.5rem 0;
}
#front #menu .contentWrapper .menuFlex a{
    position: relative;
    border: 2px solid #005bac;
    padding: 10px 10px 10px 1rem;
    display: block;
    color: #005bac;
    font-weight: 500;
    font-size: 95%;
    margin: 8px 1rem;
/*    width: 30%;*/
    width:46%;
}
#front #menu .contentWrapper .menuFlex a::after{
    content: "";
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid #005bac;
    border-bottom: 0px solid transparent;
    position: absolute;
    bottom: 0;
    right: 0;
}
/*------------------------------------------------------------
  greeting
------------------------------------------------------------*/
#front #greeting{
    padding:2rem 1rem 4rem 1rem;
}
#front #greeting .contentWrapper{
    border: 3px solid #005bac;
    padding: 3rem;
    text-align: center;
    background: url(../img/common/cmBg.jpg) no-repeat;
    background-position: bottom;
    background-size: cover;
}
#front #greeting h2{
    font-weight: 700;
    font-size: 160%;
    color: #005bac;
    line-height: 140%;
}
#front #greeting h2 span{
    font-size: 50%;
    display: block;
    font-weight: 300;
    letter-spacing: 0.2rem;
}
#front #greeting .leftWrap{
    flex:1;
    padding: 1rem;
}
#front #greeting .rightWrap{
    flex:3;
    padding: 1rem;
}
#front #greeting .rightWrap p{
    text-align: left;
    margin: 0 0 1.5rem 3rem;
}
#front #greeting h3{
    font-weight: 600;
    line-height: 120%;
    margin-top: 1rem;  
}
#front #greeting h3 .status{
    font-size: 60%;
    display: block;
}
#front #greeting h3 .kana{
    font-size: 50%;
    display: block;
}
#front #greeting a{
    background: #01abeb;
    color: #FFF;
    display: block;
    padding: 10px;
    text-align: center;
    font-weight: 800;
    width: 80%;
    margin: 0 auto 0 3rem;
}
/*------------------------------------------------------------
  column
------------------------------------------------------------*/
#front #column{
    padding: 3rem 1rem;
    background-color: #EFF5FC;
}
#front #column h2{
    font-weight: 700;
    font-size: 160%;
    color: #333333;
    line-height: 140%;
    flex: inherit;
}
#front #column h2 span{
    font-size: 50%;
    display: block;
    font-weight: 300;
    letter-spacing: 0.2rem;
}
#front #column .flex + p {
    font-weight: 500;
}
#front #column .rightWrap{
    flex:5;
}
#front #column .rightWrap a{
    background: #005bac;
    color: #FFF;
    display: block;
    padding: 5px;
    text-align: center;
    font-weight: 800;
    margin: 0 0 0 auto;
    width: 300px;
}
#front #column .columnWrapper{
    position: relative;
    background-color: #ffffff;
    margin: 1rem 2rem 0 0;
    border-bottom: none;
    width: calc((100% - 4rem) / 3);
    overflow: hidden;
}
#front #column .columnWrapper:last-of-type {
    margin-right: 0;
}
#front #column .columnWrapper:after {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-left: 1rem solid transparent;
    border-bottom: 1rem solid #005bac;
}
#front #column .columnWrapper a{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}
#front #column .columnWrapper h3 {
    color: #005bac;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
}
#front #column .columnWrapper time{
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0 1rem;
    color: #FFFFFF;
    background-color: #005bac;
    position: relative;
}
#front #column .columnWrapper time::after {
    content:"";
    position:absolute;
    top:0;
    right:-1.5rem;
    width:1.5rem;
    height:100%;
    background:#005bac;
    clip-path:polygon(0 0, 100% 0, 0 100%);
    transform: translateX(-1px);
}
#front #column .columnWrapper time::before{
    display: none;
}
#front #column .columnWrapper .category {
    display: flex;
    flex-wrap: wrap;
    margin: auto auto 2rem auto;
    padding: 0 1rem;
    width: 100%;
}
#front #column .columnWrapper .category span {
    color: #005bac;
    margin: 2px;
    padding: 0 1em;
    border: 1px solid #005bac;
    font-size: 12px;
    line-height: 160%;
}
@media (max-width: 765px) {
    #front #column .columnWrapper{
        width: 100%;
    }
}


/*------------------------------------------------------------
  info
------------------------------------------------------------*/
#front #info{
    padding:3rem 1rem 2rem 1rem;
}
#front #info h2{
    font-weight: 700;
    font-size: 160%;
    color: #005bac;
    line-height: 140%;
    flex: inherit;
}
#front #info h2 span{
    font-size: 50%;
    display: block;
    font-weight: 300;
    letter-spacing: 0.2rem;
}
#front #info .rightWrap{
    flex:5;
}
#front #info .rightWrap a{
    background: #01abeb;
    color: #FFF;
    display: block;
    padding: 5px;
    text-align: center;
    font-weight: 800;
    margin: 0 0 0 auto;
    width: 300px;
}
#front #info .infoWrapper{
    margin: 0;
    border-top: 1px solid #005bac;
    padding: 0.5rem 0;
    border-bottom: none;
}
#front #info .infoWrapper time,#front #info .infoWrapper a{
    color: #005bac;
}
#front #info .infoWrapper time{
    padding: 0;
}
#front #info .infoWrapper time::before{
    display: none;
}

@media (max-width: 1099px) {
    #front .underlayerWrapper.double{
        padding: 10px;
    }
    #front #mainView{
        padding: 2rem 1rem;
    }
    #front #mainView .leftWrap h2{
        font-size: 250%;
    }
    #front #menu .mainMenuFlex div p,#front #menu .mainMenuFlex div a{
        width: 100%;
    }
}

@media (max-width: 999px) {
    #front #mainView .leftWrap{
        padding: 1.3rem 2rem 0 0;
    }
    #front #mainView .leftWrap h2{
        font-size: 180%;
    }
    #front #point{
        padding: 1rem;
    }
    #front #point .pointWrap{
        width: 47%;
    }
    #front #point .pointWrap p{
        min-height: 110px;
    }
    #front #point .pointWrap.noMg{
        margin-left: 1rem;
    }
    #front #greeting .contentWrapper{
        padding: 3rem 1rem;
    }
    #front #menu .contentWrapper .menuFlex a{
        width: 45%;
    }
    #front #greeting .flex{
        display:block;
    }
    #front #greeting .leftWrap img{
        width: 50%;
        margin: 0 auto;
    }
    #front #greeting .rightWrap p{
        margin: 0 0 1.5rem 0;
    }
}
@media (max-width: 765px) {
    #front .underlayerWrapper.double{
        padding: 10px;
    }
    #front #info .flex,#front #column .flex,#front #mainView .flex{
        display: block;
    }
    #front #mainView{
        border-top: 1px solid #ccc;
    }
    #front #mainView .leftWrap{
        padding: 0;
    }
    #front #mainView .leftWrap h2{
        font-size: 140%;
        margin-top: 1rem;
    }
    #front #mainView .leftWrap p{
        font-size: 80%;
    }
    #front #point{
        padding: 0 1rem;
        background-size: contain;
    }
    #front #point .pointWrap,#front #point .pointWrap.noMg{
        width: 100%;
        margin: 0 0 1rem 0;
    }
    #front #point .pointWrap h3{
        font-size: 150%;
    }
    #front #point .pointWrap a{
        font-size: 80%;
    }
    #front #menu .underMenuFlex{
        padding-top: 0;
        display: block;
    }
    #front #menu .reverse .underMenuFlex{
        padding-top: 0;   
    }
    #front #menu .mainMenuFlex {
        display: block;
    }
    #front #menu .underMenuFlex .leftWrap h2{
        font-size: 200%;
        writing-mode: inherit;
    }
    #front #menu .underMenuFlex .leftWrap{
        padding: 0;
    }
    #front #menu .underMenuFlex h2{
        font-size: 140%;
    }
    #front #menu .underMenuFlex .centerWrap{
        flex: auto;
        width: 70%;
        padding: 1rem 0;
    }

    #front #menu .underMenuFlex .rightWrap{
        padding: 0;
    }

    #front #menu .contentWrapper .menuFlex a{
        width: 100%;
        margin: 5px 0;
    }
    #front #menu .internetWrap{
        padding: 2rem;
    }
    #front #menu .contentWrapper .menuFlex{
        margin: 0.5rem 0;
    }
    #front #menu .laborWrap{
        border-bottom: none;
    }
    /** bunnerArea **/
    #front #menu .bunnerArea{
        padding: 0;
    }
    #front #menu .bunnerArea a{
        border-radius: 0;
        border:none;
    }
    #front #greeting{
        padding: 0 1rem;
    }
    #front #greeting .contentWrapper{
        padding: 2rem;
    }
    #front #greeting .leftWrap{
        width: 70%;
        margin: 2rem auto 0 auto;
    }
    #front #greeting .leftWrap img{
        width: 100%;
    }
    #front #greeting .leftWrap,#front #greeting .rightWrap{
        padding: 0;
    }
    #front #greeting .flex{
        display: block;
    }
    #front #greeting .rightWrap p{
        margin: 1rem 0;
        font-size: 90%;
    }
    #front #greeting a{
        width: 100%;
        margin: 1rem 0;
        font-size: 90%;
    }
    #front #info h2,
    #front #column h2{
        font-size: 130%;
        margin-bottom: 0;
    }
    #front #info .rightWrap a,
    #front #column .rightWrap a{
        margin: 5px 0;
        font-size: 70%;
        width: 100%;
    }





}