@charset "utf-8";
/* レスポンシブ設定
------------------------------------- */
@media screen and (min-width: 769px){

}

@media screen and (max-width: 768px){

/* 特徴
------------------------------------- */

    .wrapMvProduct{
        width: 100vw;
        overflow-x: hidden;
    }
    
    #mvProduct{
        border-top: none;
        padding: 0;
    }

    #mvProduct p{
        width: 93.49vw;
        height: 35.16vw;
        background: url("../img/mv_shiSp.jpg") no-repeat;
        background-size: cover;
        font-size: 3.52vw;
        font-weight: 500;
        line-height: 1.44;
        padding-left: 4.65vw;
        padding-top: 19.92vw;
        margin: 6.51vw auto;
    }

    ul.tabMenu{
        margin: 0 auto;
        width: 93.49vw;
        height: 12.24vw;
        border-bottom: solid 0.26vw #cccccc;
        padding: 0;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    ul.tabMenu li{
        width: 38.54vw;
        text-align: center;
        font-size: 3.65vw;
        font-weight: 700;
        margin: 0 1.63vw;
    }

    ul.tabMenu li.cur{
        position: relative;
        height: 12.24vw;
        border-top: solid 0.26vw #cccccc;
        border-left: solid 0.26vw #cccccc;
        border-right: solid 0.26vw #cccccc;
        padding-top: 1.95vw;
    }

    ul.tabMenu a li{
        background: #eeeeef;
        color: #888888;
        height: 10.03vw;
        margin-bottom: 2.21vw;
        padding-top: 1.95vw;
    }

    ul.tabMenu a:hover li{
        background: #dbdcdc;
        color: #231815;
        opacity: 1.0;
        transition: 0.4s;
    }

    ul.tabMenu a:active li {
        position: relative;
        top: 2px;
        left: 2px;
    }

    #feature{
        width: 91.15vw;
        margin: 8.53vw auto 3vw;
        background: #7ac1cc;
        padding: 3.65vw;
    }

    #feature ul{
        width: 83.85vw;
        height: 17.97vw;
        background: #fff;
        margin: 0 0 1.95vw;
        font-size: 3.78vw;
        font-weight: 500;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        line-height: 1.41;
    }

    #feature ul li.num{
        background: #d1f0e1;
        width: 3.65vw;
        height: 100%;
        text-indent:100%;
        white-space:nowrap;
        overflow:hidden;
    }

    #feature ul li.txt{
        padding-left: 2.6vw;
        padding-right: 1vw;
        width: 79.6vw;
    }

    #feature ul li.txt .small{
        font-size: 2.6vw;
        margin-left: -1em;
    }

    #feature ul:nth-child(1) li.num{
        background: #d1f0e1 url("../img/num1.svg") no-repeat;
        background-size: 1.04vw 2.56vw;
        background-position: 50%;
    }

    #feature ul:nth-child(2) li.num{
        background: #d1f0e1 url("../img/num2.svg") no-repeat;
        background-size: 1.6vw 2.6vw;
        background-position: 50%;
    }

    #feature ul:nth-child(3) li.num{
        background: #d1f0e1 url("../img/num3.svg") no-repeat;
        background-size: 1.58vw 2.64vw;
        background-position: 50%;
    }

    #feature ul:nth-child(4) li.num{
        background: #d1f0e1 url("../img/num4.svg") no-repeat;
        background-size: 1.79vw 2.56vw;
        background-position: 50%;
    }

    #feature ul:nth-child(5) li.num{
        background: #d1f0e1 url("../img/num5.svg") no-repeat;
        background-size: 1.59vw 2.6vw;
        background-position: 50%;
    }

    #featureNote{
        width: 93.15vw;
        margin: 0 auto 8.85vw;
        font-size: 3.1vw;
        font-weight: 300;
        line-height: 1.38
    }

    /* サービス内容
    ------------------------------------- */
    #serviceContents{
        width: 100%;
        margin: 9.11vw auto 10.16vw;
    }

    #serviceContents li{
        position: relative;
        width: 89.84vw;
        height: 14.06vw;
        font-size: 3.78vw;
        margin: 3.91vw auto 0;
        padding-top: 3.6vw;
        padding-left: 4.17vw;
        display: block;
        border: solid 1px #4c79d6;
        box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.10);
        transition: 0.4s;
    }

    #serviceContents li.down::before{
        position: absolute;
        content: "";
        width: 4.74vw;
        height: 4.74vw;
        top: 4.43vw;
        right: 4.43vw;
        background: url("../../assets/img/btnTglDown.svg");
        background-size: cover;
    }

    #serviceContents li.up::before{
        position: absolute;
        content: "";
        width: 4.74vw;
        height: 4.74vw;
        top: 4.43vw;
        right: 4.43vw;
        background: url("../../assets/img/btnTglUp.svg");
        background-size: cover;
    }

    #serviceContents .boxService{
        width: 100%;
        margin: 0 auto;
        padding: 0;
        text-align: left;
    }

    #serviceContents .boxService p.boxClose{
        width: 100%;
        margin-top: 7vw;
        padding-bottom: 7vw;
        padding-right: 9.21vw;
        text-align: right;
    }

    #serviceContents .boxService span.close{
        position: relative;
        margin-top: 7vw;
        color: #005dcf;
        font-size: 3.52vw;
    }

    #serviceContents .boxService span.close::after{
        position: absolute;
        content: "";
        width: 3.41vw;
        height: 3.41vw;
        top: 1.2vw;
        right: -3.96vw;
        background: url("../../assets/img/btnTglDown.svg");
        background-size: cover;
        transform: rotate(180deg);
    }

    /* サービス内容　各ブロックの内容
    ------------------------------------- */

    /* ===== Service1 =====*/

    #serviceContents #service1 .boxLead{
        width: 100%;
        height: 40.36vw;
        background: url("../img/iconService1.svg") no-repeat;
        background-size: 18.16vw 12.15vw;
        background-position: 74.44vw 14.28vw;
        padding-left: 8.98vw;
        padding-top: 7.97vw;
    }

    #serviceContents #service1 .boxLead span{
        display: block;
        width: 58.64vw;
        font-size: 3.65vw;
        font-weight: 400;
        line-height: 1.71;
    }
    
    #serviceContents #service1 .box{
        position: relative;
        width: 85.94vw;
        height: 244.27vw;
        background: url("../img/bgService1boxSp.png") no-repeat;
        background-size: 100%;
        margin: 0 auto;
    }
    
    #serviceContents #service1 .box h3{
        top: 4.40vw;
        left: 8.00vw;
        font-size: 3.91vw;
    }

    #serviceContents #service1 .box p:nth-child(2){
        top: 21.09vw;
        left: 32.94vw;
        font-size: 3.45vw;
        line-height: 1.43;
    }

    #serviceContents #service1 .box p:nth-child(3){
        top: 127.73vw;
        left: 10.68vw;
        font-size: 3.52vw; 
        line-height: 1.52;
    }

    #serviceContents #service1 .box p:nth-child(4){
        bottom: 24.09vw;
        left: 11.33vw;
        font-size: 3.52vw; 
        line-height: 1.48;
        width: 66.15vw;
    }

