@charset "UTF-8";

/*------------------------------------------------------------
  common
------------------------------------------------------------*/
#front .cmHd{
    position: relative;
    text-align: center;
    font-size: 220%;
    line-height: 130%;
    font-weight: 600;
    margin: 2rem 0 4rem 0;
}
#front .cmHd:after{
    content:"";
    width:50px;
    height:5px;
    background:#47b562;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    bottom: -19px;
}
#front .arrowLink{
    background: #48b562;
    color: #FFF;
    text-decoration: none;
    font-size: 150%;
    font-weight: 500;
    text-align: center;
    width: 60%;
    border-radius: 80px;
    padding: 1rem;
    display: block;
    margin: 1rem auto;
}
#front .caution{
    text-align: center;
    display: block;
    width: 100%;
}

/*------------------------------------------------------------
  mainView
------------------------------------------------------------*/
#front #mainView{
    background: url(../img/index/bghougan.jpg) no-repeat;
    background-size: cover;
    padding: 10rem 1rem 1rem 1rem;
}
#front #mainView h2{
    text-align: center;
    font-size: 260%;
    line-height: 194%;
    font-weight: 700;
    letter-spacing: 0.2rem;
}
#front #mainView h2 span.bg{
    background: #FFF;
    box-shadow: 7px 7px 10px #00000047;
    padding: 5px 1rem;
}
#front #mainView h2 span.gr{
    color: #47b562;
}
#front #mainView h2 span.or{
    color:#eb6100;
}
#front #mainView .pr{
    text-align: center;
    font-size: 170%;
    font-weight: 700;
    line-height: 180%;
    margin: 1.5rem 0;
}
#front #mainView .pr span{
    position: relative;
}
#front #mainView .pr span:before{
    content: "";
    background: #f1b11c;
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: -1px;
    display: block;
    left: 0;
    right: 0;
    margin: auto;
}
#front #mainView .contactFlex{
    gap: 3%;
    position:relative;
    z-index:2;
    justify-content:center;
}
#front #mainView a.mail{
    width: 400px;
    background: #47b562;
    color: #FFF;
    text-align: center;
    font-weight: 700;
    border-radius: 80px;
    padding: 20px 0;
    font-size: 170%;
}
#front #mainView a.mail img{
    width: 90%;
    margin: 0 auto;
}
#front #mainView a.tel{
    width: 400px;
    background: #f1b11c;
    color: #FFF;
    text-align: center;
    font-weight: 700;
    border-radius: 80px;
    padding: 5px;
    font-size: 200%;
}
#front #mainView a.tel span{
    font-size: 50%;
}
#front #mainView .decoImg{
    width: 100%;
    margin: -2rem auto 0 auto;
    position: relative;
    z-index: 1;
}
#front #mainView .tbbreak{
    display:none;
}

/*------------------------------------------------------------
  reason
------------------------------------------------------------*/
#front #reason{
    background: #f1f9ea;
    padding: 8rem 1rem 4rem 1rem;
    margin-top: -8rem;
}
#front #reason ul{
    justify-content: center;
    gap: 2%;
}
#front #reason ul li{
    flex: 1;
    background: #FFF;
    border: 4px solid #46b562;
    padding: 1rem;
    border-radius: 20px;
    position:relative;
}
#front #reason ul li h3{
    color: #48b562;
    text-align: center;
    font-weight: 700;
    font-size: 150%;
    line-height: 130%;
}
#front #reason ul li h3.aj{
    padding-top: 19px;
    padding-bottom: 10px;
}
#front #reason ul li p{
    text-align: center;
}
#front #reason ul li i{
    font-style: normal;
    background: #46b562;
    color: #FFF;
    text-align: center;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 80px;
    position: absolute;
    line-height: 120%;
    left: 0;
    right: 0;
    margin: auto;
    width: 83%;
    font-size: 90%;
}


/*------------------------------------------------------------
  message
------------------------------------------------------------*/
#front #message{
    padding: 4rem 1rem;
}
#front #message .contentWrapper{
    position:relative;
}
#front #message h2{
    margin-bottom: 9rem;
}
#front #message .lwimg{
    position: absolute;
    z-index: 1;
    width: 300px;
    left: 6%;
    top: 35%;
}
#front #message .msgWrap{
    width: 70%;
    margin: 0 0 0 auto;
    background: #FFF;
    border: 4px solid #46b562;
    padding: 4% 10%;
    border-radius: 20px;
    position: relative;
}
#front #message .msgWrap h3{
    font-size: 170%;
    line-height: 140%;
    font-weight: 700;
}
#front #message .msgWrap p{
    font-size: 110%;
}
#front #message .msgWrap p.name{
    font-size: 150%;
    font-weight: 700;
    text-align: right;
}
#front #message .msgWrap p.name span{
    font-size: 80%;
    margin-right: 17px;
}

