@charset "UTF-8";

/*------------------------------------------------------------
  common
------------------------------------------------------------*/
#front .cmHd{
    text-align: center;
    font-size: 190%;
    font-weight: bold;
    margin: 1rem 0;
    border-bottom: 4px dotted;
    padding-bottom: 10px;
}
#front .discription{
    font-weight: 800;
    line-height: 210%;
    margin: 0 0 2rem 0;
}

/*------------------------------------------------------------
  mainView
------------------------------------------------------------*/
#front #mainView{
    background: url(../img/index/mv-bg.jpg) no-repeat;
    background-position: right 0% center;
    background-size: cover;
    padding:4vw 0;
}
#front #mainView h2{
    font-weight: bold;
    color: #FFF;
    padding: 2rem;
    font-size: 3vw;
    text-shadow: 0 0 10px #000000a8;
}
#front #mainView .mvflex{
    width: 90vw;
}
#front #mainView .mvflex p{
    color: #FFF;
    font-size: 150%;
    font-weight: 500;
    padding: 0 2rem;
    flex: 1;
    margin: 10px 0 0 0;
}
#front #mainView .mvflex ul{
    flex: 1.5;
}
#front #mainView .mvflex ul li{
    background: url(../img/index/mvTips-bg.jpg) no-repeat;
    background-size: cover;
    color: #FFF;
    text-align: center;
    font-weight: 700;
    font-size: 160%;
    border-radius: 3px;
    margin: 10px 5px;
    flex: 1;
    padding: 1vw 10px 10px 10px;
    line-height: 130%;
}

/*------------------------------------------------------------
  why
------------------------------------------------------------*/
#front #why{

}
#front #why .contentWrapper{
    background: #7b5b3a;
    border-radius: 40px;
    padding: 1rem;
    padding: 3rem 5rem;
}
#front #why .contentWrapper h2{
    color: #FFF;
}
#front #why .contentWrapper p{
    color: #FFF;
    margin: 2rem auto;
    font-weight: 600;
    font-size: 105%;
    line-height: 170%;
}
#front #why .contentWrapper p span{
    font-size: 130%;
    padding: 0 1rem;
    color: #ff8001;
}
#front #why .contentWrapper img{
    width: 80%;
    margin: 1rem auto;
}

/*------------------------------------------------------------
  about
------------------------------------------------------------*/
#front #about{
    padding: 2rem 1rem;
}
#front #about .flex {
    flex-direction: row-reverse;
}
#front #about .flex .imgWrap{
    flex: 1.3;
    margin: 1rem;
}
#front #about .flex .imgWrap img{
    margin-bottom: 2rem;
}
#front #about .flex .txtWrap{
    flex: 1;
    margin: 1rem; 
}
#front #about .flex .txtWrap p{
    font-weight: 600;
    line-height: 180%;
}
#front #about .flex .txtWrap p.sign{
    font-size: 160%;
    text-align: right;
    display: block;
}
#front #about .flex .txtWrap p.sign span{
    font-size: 60%;
    padding-right: 1rem;
}
/*------------------------------------------------------------
  menu
------------------------------------------------------------*/
#front #menu{
    background: #71bf44;
    padding: 3rem 1rem;
    position: relative;
}
#front #menu::before{
    content: "";
    background: url(../img/common/grass.png);
    background-size: contain;
    width: 100%;
    height: 20px;
    left: 0;
    position: absolute;
    top: -20px;
}
#front #menu h2{
    color: #FFF;
}
#front #menu .discription{
    color: #FFF; 
}
#front #menu ul{
    flex-wrap: wrap;
}
#front #menu li{
    position: relative;
    margin: 7px;
    width: 48%;
}
#front #menu li::before{
    content: "";
    background: url(../img/common/icon_memo.png) no-repeat;
    width: 27px;
    height: 34px;
    background-size: contain;
    position: absolute;
    top: 25%;
    left: 2.5%;
}
#front #menu li::after{
    content: '\f101';
    font-size: 20px;
    position: absolute;
    top: 35%;
    right: 1rem;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
}
#front #menu li a{
    background: #FFF;
    display: block;
    border: 2px solid;
    border-radius: 10px;
    padding: 1.5rem 1.5rem 1.5rem 4rem;
    font-size: 130%;
    font-weight: 500;
}

