@charset "UTF-8";

/*------------------------------------------------------------
  common
------------------------------------------------------------*/
#front .wideCtWrapper{
    width: 90%;
    margin: 0 auto;
}
#front .cmHd{
    font-size: 250%;
    font-weight: 700;
    text-align:center;
    line-height: 110%;
}
#front .cmHd .sub{
    color:#65becc;
    font-size: 50%;
    display: block;
    letter-spacing: 0.2rem;
    font-weight: 600;
    position: relative;
    text-align:center;
}
#front .cmDeco{
    text-align:center;
    margin: 1rem 0 2rem 0;
}
#front a.arrowLink{
    border: 2px solid #1a454c;
    color: #1a454c;
    width: 70%;
    display: block;
    margin: 2rem auto;
    text-align: center;
    font-size: 110%;
    font-weight: 600;
    padding: 15px 10px 15px 0;
    border-radius: 80px;
    background:#FFF;
    font-weight: 700;
}
#front a.arrowLink .arrow{
    position: relative;
}
#front a.arrowLink .arrow::after{
    content: "";
    background: url(../img/common/icon_Arrow.png) no-repeat;
    background-size: cover;
    position: absolute;
    width: 47px;
    height: 10px;
    left: 16px;
    top: 0;
    bottom: 0;
    margin: auto;
}


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

}
#front #mainView {
    padding:0;
    margin:0;
}
#front #mainView .upperBox{
    background:url(../img/index/mvBg.jpg) no-repeat;
    background-size:cover;
}
#front #mainView .mvBox{
    max-width: 1140px;
    margin: 0 auto;
}
#front #mainView .mvTxt{
    flex: 1;
    padding: 6rem 0;
}
#front #mainView .mvTxt .pr{
    background: #65becc;
    text-align: center;
    color: #FFF;
    font-weight: 700;
    font-size: 130%;
    border-radius: 80px;
    max-width: 450px;
}
#front #mainView .mvTxt .mTxt{
    color: #1a454c;
    font-size: 340%;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.05rem;
}
#front #mainView .mvTxt .comment{
    color: #1a454c;
    font-weight: 600;
}
#front #mainView  a.tel{
    background: #1a454c;
    gap: 2%;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 5px;
    max-width: 590px;
}
#front #mainView  a.tel .label{
    background: #FFF;
    font-weight: 600;
    padding: 0 1rem;
    border-radius: 80px;
    color: #1b454c;
}
#front #mainView  a.tel .telNum{
  color: #FFF;
  text-align: center;
  margin: 0;
  font-size: 230%;
  line-height: 110%;
}
#front #mainView  a.tel .telNum span{
  font-size: 50%;
}
#front #mainView .imgBox{
    flex: 1;
    max-width: 530px;
}
#front #mainView .imgBox img{
    width:100%;
}
#front #mainView .emLabel{
    background: #d14b4b;
    color: #FFF;
    display: block;
    text-align: center;
    font-size: 140%;
    padding: 20px 20px 60px 20px;
    font-weight: 600;
}
#front #mainView .bottomBox{
    position:relative;
}
#front #mainView .emLabel span{
    text-decoration:underline;
}
#front #mainView .poingFlex{
    box-shadow: 0 0 10px #969696;
    border: 3px solid #65becb;
    width: 90%;
    border-radius: 10px;
    padding: 1rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -60px;
    margin: auto;
    z-index: 1;
    background: #FFF;
}
#front #mainView .poingFlex li{
    position:relative;
    flex:1;
    text-align:center;
}
#front #mainView .poingFlex li:after{
    content: "";
    width: 1px;
    height: 65px;
    background-color: rgb(0 0 0 / 79%);
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 0px;
}
#front #mainView .poingFlex li:first-child:after{
    display:none;
}
#front #mainView .poingFlex li i{
    color: #65becc;
    font-weight: 700;
    font-style: normal;
    font-size: 110%;
    border: 2px solid;
    border-radius: 80px;
    padding: 1px;
    width: 80%;
    display: block;
    margin: 0 auto;
}
#front #mainView .poingFlex li p{
    margin: 0;
    font-size: 150%;
    font-weight: 700;
}
#front #mainView .spVer{
    display:none;
}

/*------------------------------------------------------------
  situation
------------------------------------------------------------*/
#front #situation{
    background:url(../img/index/introBg.jpg) no-repeat;
    background-size:cover;
    padding:7rem 1rem 3rem 1rem;
}
#front #situation .cmHd,
#front #situation .cmHd .sub,
#front #situation .cmDeco{
    color:#FFF;
}
#front #situation ul{
    justify-content:center;
    gap:2%;
}
#front #situation ul li{
    flex: 1;
    position: relative;
    box-shadow: 0 0 10px #969696;
    background: #FFF;
    padding: 2rem;
    border-radius: 10px;
}
#front #situation ul li i{
    width: 95%;
    position: absolute;
    display: block;
    background: #a00000;
    color: #FFF;
    font-style: normal;
    border-radius: 80px;
    padding: 2px 3rem;
    width: 80%;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
    top: 10px;
    font-weight: 700;
    font-size: 85%;
}
#front #situation ul li p{
    text-align: center;
    font-size: 130%;
    margin: 10px 0;
    font-weight: 800; 
}
#front #situation ul li a{
text-align: center;
    display: block;
    border: 2px solid;
    border-radius: 80px;
    font-weight: 600;
}