/*------------------------------------------------------------
  service
------------------------------------------------------------*/
#front #service{
    padding: 4rem 1rem;
}
#front #service .contentWrapper{
    background: url(../img/index/bghougan.jpg) no-repeat;
    background-size: cover;
    position:relative;
    padding: 5rem 0;
    box-shadow: 0 0 10px #00000029;
    border-radius: 40px;
}
#front #service h2{
    background: #47b562;
    color: #FFF;
    font-size: 180%;
    text-align: center;
    font-weight: 700;
    line-height: 130%;
    padding: 1rem;
    width: 70%;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: -50px;
}
#front #service ul{
    gap:3%;
    flex-wrap:wrap;
}
#front #service ul li{
    width:48%;
}
#front #service ul li a.arrowLink{
    width:100%;
    color:#222;
    background:#FFF;
    border:2px solid;
    border-radius: 20px;
}
#front #service .upperFlex{
    width: 90%;
    justify-content: center;
    margin: 2rem auto 0 auto;
}
#front #service ul.upperFlex li a.arrowLink{
    color: #eb6100;
}
#front #service .upperFlex .arrowLink .arrow {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
}
#front #service .upperFlex .arrowLink .arrow::before,
#front #service .upperFlex .arrowLink .arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: -20px;
  width: 12px;
  height: 2px;
  border-radius: 9999px;
  background-color: #eb6100;
  transform-origin: calc(100% - 0px) 50%;
}
#front #service .bottomFlex{
    width: 90%;
    justify-content: center;
    margin:0 auto;
}
#front #service ul.bottomFlex li a.arrowLink{
    font-size: 130%;
}
#front #service .bottomFlex .arrowLink .arrow {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
}
#front #service .bottomFlex .arrowLink .arrow::before,
#front #service .bottomFlex .arrowLink .arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: -20px;
  width: 12px;
  height: 2px;
  border-radius: 9999px;
  background-color: #000;
  transform-origin: calc(100% - 0px) 50%;
}





/*------------------------------------------------------------
  solveCase
------------------------------------------------------------*/
#front #solveCase{
    background: #f1f9ea;
    padding: 4rem 1rem;
}
#front #solveCase .caseImg{
    width:100%;
    margin-bottom:1rem auto;
}
#front  #solveCase .ctFlex{
    gap:3%;
    margin:2rem 0;
}
#front  #solveCase .wpContent .solveCaseContent{
    box-shadow: 0 0 10px #00000029;
    border-radius: 20px;
    padding: 10px;
}
#front .dccs .categoly a{
    background: #47b562;
    color: #FFF;
    border: none;
    display: block;
    font-size: 90%;
}
#front  #solveCase .solveCaseContent .txtWrapper .title{
    display: block;
    margin: 10px 0;
}
#front  #solveCase .solveCaseContent p{
    margin: 0;
}
#front  #solveCase .arrowLink{
    background:#f1b11c;
}


/*------------------------------------------------------------
  flow
------------------------------------------------------------*/
#front #flow{
    padding: 4rem 1rem;
}
#front #flow ul.ctFlex{
    flex-wrap: wrap;
    gap: 3%;
}
#front #flow ul li.inFlex{
    gap: 3%;
    width: 48%;
    background: #f9fcfd;
    border: 2px solid #46b562;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 20px;
}
#front #flow ul .imgWrap{
    flex: 1;
}
#front #flow ul .imgWrap img{
    width:100%;
}
#front #flow ul .txtWrap{
    flex: 5;
}
#front #flow ul .txtWrap h3{
    color: #46b562;
    font-weight: 700;
    font-size: 160%;
}
#front #flow ul .txtWrap p{
    margin: 0;
    font-weight: 500;
}


/*------------------------------------------------------------
  column
------------------------------------------------------------*/
#front #column{
    background: #fdfae7;
    padding: 4rem 2rem 7rem 2rem;
}
#front #column .contentWrapper{
    background: #FFF;
    border-radius: 20px;
    padding: 2rem;
    position: relative;
}
#front #column .arrowLink{
    position: absolute;
    width: 410px;
    left: 0;
    right: 0;
    bottom: -47px;
}

