@charset "UTF-8";

/*------------------------------------------------------------
  common
------------------------------------------------------------*/
#front .cmHd{
    position: relative;
    font-family: 'Noto Serif JP', "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-align: center;
    font-size: 210%;
    font-weight: 700;
    margin-bottom: 5rem;
}
#front .cmHd::before{
    content:"";
    width:50px;
    height:1px;
    background:#000;
    position:absolute;
    bottom:-20px;
    left:0;
    right:0;
    margin:auto;
}
#front img{
    width:100%;
}
#front .moreLink{
    background: #31a66e;
    color: #FFF;
    text-align: center;
    display: block;
    width: 50%;
    border-radius: 20px;
    margin: 4rem auto 0 auto;
    padding: 1rem;
    font-size: 150%;
    font-weight: 600;
}
#front .moreLink .arrow {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 20px;
}

#front .moreLink .arrow::before,
#front .moreLink .arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    right: 0;
    width: 14px;
    height: 4px;
    border-radius: 9999px;
    background-color: #ffffff;
    transform-origin: calc(100% - 2px) 50%;
}

#front .moreLink .arrow::before {
  transform: rotate(45deg);
}

#front .moreLink .arrow::after {
  transform: rotate(-45deg);
}

/*------------------------------------------------------------
  mainView
------------------------------------------------------------*/
#front #mainView{
    background: url(../img/index/mvBg.jpg) no-repeat;
    background-size: cover;
    padding: 3rem 0 0 0;
}
#front #mainView .flex{

}
#front #mainView .leftWrap{
    flex: 1.3;
}
#front #mainView h2{
    font-size:260%;
    font-weight:700;
    line-height:140%;
    margin-top: 2rem;
}
#front #mainView .pointFlex{
    gap: 1%;
    margin: 1rem 0;
}
#front #mainView .pointFlex li{
    color: #31a66e;
    font-size: 120%;
    font-weight: 500;
    text-align: center;
    background: #FFF;
    padding: 6px 13px;
    border-radius: 10px;
    border: 2px solid;
}
#front #mainView .ctFlex{

}
#front #mainView .ctFlex li{
    flex:1;
}
#front #mainView .ctFlex li.tel{
    margin: 2.5rem 0;
    flex:1;
}
#front #mainView .ctFlex li.mail{
    flex:1.2;
}
#front #mainView .tips{
    font-size: 80%;
    margin: 0;
    line-height: 100%;
    font-weight: 600;
}
#front #mainView .rightWrap{
    flex:1;
}
#front #mainView .rightWrap img{
    position:relative;
    z-index:2;
}

/*------------------------------------------------------------
  intro
------------------------------------------------------------*/
#front #intro{
    padding:4rem 0;
    background:url(../img/common/indBg.jpg) no-repeat;
    background-size:cover;
    position:relative;
    z-index:1;
    margin-top: -3.3rem;
    padding-bottom: 11.3rem;
}
#front #intro .cmHd{
    color:#FFF;
}
#front #intro .cmHd::before{
    background:#FFF;
}
#front #intro .leftWrap{
    flex:1.5;
}
#front #intro ul{

}
#front #intro ul li{
    position: relative;
    background: #FFF;
    padding: 15px 15px 15px 50px;
    border-radius: 10px;
    font-size: 130%;
    font-weight: 700;
    margin-bottom: 20px;
}
#front #intro ul li:before{
    content: "";
    background: url(../img/index/icon-memo.png) no-repeat;
    background-size: cover;
    width: 27px;
    height: 36px;
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 0;
    margin: auto;
}
#front #intro .rightWrap{
    flex:1;
}
#front #intro .rightWrap img{
    width: 83%;
    margin: 0 3rem;
}

/*------------------------------------------------------------
  point
------------------------------------------------------------*/

#front #point .addSoudan{
    box-shadow: 0 0 20px #cccccc6b;
    background: #ffffffb8;
    padding: 2rem 4rem;
    border-radius: 20px;
    margin: 0rem 0 5rem 0;
}
#front #point .addSoudan h2{
    text-align: center;
    font-size: 170%;
    font-weight: 700;
    color:#8c141d;
}
#front #point .addSoudan p{
    font-weight: 600;
}
#front #point .addSoudan p a{
    color:#8c141d;
    font-weight:bold; 
}
#front #point .addSoudan .tg{
    border: 1px solid;
    padding: 0 2rem;
    margin: 2rem 0 1rem 0;
}
#front #point .addSoudan .tg h3{
    text-align:center;
    border-bottom:1px solid;
    font-weight: 600;
}
#front #point .addSoudan .tg p{
    text-align:center;
}
#front #point .addSoudan a.btn{
    background: #ffd339;
    color: #8c141d;
    display: block;
    font-weight: 700;
    text-align: center;
    font-size: 130%;
    padding: 10px;
    border-radius: 80px;
    margin: 1rem 0 0 0;
}