/*------------------------------------------------------------
  point
------------------------------------------------------------*/
#front #point{
    padding: 5rem 1rem;
}
#front #point ul{
    flex-wrap:wrap;
    gap: 3%;
    margin: 4rem 0;
}
#front #point ul li{
    width: 48%;
    box-shadow: 0 0 10px #969696;
    padding: 1rem 2rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    position: relative;
}
#front #point ul li i{
    color: #65becb;
    font-style: normal;
    font-size: 5rem;
    font-weight: 600;
    position: absolute;
    top: 0px;
}
#front #point ul li p{
    font-weight: 500;
    margin: 0 0 1rem 0;
}
#front #point ul li p.title{
    text-align: center;
    font-size: 150%;
    margin: 10px 0;
    font-weight: 800;
    line-height: 130%;
}

/*------------------------------------------------------------
  menu
------------------------------------------------------------*/
#front #menu{
    padding: 5rem 1rem;
    background:#eef7f8;
}
#front #menu ul{
    justify-content: center;
    flex-wrap: wrap;
    gap: 2%;
    margin: 4rem 0;
}
#front #menu ul li{
    box-shadow: 0 0 10px #969696;
    background: #FFF;
    padding: 2rem 0;
    border-radius: 10px;
    width: 22%;
    margin-bottom: 1rem;
}
#front #menu ul li a{
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 120%;
}
#front #menu ul li a img{
    width: 80px;
    margin: 0 auto 1rem auto;
}




/*------------------------------------------------------------
  solve
------------------------------------------------------------*/
#front #solve{
    padding: 5rem 1rem;
}
#front #solve ul{
    gap:3%;
    justify-content:center;
    margin: 5rem 0;
}
#front #solve ul li{
    flex:1;
    box-shadow: 0 0 10px #969696;
    background: #FFF;
    padding: 1.5rem;
    border-radius: 10px;
    display: block;
}
#front #solve ul li p{
    margin:0;
}
#front #solve ul li .label{
    
}
#front #solve ul li .title a{
    font-size: 160%;
    font-weight: 700;
    margin: 5px 0;
}
#front #solve ul li .result{
    background: #65becc;
    color: #FFF;
    font-weight: 600;
    padding: 2px 1rem;
    border-radius: 80px;
    text-align: center;
}
#front #solve ul li .comment{
    margin: 10px 0;
    font-size: 95%;
}


/*------------------------------------------------------------
  lawyer
------------------------------------------------------------*/
#front #lawyer{
    padding: 5rem 1rem;
}
#front #lawyer .contentWrapper{
    box-shadow: 0 0 10px #969696;
    padding:2rem;
    border-radius: 20px;
}
#front #lawyer .boxFlex{
    gap: 3%;
}
#front #lawyer .boxFlex .leftWrap{
    flex: 1;
}
#front #lawyer .boxFlex .leftWrap img{
    width: 80%;
    margin: 0 0 0 auto;
}
#front #lawyer .boxFlex .rightWrap{
    flex: 3;
    margin: 5rem 0;
}
#front #lawyer .boxFlex .rightWrap .name{
    font-size: 180%;
    font-weight: 700;
    margin: 0;
}
#front #lawyer .boxFlex .rightWrap .name span{
    font-size: 50%;
}
#front #lawyer .boxFlex .rightWrap .comment{
    
}
#front #lawyer .boxFlex .rightWrap ul{
    
}
#front #lawyer .boxFlex .rightWrap ul li{
    font-size: 130%;
    font-weight: 600;
    border-top: 1px solid #ccc;
    padding: 10px;
}
#front #lawyer .boxFlex .rightWrap ul li:last-child{
    border-bottom: 1px solid #ccc; 
}
#front #lawyer .boxFlex .rightWrap a{
    
}



/*------------------------------------------------------------
  fee
------------------------------------------------------------*/
#front #fee{
    padding: 5rem 1rem;
    background:#eef7f8;
}
#front #fee ul{
    gap:3%;
    margin: 5rem 0;
}
#front #fee ul li{
    flex:1;
    box-shadow: 0 0 10px #969696;
    background: #FFF;
    border-radius: 20px;
    padding: 1.5rem;
}
#front #fee ul li .label{
    background: #1a454c;
    color: #FFF;
    text-align: center;
    font-weight: 600;
    font-size: 140%;
    border-radius: 80px;
    margin: 0;
}
#front #fee ul li .title{
    color: #1a454c;
    text-align: center;
    font-size: 210%;
    font-weight: 800;
    line-height: 160%;
    margin: 20px 0;
}
#front #fee ul li .title span{
    display: block;
    font-size: 220%;
}
#front #fee ul li .title.fst{
    margin: 6px 0 34px 0;
}
#front #fee ul li .comment{
    border-top: 1px solid;
    padding: 10px;
    font-weight: 500;
}

