@charset "UTF-8";

/*------------------------------------------------------------
  common
------------------------------------------------------------*/

#front .cmHd{
    text-align: center;
    font-size: 240%;
    font-weight: 600;
    margin: 3rem 0 6rem 0;
    position: relative;
}
#front .cmHd span{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -28px;
    margin: auto; 
}
#front .cmLink{
    color: #FFF;
    display: block;
    text-align: center;
    font-size: 190%;
    border-radius: 80px;
    border: 2px solid;
    font-weight: 600;
    padding: 5px;
    width: 40%;
    margin: 5rem auto;
}

/*------------------------------------------------------------
  seedn
------------------------------------------------------------*/

#front .blockSd{
    position:absolute;
    z-index: 10;
    left: 2%;
}
#front .blockSd .seedn{
    width: 260px;
}
#front .blockSd .fukidashi{
    background: url(../img/index/sd-fukidashi.png) no-repeat;
    background-size: cover;
    width: 190px;
    height: 74px;
    text-align: center;
    padding: 26px 0 20px 17px;
    font-size: 83%;
    font-weight: 600;
    color: #333 !important;
}
#front .blockSd .fukidashi.hide{
    display:none;
}
#front #works .red-sdn{

}
#front #works .grn-sdn .seedn{
    width: 130px;
}
#front #info .yrw-sdn{
    top: -96%;
}
#front #service .blue-sdn{
    top: -20%;
}
#front #service .roy-sdn{

}
#front .blockSd.rev{
    flex-direction: row-reverse;
    right: 2%;
}
#front .blockSd.rev .fukidashi{
    background: url(../img/index/sd-fukidashi-rev.png) no-repeat;
    background-size: cover;
    padding: 26px 0 20px 0px;
}


/*------------------------------------------------------------
  mainView
------------------------------------------------------------*/
#front #mainView{
    background: url(../img/index/mvBg-pc.png) no-repeat;
    background-size: 100%;
    padding: 11vw 0 35vw 0;
    background-position: center top -6vw;
}
#front #mainView h2{
    text-align: center;
}
#front #mainView h2 span{
    font-size: 175%;
    font-weight: 600;
}
#front #mainView p{
    text-align: center;
    font-size: 150%;
    font-weight: 500;
}
#front #mainView img{
    width: 25%;
    margin: 4rem auto;
}

/*------------------------------------------------------------
  intro
------------------------------------------------------------*/
#front #intro{
    position:relative;
}
#front #intro:before{
    content: "";
    background: url(../img/index/bg-yellow-top.png) no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 38vw;
    bottom: 0;
    left: 0;
}
#front #intro .contentWrapper{
    background: #FFF;
    box-shadow: 0 0 10px #d1d1d185;
    border-radius: 30px;
    padding: 4rem 7rem 7rem 7rem;
    position: relative;
}
#front #intro h2{
    text-align: center;
    position: relative;
    margin: 4rem 0 4rem 0;
}
#front #intro h2:before{
    content: "";
    background: url(../img/index/logoIcon.png) no-repeat;
    background-size: 100%;
    width: 90px;
    height: 160px;
    position: absolute;
    left: 0;
    right: 0;
    top: -150px;
    margin: auto;
}
#front #intro h2 span{
    font-size: 140%;
    font-weight: 600;
}
#front #intro .flex{
    gap: 9%;
    align-items: center;
}
#front #intro .leftWrap{
    flex: 2;
}
#front #intro .leftWrap p{
    font-weight: 500;
    line-height: 230%;
    font-size: 96%;
    letter-spacing: 0.05rem;
}
#front #intro .rightWrap{
    flex: 1;
}