@media (max-width: 1200px) {

    #front #mainView h2{
        font-size: 190%;
    }
    #front #mainView .pr{
        font-size: 150%;
    }
}

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

@media (max-width: 990px) {

    #front #mainView .pcMode{
        display:none;
    }
    #front #mainView .tbbreak{
        display:block;
    }
    #front #message h2{
        margin-bottom: 4rem;
    }
    #front #message .lwimg{
        position: relative;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 0;
    }
    #front #message .msgWrap{
        width: 100%;
        margin: 1rem auto;
    }
    #front #reason ul{
        display:block;
    }
    #front #reason ul li{
        margin-bottom: 1rem;
    }
    #front #reason ul li h3.aj{
        padding:0;
    }
    #front #flow ul.ctFlex{
        display:block;
    }
    #front #flow ul li.inFlex{
        width:100%;
    }
    #front #flow ul .txtWrap{
        flex: 11;
    }
    #front #mainView a.mail,#front #mainView a.tel{
        margin: 5px auto;
        display: block;
    }

}

@media (max-width: 600px) {
    #front .cmHd{
        margin: 2rem 0 3rem 0;
        line-height: 130%;
    }
    #front .underlayerWrapper.double{
        padding: 10px;
    }
    #front #mainView .contactFlex{
        display:block;
    }
    #front #service h2{
        width: 90%;
    }
    #front #service .upperFlex,#front #service .bottomFlex{
        display:block;
    }
    #front #service ul li{
        width:100%;
    }
    #front #solveCase{
        padding: 1rem 1rem;
    }
    #front #solveCase .ctFlex{
        display:block;
    }
    #front #column .arrowLink{
        bottom: -87px;
    }

}


@media (max-width: 450px) {

    #front .cmHd{
        font-size: 140%;
    }
    #front #mainView a.mail,#front #mainView a.tel,#front #column .arrowLink{
        width:100%;
    }
    #front #mainView{
        padding: 6rem 1rem 1rem 1rem;
    }
    #front #mainView .contentWrapper{
        padding: 0;
    }
    #front #mainView h2{
        font-size: 137%;
        letter-spacing: 0;
        line-height: 190%;
    }
    #front #mainView h2 span.bg{
        padding: 2px 7px;
    }
    #front #mainView .pr{
        font-size: 110%;
    }
    #front #mainView a.mail,#front #mainView a.tel{
        padding: 12px 0;
    }
    #front #mainView a.tel{
        font-size: 150%;
        padding: 0;
    }
    #front #mainView a.mail img{
        width: 80%;
    }
    #front #mainView .decoImg{
        margin: 1rem auto 0 auto;
    }
    #front #reason ul li h3{
        font-size: 130%;
    }
    #front #reason ul li p{
        padding: 0;
        margin: 5px 0;
    }
    #front #reason ul li i{
        width: 90%;
    }
    #front #message{
        padding: 0rem 1rem;
    }
    #front .break{
        display:block;
    }
    #front #message .msgWrap h3{
        font-size: 130%;
        padding-top: 20px;
    }
    #front #message .msgWrap p{
        font-size: 100%;
    }
    #front #message .msgWrap p.name{
        font-size: 120%;
        margin: 10px 0;
    }
    #front #service h2{
        font-size: 120%;
    }
    #front #service .contentWrapper{
        padding: 2rem 0 2rem 0;
    }
    #front .arrowLink{
        font-size: 110%;
        padding: 8px;
        width: 100%;
    }
    #front #service ul.bottomFlex li a.arrowLink{
        font-size: 110%;
    }
    #front .dccs .categoly a{
        font-size: 110%;
    }
    #front #solveCase .solveCaseContent .txtWrapper .title{
        margin: 5px 0;
    }
    #front #solveCase .solveCaseContent .txtWrapper .comment p{
        font-size: 130%;
    }
    #front #flow{
        padding: 1rem;
    }
    #front #flow ul .txtWrap{
        flex: 4;
    }
    #front #flow ul .txtWrap h3{
        font-size: 120%;
    }
    #front #column{
        padding: 1rem 1rem 7rem 1rem;
    }
    #column .archive h3 a{
        font-size: 130%;
        margin-top: 6px;
    }
}