@charset "UTF-8";

/*------------------------------------------------------------
  common
------------------------------------------------------------*/
#front .cmHd{
    position: relative;
    text-align: center;
    font-weight: 500;
    font-size: 250%;
    margin: 2rem 0;
}
#front .cmHd span{
    position: absolute;
    font-family: 'Noto Sans JP', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Arial, "MS P Gothic", "MS Pゴシック", sans-serif;
    color: #00956e;
    font-size: 30%;
    left: 0;
    right: 0;
    margin: auto;
    top: -40px;
    letter-spacing: 0.2rem;
}


/*------------------------------------------------------------
  mainView
------------------------------------------------------------*/
#front #mainView{
    background: #00956e;
    padding: 1rem;
    border-bottom: 25px solid #00805e;
}
#front #mainView .mvFlex{
    gap: 1%;
}
#front #mainView .leftWrap{
    flex:1;
    background: url(../img/index/mvLedtBg.jpg) no-repeat;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    position:relative;
}
#front #mainView .leftWrap .inner{
    position: absolute;
    width: 45vw;
    height: 280px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
#front #mainView .leftWrap .pr{
    color: #FFF;
    font-size: 150%;
    font-weight: 700;
    text-shadow: 0 0 5px #0000004a;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 15px 10px 10px 10px;
    margin: 0;
}
#front #mainView .leftWrap .pr span{
    font-size: 200%;
}
#front #mainView .leftWrap h2{
    color: #FFF;
    font-size: 220%;
    font-weight: 700;
    text-shadow: 0 0 5px #0000004a;
}
#front #mainView .leftWrap .ms{
    color: #FFF;
    font-size: 120%;
    font-weight: 700;
    text-shadow: 0 0 5px #0000004a;
}
#front #mainView .rightWrap{
    flex:1;
    border-radius: 10px;
    overflow: hidden;
}

/*------------------------------------------------------------
  service
------------------------------------------------------------*/
#front #service {
    background:#ddece9;
    padding:6rem 1rem;
}
#front #service ul{
    flex-wrap: wrap;
    gap: 2%;
    justify-content:center;
    margin: 3rem 0;
}
#front #service ul li{
    width: 49%;
    background: url(../img/index/sv1.jpg) no-repeat;
    background-size: cover;
    padding: 2rem;
    margin-bottom: 1.5rem;
    color: #FFF;
}
#front #service ul li:nth-of-type(2){
    background: url(../img/index/sv2.jpg) no-repeat;
    background-size: cover;
}
#front #service ul li:nth-of-type(3){
    background: url(../img/index/sv3.jpg) no-repeat;
    background-size: cover;
}
#front #service ul li:nth-of-type(4){
    background: url(../img/index/sv4.jpg) no-repeat;
    background-size: cover;
}
#front #service ul li h3{
    text-align: center;
    font-size: 160%;
    font-weight: 600;
}
#front #service ul li a{
    padding: 8px;
    margin: 2rem auto 0 auto;
}


/*------------------------------------------------------------
  point
------------------------------------------------------------*/
#front #point {
    padding:6rem 1rem; 
}
#front #point ul{
    margin: 5rem 0;
}
#front #point ul li{
    flex-direction: row-reverse;
    gap: 2%;
    margin: 3rem 0;
}
#front #point ul li.rev{
    flex-direction: row;
}
#front #point .txtWrap{
    flex: 2.5;
}
#front #point .txtWrap h3{
    font-size: 160%;
    font-weight: 600;
}
#front #point .txtWrap h3 span{
    color: #00956e;
    border: 2px solid;
    padding: 0 10px;
    margin-right: 10px;
}
#front #point .txtWrap p{
    font-size: 95%;
    line-height: 200%;
}
#front #point .imgWrap{
    flex: 1;
}

/*------------------------------------------------------------
  solveCase
------------------------------------------------------------*/
#front #solveCase {
    background:#ddece9;
    padding:6rem 1rem;
}
#front #solveCase ul{
    flex-wrap:wrap;
    gap:2%;
    margin: 5rem 0;
}
#front #solveCase ul li{
    width: 48%;
    margin-bottom: 2rem;
}
#front #solveCase ul li h3{
    background: #00956e;
    color: #FFF;
    font-weight: 700;
    text-align: center;
    padding: 10px;
    border-radius: 10px 10px 0 0;
}
#front #solveCase ul li dl{
    background: #FFF;
    padding: 2rem;
    border-radius: 0 0 10px 10px;
    min-height: 290px;
}
#front #solveCase ul li dl dt{
    font-size: 120%;
    font-weight: 600;
}
#front #solveCase ul li dl dt img.circle,#front #solveCase ul li dl dt img.user{
    width: 30px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