/*------------------------------------------------------------
  point
------------------------------------------------------------*/
#front #point{
    padding: 3rem 1rem;
}
#front #point h2{
    margin-bottom: 3rem;
}
#front #point .flex{
    margin: 1rem 0;
}
#front #point .txtWrap{
    margin: 1rem;
    flex: 2;
}
#front #point .txtWrap h3{
    font-weight: 600;
    font-size: 150%;
    border-bottom: 1px solid #70bf44;
}
#front #point .txtWrap p{
    font-weight: 500;
    line-height: 190%;
    font-size: 110%;
}
#front #point .imgWrap{
    margin: 1rem;
    flex: 1;
}

/*------------------------------------------------------------
  fee
------------------------------------------------------------*/
#front #fee{
    padding: 3rem 1rem;
    background: #84623e;
    position: relative;
}
#front #fee::before{
    content: "";
    background: url(../img/common/grass.png);
    background-size: contain;
    width: 100%;
    height: 20px;
    left: 0;
    position: absolute;
    top: -20px;
}
#front #fee h2,#front #fee .discription{
    color: #FFF;
    text-align: center;
}
#front #fee .feeCont{
    background: #FFF;
    border-radius: 10px;
    margin: 2rem 0;
    padding: 1rem;
    width: 90%;
    margin: 0 auto;
}
#front #fee .leftWrap{
    flex: 1;
    padding:1rem;
}
#front #fee .leftWrap p.title{
    color: #ff8900;
    font-weight: 600;
    font-size: 150%;
    text-align: center;
    margin: 0;
    line-height: 100%;
}
#front #fee .leftWrap p.num{
    color: #ff8900;
    font-weight: 600;
    font-size: 280%;
    text-align: center;
    margin: 0;
}
#front #fee .rightWrap{
    flex: 2;
    padding:1rem;
}
#front #fee .rightWrap p{
    margin: 0;
    font-weight: 600;
}
#front #fee .rightWrap a{
    background: #ff8900;
    color: #FFF;
    font-weight: 700;
    width: 100%;
    border-radius: 4px;
    padding: 8px 2rem;
    text-align: center;
    margin: 10px 0;
}
/*------------------------------------------------------------
  column
------------------------------------------------------------*/
#front #column {
    position: relative;
    color: #FFF;
    background-color: #84623e;
    padding: 2rem 1rem 3rem 1rem;
    margin-top: 2rem;
}
#front #column::before {
    content: "";
    background: url(../img/common/grass.png);
    background-size: contain;
    width: 100%;
    height: 20px;
    left: 0;
    position: absolute;
    top: -20px;
}
#front #column h2.cmHd {
    color: #FFF;
    border-bottom: 4px dotted #FFF;
}
#front #column h2.cmHd + p {
    color: #FFF;
    font-weight: 500;
    text-align: center;
    margin-bottom: 1.5rem;
}
#front #column .columnWrapper {
    background-color: #FFF;
    border-radius: 5px;
    padding: 2rem;
}
#front #column .columnItem {
    border-bottom: 1px dotted #ccc;
}
#front #column .columnItem a {
    display: flex;
    padding: 0.75rem 0;
}
#front #column .columnItem a time {
    padding-left: 0;
    width: 8rem;
    line-height: 2;
}
#front #column .columnItem a time::before {
    content: none;
}
#front #column .columnItem a .inner {
    margin-left: 2rem;
    width: calc(100% - 8rem);
}
#front #column .columnItem a .inner h3 {
    font-size: 115%;
}
#front #column .columnItem a .inner .category {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
#front #column .columnItem a .inner .category span {
    color: #FFF;
    background-color: #ff8001;
    margin: 2px;
    padding: 0 1em;
    font-weight: 500;
    font-size: 12px;
    line-height: 160%;
}
#front #column .columnWrapper p.more {
    margin-top: 2rem;
}
#front #column .columnWrapper p.more a:after {
    content: none;
}
@media (max-width: 480px) {
    #front #column::before {
        background: url(../img/common/grass.png);
        background-size: cover;
    }
    #front #column .columnWrapper {
        padding: 0.5rem 1.5rem;
    }
    #front #column .columnItem a {
        flex-direction: column;
        padding: 1rem 0;
    }
    #front #column .columnItem a time {
        width: 100%;
        margin-bottom: 0.5em;
        font-size: 80%;
        line-height: initial;
    }
    #front #column .columnItem a .inner {
        margin-left: 0;
        width: 100%;
    }
}