#front #point{
    padding:6rem 0;
    background:url(../img/index/reasonBg.jpg) no-repeat;
    background-size:cover;
    position:relative;
    z-index:2;
    margin-top:-5rem;
}
#front #point .ct{
    position: relative;
    z-index: 3;
    width: 70%;
    margin: -11rem auto 0 auto;
    display: block;
}
#front #point ul{
    gap:3%;
}
#front #point ul li{
    flex: 1;
    background: #FFF;
    border-radius: 20px;
    padding: 5rem 2rem 2rem 2rem;
    position:relative;
    box-shadow: 0 0 20px #cccccc6b;
}
#front #point ul li img{
    position: absolute;
    width: 100px;
    height: 100px;
    top: -40px;
    left: 0;
    right: 0;
    margin: auto;
}
#front #point ul li h3{
    font-weight: 700;
    font-size: 160%;
    text-align: center;
}
#front #point ul li h3.ad{
    padding: 21px;
}


/*------------------------------------------------------------
  message
------------------------------------------------------------*/
#front #message{
    padding:4rem 0;
    background:url(../img/index/flowBg.jpg) no-repeat;
    background-size:cover;
}
#front #message .flex{
    flex-direction: row-reverse;
    gap: 8%;
}
#front #message .leftWrap{

}
#front #message h3{
    text-align: center;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 10px;
    font-size: 160%;
    font-weight: 600;
}
#front #message p{
    font-size: 110%;
    line-height: 200%;
}
#front #message .rightWrap{

}



/*------------------------------------------------------------
  service
------------------------------------------------------------*/
#front #service{
    padding:4rem 0;
    background:url(../img/index/reasonBg.jpg) no-repeat;
    background-size:cover;
}
#front #service ul{
    flex-wrap:wrap;
    gap:3%;
}
#front #service ul li{
    width: 31%;
    margin-bottom: 1rem;
    background: #FFF;
    padding: 1rem;
    border-radius: 20px;
    box-shadow: 0 0 20px #cccccc6b;
}
#front #service ul li h3{
    text-align: center;
    font-weight: 700;
    padding: 10px 0;
}
#front #service ul li p{
    margin:0;
}

/*------------------------------------------------------------
  solveCase
------------------------------------------------------------*/
#front #solveCase{
    padding:4rem 0;
    background:#fcf7e1;
}
#front #solveCase .flex{
    gap:3%;
    justify-content:center;
}
#front #solveCase .solveCaseContent{
    border:none;
    box-shadow: 0 0 20px #cccccc6b;
}
#front #solveCase .solveCaseContent .categoly a{
    background: #31a66e;
    color: #FFF;
    font-weight: 600;
    padding: 1px 10px;
}
#front #solveCase .solveCaseContent .title{
    font-weight: 700;
    font-size: 130%;
    line-height: 130%;
    margin: 10px 0;
}
#front #solveCase .solveCaseContent .comment p{
    margin: 0;
}
#front #solveCase .solveCaseContent .more{
    color: #31a66e;
    font-weight: 600;
    display: block;
    margin: 0 0 0 auto;
    width: 100px;
    font-size: 95%;
}

/*------------------------------------------------------------
  flow
------------------------------------------------------------*/
#front #flow{
    padding:4rem 0;
    background:url(../img/index/flowBg.jpg) no-repeat;
    background-size:cover;
}
#front #flow ul{
    gap:3%;
    margin: 10rem 0 6rem 0;
    position: relative;
}
#front #flow ul:after{
    content: "";
    width: 100%;
    height: 21px;
    background: #31a66e;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index:0;
}
#front #flow ul li{
    flex: 1;
    background: #FFF;
    border-radius: 20px;
    padding: 5rem 2rem 2rem 2rem;
    position:relative;
    z-index:1;
    box-shadow: 0 0 20px #cccccc6b;
}
#front #flow ul li img{
    position: absolute;
    width: 100px;
    height: 100px;
    top: -40px;
    left: 0;
    right: 0;
    margin: auto;
}
#front #flow ul li h3{
    font-weight: 700;
    font-size: 160%;
    text-align: center;
}