#front #solveCase ul li dl dd{
    font-size: 95%;
    padding: 10px 0 20px 0;
}



/*------------------------------------------------------------
  flow
------------------------------------------------------------*/
#front #flow {
    padding:6rem 1rem;   
}
#front #flow ul{
    margin: 5rem 0;
}
#front #flow ul li{
    border-bottom: 1px solid #ccc;
    margin-bottom: 3rem;
}
#front #flow ul li:last-child{
    border:none;
}
#front #flow ul li h3{
    font-weight: 600;
    font-size: 150%;
}
#front #flow ul li h3 img{
    width: 40px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px; 
}
#front #flow ul li p{
    margin: 1rem 0 2rem 0;
    line-height: 200%;
}

/*------------------------------------------------------------
  fee
------------------------------------------------------------*/
#front #fee {
    background:#ddece9;
    padding:6rem 1rem; 
}
#front #fee .pr{
    color: #00956e;
    text-align: center;
    font-weight: 700;
    font-size: 140%;
    background: #FFF;
    border: 3px solid;
    padding: 8px;
    border-radius: 10px;
    margin-top: 4rem;
}
#front #fee ul{
    gap: 2%;
    margin: 4rem 0;
}
#front #fee ul li{
    flex: 1;
}
#front #fee h3{
    background: #00956e;
    color: #FFF;
    font-weight: 700;
    text-align: center;
    padding: 10px;
    border-radius: 10px 10px 0 0;
}
#front #fee .inner{
    background: #FFF;
    padding: 2rem;
    border-radius: 0 0 10px 10px;
    min-height: 170px;
}
#front #fee p{
    margin:0;
}
#front #fee li.kommon h3{
    background: #007cbe;
}
#front #fee li.kommon p.num{
    text-align: center;
    color: #007cbe;
    font-weight: 700;
    font-size: 140%;
}
#front #fee li.kommon p.num span{
    font-size: 230%;
}


/*------------------------------------------------------------
  column
------------------------------------------------------------*/
#front #column {
    padding:6rem 1rem;
}
#front #column .listFlex{
    gap: 2%;
}
#front #column .listFlex .innerWrap{
    border: 3px solid #007cbe;
    padding: 2rem;
    border-radius: 10px;
}
#front #column .listFlex .leftWrap,
#front #column .listFlex .rightWrap{
    flex:1;
}
#front #column .listFlex .rightWrap a.cmLink{
    background: #00956e;
}
#front #column .listFlex ul li{
    position: relative;
    font-weight: 500;
    padding: 10px 10px 10px 40px;
    border-bottom: 1px dotted #ccc;
}
#front #column .listFlex ul li::before{
    content: "";
    position: absolute;
    background: url(../img/common/circle-B.png) no-repeat;
    background-size: cover;
    width: 25px;
    height: 25px;
    left: 0;
}
#front #column .listFlex .rightWrap .innerWrap{
    border: 3px solid #00956e;
    padding: 2rem;
    border-radius: 10px;
}
#front #column .listFlex .rightWrap ul li::before{
    position:absolute;
    background: url(../img/common/circle-G.png) no-repeat;
    background-size: cover;
}
#front #column .listFlex .nado{
    text-align:right;
}
#front #column .cmLink span.arrow{
    right: 9%;
}

/*------------------------------------------------------------
  message
------------------------------------------------------------*/
#front #message {
    background:#ddece9;
    padding:6rem 1rem;
}
#front #message .flex{
    gap: 3%;
    margin: 3rem 0;
}
#front #message .leftWrap{
    flex: 2.5;
}
#front #message .leftWrap p{

}
#front #message .rightWrap{
    flex: 1;
}
#front #message .rightWrap .name{
    text-align: center;
}
#front #message .rightWrap .name span{
    font-size: 150%;
}