/* ===== Service2 =====*/

    #serviceContents #service2 .boxLead{
        width: 100%;
        height: 34.11vw;
        background: url("../img/iconService2.svg") no-repeat;
        background-size: 19.45vw 12.67vw;
        background-position: 73.4vw 11.26vw;
        padding-left: 7.98vw;
        padding-top: 7.97vw;
    }

    #serviceContents #service2 .boxLead span{
        display: block;
        width: 63.64vw;
        font-size: 3.65vw;
        font-weight: 400;
        line-height: 1.71;
    }
    
    #serviceContents #service2 .box{
        position: relative;
        width: 85.94vw;
        height: 95.05vw;
        background: url("../img/bgService2boxSp.png") no-repeat;
        background-size: 100%;
        margin: 0 auto;
    }

    #serviceContents #service2 .box p{
        top: 67.45vw;
        left: 13.28vw;
        font-size: 3.52vw;
        font-weight: 300;
        line-height: 1.48;
        width: 62.24vw;
    }
    
    /* ===== Service3 =====*/

    #serviceContents #service3 .boxLead{
        width: 100%;
        height: 40.36vw;
        background: url("../img/iconService3.svg") no-repeat;
        background-size: 21.74vw 14.84vw;
        background-position: 70.7vw 12.24vw;
        padding-left: 8.98vw;
        padding-top: 7.97vw;
    }

    #serviceContents #service3 .boxLead span{
        display: block;
        width: 56.64vw;
        font-size: 3.65vw;
        font-weight: 400;
        line-height: 1.71;
    }
    
    #serviceContents #service3 .box{
        position: relative;
        width: 85.94vw;
        height: 161.46vw;
        background: url("../img/bgService3boxSp.png") no-repeat;
        background-size: 100%;
        margin: 0 auto;
    }

    #serviceContents #service3 .box h2{
        font-size: 3.65vw;
        left: 15.23vw;
    }

    #serviceContents #service3 .box h2:nth-child(1){
        top: 13.15vw;
    }

    #serviceContents #service3 .box h2:nth-child(2){
        top: 86.46vw;
    }

    #serviceContents #service3 .box h2::before{
        left: -4.4vw;
    }

    /* ===== Service4 =====*/

    #serviceContents #service4 .boxLead{
        width: 100%;
        height: 40.36vw;
        background: url("../img/iconService4.svg") no-repeat;
        background-size: 18.75vw 18.54vw;
        background-position: 70.31vw 10.42vw;
        padding-left: 8.98vw;
        padding-top: 7.97vw;
    }

    #serviceContents #service4 .boxLead span{
        display: block;
        width: 56.64vw;
        font-size: 3.65vw;
        font-weight: 400;
        line-height: 1.71;
    }
    
    #serviceContents #service4 .box{
        position: relative;
        width: 85.94vw;
        height: 151.69vw;
        background: url("../img/bgService4boxSp.png") no-repeat;
        background-size: 100%;
        margin: 0 auto;
    }
    
    /* SideBtn
    ------------------------------------- */
    #bannerMov{
        position: fixed;
        width: 36.07vw;
        height: 27.86vw;
        right: 0px;
        bottom: 15.5vw;
        z-index: 5;
    }

    #bannerMov p{
        width: 100%;
        height: 100%;
        background: url("../img/btnMovSp.png") no-repeat;
        background-size: 100%;
    }


}