/*------------------------------------------------------------
  solveCase
------------------------------------------------------------*/
#front #solveCase{
    background: #fbf2e4;
    padding: 3rem 1rem;
}
#front #solveCase h2{
    border-top: none;
}
#front #solveCase .wpContent .solveCaseContent{
    border: none;
    border-radius: 10px;
}
#front #solveCase .solveCaseContent .txtWrapper{
    flex: 8;
}

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

@media (max-width: 950px) {
    #front #mainView .mvflex{
        display: block;
    }
    #front #mainView .mvflex ul{
        padding-left: 2rem;
    }
}

@media (max-width: 780px) {
    #front #mainView{
        background: url(../img/index/mv-bg.jpg) no-repeat;
        background-position: right 40% center;
        background-size: cover;
    }
    #front #solveCase .solveCaseContent .infoWrapper img{
        max-width: 14vw;
    }

}

@media (max-width: 480px) {
    #front .discription{
        font-weight: 500;
    }
    #front .cmHd{
        font-size: 130%;
    }
    #front .underlayerWrapper.double{
        padding: 10px;
    }
    #front #mainView{
        background: url(../img/index/mv-bg.jpg) no-repeat #4fb849;
        background-position: right 25% top;
        background-size: 240%;
        padding-top: 14rem;
        position: relative;
    }
    #front #mainView::before{
        content: "";
        width: 100%;
        height: 99vw;
        background: #4fb84994;
        position: absolute;
        bottom: 0;
    }
    #front #mainView h2{
        padding: 0 1rem;
        font-size: 6vw;
        position: relative;
        z-index: 1;
        text-align: center;
        line-height: 150%;
    }
    #front #mainView .mvflex{
        position: relative;
        width: 100%;
    }
    #front #mainView .mvflex p{
        padding: 0 1rem;
        font-size: 100%;
        text-align: center;
    }
    #front #mainView .mvflex ul{
        padding: 0 1rem;
        display: block;
    }
    #front #mainView .mvflex ul li{
        font-size: 120%;
    }
    #front #why .contentWrapper{
        padding: 1rem 2rem;
        border-radius: 0;
    }
    #front #why .contentWrapper p span{
        font-size: 120%;
        padding: 0;
    }
    #front #why .contentWrapper img{
        width: 100%;
    }
    #front #about .flex ,#front #fee .feeCont{
        display: block;
    }
    #front #menu::before,#front #fee::before{
        background: url(../img/common/grass.png);
        background-size: cover;
    }
    #front #menu li{
        width: 100%;
    }
    #front #menu li a{
        padding: 1rem 1.5rem 1rem 4rem;
    }
    #front #point{
        padding: 2rem 1rem;
    }
    #front #point .txtWrap h3{
        font-size: 120%;
    }
    #front #point .flex{
        display: block;
        margin: 1rem 0 4rem 0;
    }
    #front #point .txtWrap p{
        line-height: 160%;
        font-size: 100%;
    }
    #front #fee .leftWrap{
        padding: 1rem 1rem 0 1rem;
    }
    #front #fee .rightWrap{
        padding: 0 1rem 1rem 1rem;
    }
    #front #solveCase{
        padding: 0;
    }
    #front #solveCase .solveCaseContent .txtWrapper{
        flex: 2;
    }






}