/*------------------------------------------------------------
  works
------------------------------------------------------------*/
#front #works{
    background:#fcc800;
    position:relative;
    z-index:1;
    padding: 4rem 0 1rem 0;
}
#front #works .contentWrapper{
    position: relative;
    z-index: 1;
}
#front #works:after{
    content: "";
    background: url(../img/index/bg-yellow-bottom.png) no-repeat;
    background-size: contain;
    position: absolute;
    width: 100%;
    height: 21vw;
    bottom: -21vw;
    z-index: 0;
}
#front #works h2,#front #works span{
    color:#FFF;
}
#front #works .wksWrap{
    gap: 2%;
}
#front #works .wksWrap li{
    flex: 1;
}
#front #works .wksWrap li img{
    border-radius: 20px 20px 0 0;
    box-shadow: 0 0 10px #7a7a7ab5;
}
#front #works .wksWrap li .txtWrap{
    border-radius: 0 0 20px 20px;
    box-shadow: 0 0 10px #7a7a7ab5;
    background:#FFF;
    padding:1.5rem;
    min-height: 270px;
}
#front #works .wksWrap li .txtWrap .cat{
    display: flex;
    gap: 2%;
}
#front #works .wksWrap li .txtWrap .cat li{
    box-shadow: none;
    color: #da4657;
    font-size: 80%;
    border: 1px solid;
    text-align: center;
    letter-spacing: 0;
    border-radius: 2px;
    flex: initial;
    padding: 0 10px;
    font-weight: 600;
}
#front #works .wksWrap li .txtWrap p{
    font-size: 79%;
    font-weight: 600;
    letter-spacing: 0.05rem;
    margin: 0;
}
#front #works .wksWrap li .txtWrap .title{
    font-size: 100%;
    margin: 10px 0;
}
#front #works .wksWrap li .txtWrap .comment{
    min-height: 80px;
}
#front #works .wksWrap li .txtWrap a{
    color: #da4657;
    display: block;
    border-radius: 80px;
    letter-spacing: 0;
    font-weight: 600;
    text-align: center;
    border: 2px solid;
    margin: 20px 0 0px 0;
    padding: 10px;
}

/*------------------------------------------------------------
  service
------------------------------------------------------------*/
#front #service{
    margin-top: 14rem;
    position:relative;
}
#front #service .svsWrap{
    gap: 6%;
    padding: 3rem 0;
}
#front #service li{
    flex:1;
}
#front #service li img{
    width: 150px;
    margin: 0 auto;
}
#front #service li h3{
    text-align: center;
    font-size: 170%;
    color: #86b827;
    font-weight: 600;
    margin: 20px 0; 
}
#front #service li:nth-of-type(2) h3{
    color: #db4657;
}
#front #service li:nth-of-type(3) h3{
    color: #00b0ed;
}
#front #service li p.comment{
    letter-spacing: 0.05rem;
    font-weight: 500;   
    min-height: 157px;
}
#front #service li .ex{

}
#front #service li .ex p.title{
    background: #363838;
    color: #FFF;
    text-align: center;
    border-radius: 80px;
    padding: 3px 0;
    font-size: 100%;
    margin: 10px 0;
}
#front #service li .ex li{
    font-size: 83%;
    letter-spacing: 0;
    padding: 3px 0;
    font-weight: 500;
}


/*------------------------------------------------------------
  point
------------------------------------------------------------*/
#front #point{
    padding: 7rem 0;
    position:relative;
}
#front #point .contentWrapper{
    background: #FFF;
    box-shadow: 0 0 10px #d1d1d185;
    border-radius: 30px;
    padding: 4rem 7rem 7rem 7rem;
    position: relative;
}
#front #point h2{
    text-align: center;
    position: relative;
    margin: 4rem 0 4rem 0;
    font-weight: 600;
    color: #115fac;
    font-size: 170%;
}
#front #point h2::before{
    content: "";
    background: url(../img/index/logoIcon.png) no-repeat;
    background-size: 100%;
    width: 90px;
    height: 160px;
    position: absolute;
    left: 0;
    right: 0;
    top: -170px;
    margin: auto;  
}
#front #point .pointFlex{
    gap: 4%;
}
#front #point .pointFlex li{
    flex: 1;
}
#front #point .pointFlex li h3{
    text-align: center;
    background: #90c31e;
    color: #FFF;
    font-weight: 600;
    border-radius: 10px;
    padding: 20px;
}
#front #point .pointFlex li p{
    letter-spacing: 0.05rem;
    font-weight: 500;
    line-height: 180%;
}
#front #point .pr{
    border-top: 1px solid;
    font-size: 120%;
    font-weight: 600;
    letter-spacing: 0.05rem;
    line-height: 190%;
    padding: 20px 0;
}
#front #point .pr span{
    font-size: 100%;
    font-weight: 600;  
}
#front #point .cmLink{
    margin: 1rem auto 2rem auto;
    background: #da4657;
    width: 80%;
    letter-spacing: 0;
    font-size: 140%;
    padding: 20px;
}
#front #point .msg{
    position: relative;
    border: 3px solid #90c31e;
    padding: 1.8rem;
    border-radius: 20px;
    font-weight: 700;
    width: 74%;
    margin: 4rem 0 0 auto;
}
#front #point .msg::before{
    content: "";
    background: url(../img/index/post2.png) no-repeat;
    background-size: 100%;
    width: 200px;
    height: 160px;
    position: absolute;
    left: -190px;
    top: -20px;
    margin: auto; 
}

