@charset "utf-8";

#connect #conv .mainmenu {
    display: none;
}


#connect #services .service#service1 .hd .inner {
    background-image: url(../commons/img/mn_icon_1_w.svg);
}
#connect #services .service#service2 .hd .inner {
    background-image: url(../commons/img/mn_icon_2_w.svg);
}
#connect #services .service#service3 .hd .inner {
    background-image: url(../commons/img/mn_icon_3_w.svg);
}
#connect #services .service#service4 .hd .inner {
    background-image: url(../commons/img/mn_icon_4_w.svg);
}
#connect #services .service#service5 .hd .inner {
    background-image: url(../commons/img/mn_icon_5_w.svg);
}
#connect #services .service#service6 .hd .inner {
    background-image: url(../commons/img/mn_icon_6_w.svg);
}
#connect #services .service#service7 .hd .inner {
    background-image: url(../commons/img/mn_icon_7_w.svg);
}



@media print,
screen and (min-width: 751px) {


    #connect #lead {
        margin-top: 60px;
        padding-left: 40px;
        padding-right: 40px;
        margin-bottom: 100px;
    }

    #connect #lead .inner {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    #connect #lead h2 {
        font-size: 36px;
        line-height: 1.5em;
        font-family: 'SuzukiPROHeadline';
    }

    #connect #lead .body {
        font-size: 18px;
        line-height: 1.75em;
        margin-top: 20px;
     
    }


   #connect #lead .note {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.75em;
    margin-bottom: 50px;
 }


 #connect #lead .note li {
    text-indent: -1em;
    margin-left: 1em;
 }



    #connect #services {}

    #connect #services .service {
        margin-bottom: 120px;
    }

    #connect #services .service:last-child {
        margin-bottom: 0px;
    }

    #connect #services .service .hd {
        background-size: cover;
        background-position: center center;
        position: relative;
        margin-bottom:20px;
    }

    #connect #services .service .hd .inner {
        padding-top: 30px;
        padding-bottom: 30px;
        background-color: rgba(132, 169, 217, 0.8);
        color: #fff;
        background-size: 120px 120px;
        background-repeat: no-repeat;
        background-position: 40px center;
        padding-left: 180px;
        padding-right: 360px;

    }

    #connect #services .service .hd h3 {
        font-size: 36px;
        line-height: 1.35em;
        font-family: 'SuzukiPROHeadline';
        letter-spacing: 0.05em;
        height: 120px;
        display: flex;
        align-items: center;
    }

 
    

    #connect #services .service .hd .device {
        position: absolute;
        right: 80px;
        bottom: -60px;
        width: 160px;
        z-index: 1;
        clip-path: inset(-100px -100px 60px -100px);

    }
    #connect #services .service .hd .device img {
        transform: rotate(-15deg);
    }

    #connect #services .service .lead {
        padding-left: 180px;
        padding-right: calc(180px);
        margin-bottom: 50px;
    }

    #connect #services .service .lead p {
        font-size: 20px;
        line-height:2em;
    }
 

    #connect #services .service .column {
        /* padding-left: 180px;
        padding-right: 180px; */
        
    }
 
    #connect #services .service .column .inner {
        width: calc(100% - 180px - 180px);
        min-width: calc(1000px - 40px - 40px);

        margin-left: auto;
        margin-right: auto;
    }

    

    #connect #services .service .column .ltit {
        font-size: 18px;
        display: block;
        line-height: 1.5em;
        margin-bottom: 10px;
        font-family: 'SuzukiPROBold';
    }

    #connect #services .service .column .body {
        font-size: 18px;
        line-height: 1.5em;
        /* flex:1; */
    }
 
    

    #connect #services .service .box {
        position: relative;
        margin-bottom: 20px;
        background-color: #EFEFEF;
        padding-top: 30px;
        padding-bottom: 30px;
        /* padding-left: 180px;
        padding-right: 180px; */
    }
    

    #connect #services .service .box .inner {
      width: calc(100% - 180px - 180px);
       min-width: calc(1000px - 40px - 40px);
       margin-left: auto;
       margin-right: auto;
       display: flex;
       justify-content: space-between;
    }


    #connect #services .service .box .texts{
        flex:1;
        margin-right: 40px;
    }
    

    #connect #services .service .box .texts h4 {
        font-size: 32px;
        line-height: 1.35em;
        font-family: 'SuzukiPROHeadline';

    }

    #connect #services .service .box .texts .body {
        font-size: 18px;
        line-height: 2em;
        margin-top: 20px;

    }

    #connect #services .service .note {
        /* padding-left: 180px;
        padding-right: 180px; */
        margin-top: 20px;
    }
    #connect #services .service .note ul {
   
        width: calc(100% - 180px - 180px);
        min-width: calc(1000px - 40px - 40px);
        
       margin-left: auto;
       margin-right: auto;
    }

    #connect #services .service .note li {
        text-indent: -1em;
        margin-left: 1em;
        font-size: 14px;
        line-height: 1.6em;
    }

    #connect #services .service .box .image {
        width: 400px;
        position: relative;
    }

 
    







    #connect #services .service#service1 .hd {
        background-image: url(img/1_hd.jpg);
    }

  
    

    
    #connect #services .service#service2 .hd {
        background-image: url(img/2_hd.jpg);
    }
    
    #connect #services .service#service3 .hd {
        background-image: url(img/3_hd.jpg);
    }
    
    #connect #services .service#service4 .hd {
        background-image: url(img/4_hd.jpg);
    }
    
    #connect #services .service#service5 .hd {
        background-image: url(img/5_hd.jpg);
    }
    
    #connect #services .service#service6 .hd {
        background-image: url(img/6_hd.jpg);
    }
    
    #connect #services .service#service7 .hd {
        background-image: url(img/7_hd.jpg);
    }
    

}