@media (max-width: 1200px) {
    #front #mainView .leftWrap .pr{
        font-size: 110%;
    }
    #front #mainView .leftWrap h2{
        font-size: 180%;
    }
    #front #mainView .leftWrap .ms{
        font-size: 100%;
    }
}
@media (max-width: 1056px) {

    #front #mainView .leftWrap h2{
        font-size: 160%;
    }
    #front #mainView .leftWrap .inner{
        height: 220px;
    }
    #front #mainView .leftWrap .ms{
        font-size: 90%;
    }

}

@media (max-width: 1099px) {
    #front .underlayerWrapper.double{
        padding: 10px;
    }
    #front #service ul li h3{
        font-size: 140%;
    }
    #front #solveCase ul li dl{
        min-height: 33vw;
    }
    #front #fee .inner{
        min-height: 23vw;
    }
    #front #fee li.kommon p.num{
        font-size: 110%;
        margin: 2rem 0;
    }
}

@media (max-width: 950px) {

    #front #mainView .mvFlex{
        display: block;
    }
    #front #mainView .leftWrap .inner{
        position: relative;
        width: 90%;
        padding: 2rem 0 1rem 0;
        height: auto;
        margin: 0 auto;
    }
    #front #mainView .rightWrap{
        margin: 1rem 0 0 0;
    }
    #front #service ul li{
        padding: 30px 20px;
    }
    #front #service ul li h3{
        font-size: 120%;
    }

}

@media (max-width: 800px) {

    #front #service ul{
        display: block;
    }
    #front #service ul li{
        width: 100%;
    }
    #front #service ul{
        width: 100%;
    }
    #front #point ul li{
        display: block;
        margin: 0 0 5rem 0;
    }
    #front #point .imgWrap img{
        width: 60%;
        margin: 0 auto;
    }
    #front #solveCase ul{
        display:block;
    }
    #front #solveCase ul li{
        width: 100%;
    }
    #front #solveCase ul li dl{
        min-height:auto;
    }
    #front #fee ul{
        display: block;
    }
    #front #fee ul li{
        margin: 1rem 0;
    }
    #front #fee .inner{
        min-height: auto;
    }
    #front #column .listFlex{
        display:block;
    }
    #front #column .listFlex .leftWrap, #front #column .listFlex .rightWrap{
        margin-bottom: 2rem;
    }
    #front #message .flex{
        display:block;
    }
    #front #message .rightWrap{
        width: 60%;
        margin: 5rem auto 0 auto;
    }


}

@media (max-width: 600px) {

    #front .cmHd{
        font-size: 180%;
    }
    #front .cmHd span{
        top: -30px;
    }
    #front .underlayerWrapper.double{
        padding: 10px;
    }
    #front #mainView .leftWrap h2{
        line-height: 130%;
        padding: 1rem 0 0 0;
    }
    #front #mainView .break{
        display:block;
    }
    #front #mainView .leftWrap .pr{
        font-size: 150%;
    }
    #front #mainView .leftWrap .pr span{
        font-size: 190%;
        display: block;
        margin: 0 0 7px 0;
    }
    #front #service,#front #point,#front #solveCase,
    #front #flow,#front #message,#front #column,#front #fee{
        padding: 4rem 0;
    }
    #front #service ul li h3{
        font-size: 140%;
    }
    #front #point .txtWrap h3 span{
        display: block;
        text-align: center;
        margin-bottom: 10px;
    }
    #front #point .txtWrap h3{
        font-size: 140%;
    }
    #front #point .imgWrap img{
        width: 80%;
        margin: 3rem auto;
    }
    #front #solveCase ul{
        margin: 3rem 0;
    }
    #front #flow ul{
        margin: 3rem 0;
    }
    #front #fee ul{
        margin: 2rem 0;
    }
    #front #fee .pr{
        font-size: 110%;
    }
    #front #column .listFlex{
        margin: 4rem 0 0 0;
    }
    #front #message .rightWrap{
        width: 100%;
        margin: 2rem auto 0 auto;
    }

}


@media (max-width: 390px) {

    #front #service ul li h3{
        font-size: 120%;
    }
    #front #point ul{
        margin: 3rem 0;
    }
    #front #fee li.kommon p.num{
        font-size: 100%;
    }

}