/*------------------------------------------------------------
  info
------------------------------------------------------------*/
#front #info{
    position:relative;
}
#front #info h2{
    font-size:220%;
}
#front #info h2 span{
    display:block;
}
#front #info .cmLink{
    color: #115fac;
    font-size: 120%;
}


@media (min-width: 1900px) {

    #front #mainView{
        background-position: center top -14vw;
    }

}

@media (max-width: 1600px) {

    #front #mainView{
        background-position: center top 2vw;
    }

}

@media (max-width: 1380px) {

    #front #mainView{
        background-position: center top 11vw;
    }
    #front #works .red-sdn{
        top: -6%;
    }
    #front #point .roy-sdn{
        top: 3%;
    }
    #front #info{
        padding-top: 6rem;
    }

}

@media (max-width: 1200px) {

    #front main{
        overflow: hidden;
    }
    #front #intro,#front #service,#front #point,#front #info{
        padding:2rem;
    }
    #front #point .roy-sdn .seedn{
        width: 200px;
    }
    #front #info .yrw-sdn{
        top: -35%;
    }
    #front #info .yrw-sdn .seedn{
        width: 180px;
    }
}

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

@media (max-width: 1160px) {

    #front #service li p.comment{
        min-height: 177px;
    }

}

@media (max-width: 950px) {

    #front #mainView{
        background-position: center top 17vw;
    }
    #front #intro .flex{
        display:block;
    }
    #front #intro .contentWrapper{
        padding: 4rem 5rem 2rem 5rem;
    }
    #front #intro .rightWrap{
        width: 50%;
        margin: 3rem auto 0 auto; 
    }
    #front #works .wksWrap li .txtWrap{
        min-height: 318px;
    }
    #front #service li p.comment{
        min-height: 207px;
    }
    #front #point .contentWrapper{
        padding: 4rem 4rem 7rem 4rem;
    }


}

@media (max-width: 800px) {

    #front .cmLink{
        font-size: 150%;
    }
    #front #mainView{
        background-position: center top 23vw;
    }
    #front .blockSd .seedn{
        max-width: 200px;
    }
    #front #point .roy-sdn .seedn{
        width: 160px;
    }
    #front #works .wksWrap li .txtWrap{
        padding: 1rem;
    }
    #front #works .wksWrap li .txtWrap .cat li{
        font-size: 70%;
    }
    #front #works .wksWrap li .txtWrap a{
        padding: 5px;
        font-size: 80%;
    }
    #front #service{
        margin-top: 7rem;
    }
    #front #service li h3{
        font-size: 150%;
    }
    #front #service li p.comment{
        min-height: 256px
    }
    #front #point .pointFlex li h3{
        font-size: 95%;
    }
    #front #point .pr{
        line-height: 170%;
        font-size: 110%;
    }
    #front #point .msg{
        font-size: 90%;
    }
    #front #info{
        padding-top: 14vw;
    }
    #front #info .yrw-sdn{
        top: -15%;
    }
}