@media (max-width: 1200px) {

    #front #mainView .pcBr{
        display:none;
    }
    #front #mainView .pointFlex li{
        font-size: 100%;
    }
    #front #mainView .leftWrap{
        flex: 1.6;
    }
    #front #intro{
        margin-top: -0.3rem;
    }
    #front #mainView .tips{
        padding-bottom: 3rem;
    }
}

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


@media (max-width: 970px) {

    #front #mainView .contentWrapper{
        display:block;
    }
    #front #mainView h2{
        text-align:center;
    }
    #front #mainView .pcBr{
        display:block;
    }
    #front #mainView .pointFlex{
        justify-content: center;
    }
    #front #mainView .tips{
        text-align:center;
    }
    #front #mainView .rightWrap{
        width: 70%;
        margin: 0 auto;
    }
    #front #intro{
        margin-top: -4.3rem;
    }
    #front #intro .flex{
        display: block;
    }
    #front #intro .rightWrap{
        width: 60%;
        margin: 0 auto;
    }
    #front #point .addSoudan{
        padding: 2rem 2rem;
    }
    #front #point .addSoudan .tbBreak{
        display:block;
    }
    #front #point .addSoudan a.btn{
        font-size:100%;
    }
}


@media (max-width: 700px) {

    #front .moreLink{
        width:100%;
    }
    #front #point .cmHd{
        margin-top: 3rem;
    }
    #front #point ul{
        display:block;
    }
    #front #point ul li{
        margin-bottom: 2rem;
    }
    #front #message .flex{
        display:block;
    }
    #front #message .rightWrap{
        width: 50%;
        margin: 4rem auto;
    }
    #front #line ul{
        display:block;
    }
    #front #service ul li{
        width: 48%;
    }
    #front #solveCase .flex{
        display: block;
    }
    #front #flow ul{
        display:block;
    }
    #front #flow ul li{
        margin-bottom: 1rem;
    }
    #front #flow ul:after{
        display:none;
    }

}

@media (max-width: 600px) {
    #front .underlayerWrapper.double{
        padding: 10px;
    }
    #front .moreLink{
        font-size: 110%;
    }
    #front .moreLink .arrow{
        height: 12px;
    }
    #front .moreLink .arrow::before, #front .moreLink .arrow::after{
        height: 4px;
    }
    #front p{
        font-size:95%;
    }
    #front .cmHd{
        font-size: 160%;
    }
    #front #mainView h2{
        font-size: 190%;
    }
    #front #mainView .pointFlex{
        display:block;
    }
    #front #mainView .pointFlex li{
        margin-bottom: 6px;
    }
    #front #mainView .tips{
        padding-bottom: 1rem;
    }
    #front #mainView .rightWrap{
        width: 80%;
    }
    #front #intro .cmHd{
        margin-top: 3rem;
    }
    #front #intro ul li{
        font-size: 100%;
    }
    #front #intro .rightWrap{
        width: 90%;
    }
    #front #point .ct{
        width:100%;
    }
    #front #point ul li h3{
        font-size: 120%;
    }
    #front #message h3{
        font-size: 120%;
    }
    #front #message p{
        font-size: 100%;
    }
    #front #service{
        padding: 4rem 0;
    }
    #solveCase .solveCaseContent{
        padding: 1rem;
    }
    #front #flow ul{
        margin: 6rem 0 0rem 0;
    }
    #front #flow ul li h3{
        font-size: 130%;
    }

}


@media (max-width: 480px) {

    #front .cmHd{
        font-size: 140%;
    }
    #front .contentWrapper{
        width:95%;
    }
    #front #mainView .spBr{
        display:block;
    }
    #front #mainView h2{
        margin-top: 0rem;
        font-size: 170%;
    }
    #front #mainView .ctFlex{
        display: block;
        width: 80%;
        margin: 0 auto;
    }
    #front #mainView .ctFlex li.tel{
        margin: 0;
    }
    #front #mainView .tips{
        font-size: 70%;
    }
    #front #mainView .rightWrap{
        width: 100%;
    }
    #front #intro ul li{
        font-size: 80%;
        margin-bottom: 10px;
    }
    #front #point .ct{
        margin: -9rem auto 0 auto;
    }
    #front #intro .rightWrap{
        width: 100%;
        margin-top: 2rem;
    }
    #front #point .addSoudan h2{
        font-size: 140%;
        line-height: 130%;
    }
    #front #point .addSoudan .tg{
        padding: 10px;
    }
    #front #message .rightWrap{
        width: 70%;
    }
    #front #service ul{
        display:block;
    }
    #front #service ul li{
        width:100%;
    }
    #front #solveCase .solveCaseContent{
        padding:1.5rem;
    }
    #front #solveCase .solveCaseContent .title{
        font-size: 100%;
    }

}