/* @media only screen and (min-width: 750px)  and (max-width: 1300px) {

    #connect #services .service .column {
        padding-left: 40px;
        padding-right: 40px;
    }

    #connect #services .service .note {
        padding-left: 40px;
        padding-right: 40px;
    }

    #connect #services .service .box {
        padding-left: 40px;
        padding-right: 40px;
    }
    

} */




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





    #connect #lead {
        margin-top: 40px;
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 20px;
    }

    #connect #lead .inner {
    }

    #connect #lead h2 {
        font-size: 26px;
        line-height: 1.35em;
        font-family: 'SuzukiPROHeadline';
    }

    #connect #lead .body {
        font-size: 15px;
        line-height: 1.75em;
        margin-top: 20px;
      
    }


    #connect #lead .note {
        margin-top: 10px;
        font-size: 12px;
        line-height: 1.5em;
        margin-bottom: 50px;
     }
     #connect #lead .note li {
        text-indent: -1em;
        margin-left: 1em;
     }

     

    #connect #services {}

    #connect #services .service {
        margin-bottom: 50px;
    }

    #connect #services .service:last-child {
        margin-bottom:0px;
    }

    #connect #services .service .hd{
        margin-bottom: 10px;
        position: relative;
    }

    #connect #services .service .hd .title {
        background-size: cover;
        background-position: center center;
        position: relative;
    }

    #connect #services .service .hd .title > div {
        padding-top: 80px;
        padding-bottom: 20px;
        background-color: rgba(132, 169, 217, 0.8);
        color: #fff;
        padding-left: 20px;
        padding-right: 100px;
        background-size: 50px 50px;
        background-repeat: no-repeat;
        background-position: 20px 20px;

    }



    


    #connect #services .service .hd h3 {
        font-size: 26px;
        line-height: 1.35em;
        font-family: 'SuzukiPROHeadline';
        /* letter-spacing: 0.05em; */
        word-wrap: break-word;
        word-break:break-all;
    }
  
    
    #connect #services .service .hd .device {
        position: absolute;
        right: 0px;
        bottom: -30px;
        width: 90px;
        clip-path: inset(-100px -100px 30px -100px);

    }
    #connect #services .service .hd .device img {
        transform: rotate(-15deg);
    }


    #connect #services .service .lead {
        font-size: 16px;
        line-height: 1.5em;
        margin-top: 50px;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 50px;
    }



    

    #connect #services .service .column {
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 20px;
    }

    #connect #services .service .column .ltit {
        font-size: 15px;
        display: block;
        line-height: 1.5em;
        margin-bottom: 10px;
        font-family: 'SuzukiPROBold';
    }

    #connect #services .service .column .body {
        font-size: 14px;
        line-height: 1.5em;
    }
 




    #connect #services .service .note {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;

    }

    #connect #services .service .note li {
        text-indent: -1em;
        margin-left: 1em;
        font-size: 12px;
        line-height: 1.6em;
    }
    
    

 
    
    #connect #services .service .box {
        position: relative;
        margin-bottom: 10px;
        background-color: #EFEFEF;
        padding: 20px;
    }
   
    #connect #services .service .box .texts {
     
    }

    #connect #services .service .box .texts .inner {
        position: relative;
    }

    #connect #services .service .box .texts h4 {
        font-size: 24px;
        line-height: 1.35em;
        font-family: 'SuzukiPROHeadline';

    }

    #connect #services .service .box .texts .body {
        font-size: 14px;
        line-height: 1.6em;
        margin-top: 10px;

    }


 
    

    #connect #services .service .box .image {
      margin-top: 20px;
        

    }

    #connect #services .service .box .image.display img {
        width: calc(100vw - 60px);
       display: block;
    }











    #connect #services .service#service1 .hd  .title{
        background-image: url(img/1_hd.jpg);
    }
    

    #connect #services .service#service2 .hd  .title{
        background-image: url(img/2_hd.jpg);
    }
    
    #connect #services .service#service3 .hd  .title{
        background-image: url(img/3_hd.jpg);
    }
    
    #connect #services .service#service4 .hd .title {
        background-image: url(img/4_hd.jpg);
    }
    
    #connect #services .service#service5 .hd .title {
        background-image: url(img/5_hd.jpg);
    }
    
    #connect #services .service#service6 .hd .title {
        background-image: url(img/6_hd.jpg);
    }
    
    #connect #services .service#service7 .hd  .title{
        background-image: url(img/7_hd.jpg);
    }
    



    #connect #services .service#service1 .hd .title > div {
        background-image: url(../commons/img/mn_icon_1_w.svg);
    }
    #connect #services .service#service2 .hd .title > div {
        background-image: url(../commons/img/mn_icon_2_w.svg);
    }
    #connect #services .service#service3 .hd .title > div {
        background-image: url(../commons/img/mn_icon_3_w.svg);
    }
    #connect #services .service#service4 .hd .title > div {
        background-image: url(../commons/img/mn_icon_4_w.svg);
    }
    #connect #services .service#service5 .hd .title > div{
        background-image: url(../commons/img/mn_icon_5_w.svg);
    }
    #connect #services .service#service6 .hd .title > div{
        background-image: url(../commons/img/mn_icon_6_w.svg);
    }
    #connect #services .service#service7 .hd .title > div {
        background-image: url(../commons/img/mn_icon_7_w.svg);
    }
    
    

 





}