@media (max-width: 750px) {

    #front #mainView{
        background-position: center top 26vw;
    }
    #front #works .wksWrap{
        display:block;
    }
    #front #works .wksWrap li .txtWrap .comment,#front #works .wksWrap li .txtWrap{
        min-height: auto;
    }
    #front #works .red-sdn{
        top: -2%;
    }
    #front #works .wksWrap li .txtWrap .cat li{
        font-size: 90%;
    }
    #front #works .wksWrap li .txtWrap{
        margin-bottom: 2rem;
        padding: 1.5rem;
    }
    #front #works .wksWrap li .txtWrap .title{
        font-size:120%;
    }
    #front #works .wksWrap li .txtWrap p{
        font-size: 95%;
    }
    #front #works .wksWrap li .txtWrap a{
        margin: 30px 0 20px 0;
        font-size: 100%;
    }
    #front #service .blue-sdn{
        top: -11%;
    }
    #front #service .svsWrap{
        display:block;
    }
    #front #service li p.comment{
        min-height: auto;
    }
    #front #service li .ex li{
        font-size: 100%;
    }
    #front #service li .ex{
        margin-bottom: 5rem;
        border-bottom: 1px solid #ccc;
        padding-bottom: 3rem;
    }
    #front #service li .ex p.title{
        margin: 30px 0 20px 0;
    }
    #front #point .pointFlex{
        display:block;
    }
    #front #point .cmLink{
        width:100%;
    }
    #front #point .msg{
        width:100%;
        margin: 8rem 0 0 0;
    }
    #front #point .msg::before{
        left: 0;
        right: 0;
        top: -104px;
    }
    #front #info{
        padding-top: 24vw;
    }
    #info .infoWrapper h3{
        padding: 10px 0 0 0;
        background: no-repeat;
        display: block;
        margin: 0;
    }


}

@media (max-width: 600px) {
    #front .cmHd{
        font-size: 190%;
    }
    #front .cmLink{
        width: 80%;
    }
    #front .underlayerWrapper.double{
        padding: 10px;
    }
    #front #mainView{
        background-position: center top 36vw;
        padding: 18vw 0 35vw 0;
    }
    #front #mainView p{
        font-size: 130%;
    }
    #front #mainView img{
        width: 33%;
    }
    #front #intro h2:before{
        width: 60px;
    }
    #front #intro .contentWrapper{
        padding: 4rem 3rem 2rem 3rem;
    }
    #front #service .blue-sdn{
        top: -5%;
    }
    #front #service .svsWrap{
        padding: 2rem 0;
    }
    #front #service li p.comment{
        margin-top: 2rem;
    }
    #front #point .roy-sdn{
        top: -11%;
    }
    #front #point .contentWrapper{
        padding: 4rem 3rem 7rem 3rem;
    }
    #front #point .pointFlex li h3{
        font-size: 120%;
    }
    #front #info h2{
        font-size: 190%;
    }

}


@media (max-width: 490px) {

    #front .cmHd{
        margin: 3rem 0 4rem 0;
    }
    #front #mainView{
        padding: 18vw 0 25vw 0;
        background-position: center top 60vw;
    }
    #front #mainView h2 span{
        font-size: 210%;
    }
    #front #mainView h2 span,#front #mainView p .break{
        display:block;
    }
    #front #mainView p{
        font-size: 90%;
    }
    #front #intro, #front #service, #front #point, #front #info{
        padding: 2rem 1rem;
    }
    #front #intro h2{
        margin: 2rem 0 2rem 0;
    }
    #front #intro h2 span{
        font-size:150%;
    }
    #front #intro h2:before{
        top: -110px;
    }
    #front #intro .contentWrapper{
        padding: 4rem 2rem 2rem 2rem;
    }
    #front .blockSd .seedn{
        max-width: 140px;
    }
    #front #works .wksWrap li .txtWrap .title{
        font-size: 150%;
    }
    #front #works .grn-sdn .seedn{
        width: 80px;
    }
    #front .blockSd .seedn{
        max-width: 110px;
    }
    #front #service li img{
        width: 110px;
    }
    #front #service li .ex li{
        font-size: 95%;
    }
    #front #service li .ex p.title{
        margin: 30px 0 10px 0;
    }
    #front #point h2::before{
        width:60px;
        top: -110px;
    }
    #front #point .contentWrapper{
        padding: 4rem 2rem 4rem 2rem;
    }
    #front #point h2{
        margin: 1rem 0 2rem 0;
        font-size: 130%;
    }
    #front #point .roy-sdn{
        top: -9%;
    }
    #front #point .pointFlex li h3{
        padding: 10px;
    }
    #front #point .cmLink{
        font-size: 120%;
        padding: 15px;
    }
    #front #point .msg{
        padding: 1rem;
        text-align: center;
        font-size: 85%;
    }
    #front #point .msg::before{
        width: 150px;
        top: -84px;
    }
    #front #point .pr{
        font-size: 100%;
        line-height: 160%;
    }
    #front #point .break{
        display:block;
    }
    #front #info{
        padding-top: 20vw;
    }
    #front #info .yrw-sdn{
        top: -6%;
    }
    #front #info h2{
        font-size: 150%;
    }


}