@media (max-width: 1480px) {
    #front #mainView .poingFlex{
        width:95%;
    }
    #front #mainView .poingFlex li{
        flex: auto;
    }
    #front #mainView .poingFlex li p{
        font-size:130%;
    }
    #front #mainView .mvTxt .mTxt{
        font-size: 290%;
    }
    #front #mainView .mvTxt a.tel{
        max-width: 460px;
    }
}


@media (max-width: 1200px) {

    #front .wideCtWrapper{
        width: 100%;
    }
    #front #situation ul li{
        padding: 1rem;
    }
    #front #situation ul li p{
        font-size: 95%;
    }
    #front #situation ul li a{
        font-size: 80%;
    }

}

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

@media (max-width: 1140px) {

    #front #mainView .mvBox{
        max-width: 95%;
        align-items: end;
    }
    #front #mainView .mvTxt{
        flex: 1.5;
    }
    #front #menu ul li{
        width: 32%;
    }

}

@media (max-width: 940px) {

    #front #situation ul{
        flex-wrap: wrap;
    }
    #front #situation ul li{
        width: 47%;
        flex: none;
        margin-bottom: 1rem;
    }
    #front #solve ul{
        flex-wrap: wrap;
        justify-content:center;
    }
    #front #solve ul li{
        flex: auto;
        margin-bottom: 1rem;
        width: 40%;
    }

}

@media (max-width: 910px) {

    #front #mainView .mvBox{
        display: block;
    }
    #front #mainView .upperBox{
        background-position: right 48% center;
    }
    #front #mainView .mvTxt{
        text-align:center;
        padding: 1rem 0;
    }
    #front #mainView .mvTxt .pr{
        max-width: 100%;
    }
    #front #mainView .mvTxt a.tel{
        max-width: 80%;
        margin: 0 auto;
    }
    #front #mainView .imgBox{
        margin: 0 auto;
    }
    #front #mainView .poingFlex{
        width: 98%;
    }
    #front #mainView .poingFlex li i{
        font-size: 90%;
    }
    #front #mainView .poingFlex li p{
        font-size: 100%;
    }
    #front #menu{
        padding: 4rem 1rem 1rem 1rem;
    }
    #front #menu ul li{
        width: 49%;
    }
    #front #lawyer .boxFlex{
        display:block;
    }
    #front #lawyer .boxFlex .leftWrap{
        width: 50%;
        margin: 2rem auto 1rem auto;
    }
    #front #lawyer .boxFlex .rightWrap .name,#front #lawyer .boxFlex .rightWrap .comment{
        text-align:center;
    }
    #front #fee ul{
        display:block;
    }
    #front #fee ul li{
        margin-bottom:1rem;
    }
    #front #fee ul li .title{
        font-size: 170%;
    }
    #front #fee ul li .comment{
        padding-bottom: 0;
        margin-bottom: 0;
    }

}

@media (max-width: 680px) {

    #front #mainView .emLabel{
        padding: 20px;
    }
    #front #mainView .poingFlex{
        flex-wrap:wrap;
        border-radius: 0;
        position: relative;
        width: 100%;
        bottom: 0;
    }
    #front #mainView .poingFlex li{
        width:50%;
    }
    #front #mainView .poingFlex li:after{
        display:none;
    }
    #front #mainView .mvTxt a.tel{
        max-width:100%;
    }
    #front #situation{
        padding: 2rem 1rem 3rem 1rem;
    }
    #front #point ul{
        margin: 4rem 0 2rem 0;
    }
    #front #point ul li p.title{
        font-size: 130%;
    }


}

@media (max-width: 600px) {
    #front .underlayerWrapper.double{
        padding: 10px;
    }
    #front a.arrowLink{
        width:100%;
    }
    #front .cmHd{
        line-height: 130%;
    }
    #front .brk600{
        display:block;
    }
    #front #mainView .pcVer{
        display:none;
    }
    #front #mainView .spVer{
        display:block;
    }
    #front #mainView a.tel{
        border-radius: 0;
    }
    #front #mainView .emLabel{
        font-size: 110%;
    }
    #front #point ul li{
        width:100%;
    }
    #front #solve ul li{
        width: 100%;
    }
}

@media (max-width: 500px) {

    #front a.arrowLink{
        font-size: 90%;
    }
    #front a.arrowLink .arrow::after{
        width: 27px;
        height: 6px;
    }
    #front #situation ul li{
        width:100%;
    }
    #front #menu ul li a{
        font-size: 90%;
    }

}

@media (max-width: 450px) {

    #front .cmHd{
        line-height: 130%;
    }
    #front .cmDeco{
        font-size: 85%;
    }
    #front #mainView a.tel{
        display: block;
        text-align: center;
    }
    #front #mainView a.tel .label{
        margin: 1rem 0 0 0;
    }
    #front #fee ul li .title{
        font-size: 140%;
        line-height: 160%;
    }
    #front #lawyer .boxFlex .rightWrap ul li{
        font-size: 100%;
    }
}


@media (max-width: 380px) {


}