@charset "utf-8";

#mainvd{background: url(../../img/mainvd_sub.png);background-repeat: no-repeat; background-position:center; background-size: cover;}
#mainvd article{background: rgba(0,177,235,0.07); padding:85px 0px 75px;}
#mainvd .article_r{float:right; padding:0px 0px; width:44%;}
#mainvd p{font-weight:500;}

#one{margin:50px 0 0 0;}
#one .inlineBlock>li{padding:0 10px; box-sizing: border-box;}
#one .inlineBlock>li>div{border:1px solid  #E5E5E5; padding:0 15px 17px;; position:relative;}
#one .inlineBlock>li>div:before{content: "";position: absolute;top: 43%; right: -29px;margin-top: -9px;display: block;width: 0px;height: 0px;border-style: solid;border-width: 30px 0 30px 30px;border-color: transparent transparent transparent #fff;z-index: 0;}
#one .inlineBlock>li>div:after{content: "";position: absolute;top: 43%; right: -31px;margin-top: -10px;display: block;width: 0px;height: 0px;border-style: solid;border-width: 31px 0 31px 31px;border-color: transparent transparent transparent #E5E5E5;z-index: -1;}
#one .inlineBlock>li:last-child>div:before,#one .inlineBlock>li:last-child>div:after{content:none;}
#one .inlineBlock li{width:32%;margin-right:2%;}
#one .inlineBlock li img{width:100%;}
#one .inlineBlock li:last-child{margin-right:0%;}
#one h3{background: #00AEE6; color:#fff; padding:5px 10px 8px 20px; text-align: center;}
#one p{text-align: center; background: #949BA7 ; padding:7px; color:#fff; border-radius:5px;}

#one li.fadein:nth-of-type(2) {
    -moz-transition-delay:200ms;
    -webkit-transition-delay:200ms;
    -o-transition-delay:200ms;
    -ms-transition-delay:200ms;
    }
/* 3つ目の要素に400msのdelayをかける */
#one li.fadein:nth-of-type(3) {
    -moz-transition-delay:400ms;
    -webkit-transition-delay:400ms;
    -o-transition-delay:400ms;
    -ms-transition-delay:400ms;
    }


#two{margin:45px 0 0 0; padding:45px 0 25px; box-sizing: border-box;background:#F7F5F5;}
#two p{font-size:21px; padding-bottom:10px; border-bottom:1px solid  #E7E7E7;line-height: 30px;position: relative;font-weight:500; margin-bottom:20px;}
#two p:before{margin:0 5px 10px 0;content:"";display:inline-block;width:160px; height:30px;background:url(../img/remotewol_logo.png);background-size:contain;vertical-align:middle; background-repeat: no-repeat;}
#two .article_l{width:64%; margin-right:5%}
#two .article_r{width:31%;}
#two .article_r img{width:100%;margin-top: 40px;}

#three{margin:50px 0 0px 0;}
#three h2{margin-bottom:35px;}
#three .inlineBlock>li{width:48%; margin-right:4%;margin-bottom:20px; padding:20px 0px 20px 10px;box-sizing:border-box; border:6px solid #ECECEC; vertical-align: top; position:relative;height: 270px;}
#three .inlineBlock>li dd,#three .inlineBlock>li dt{display: inline-block;}
#three .inlineBlock>li dt{width:29%; margin-right:7%;text-align: center; box-sizing:border-box; vertical-align: top; padding:8px 0 0 8px;}
#three .inlineBlock>li dt img{width:100%;}
#three .inlineBlock>li dd{width:64%;}
#three h3{display:inline-block;position: relative;padding: 9px 0px 9px 25px;color: #FFF;background:#12456e ; width:98%; font-weight:500; font-size:18px; border-radius: 2px 0 0 2px;}
#three h3:before{position: absolute;content: '';top: 100%; right: 0; border: none; border-bottom: solid 9px transparent; border-left: solid 13px #002b55;}
#three p{padding:15px 18px 10px 25px;}
#three .inlineBlock>li:nth-child(2),#three .inlineBlock>li:nth-child(4),#three .inlineBlock>li:nth-child(6){margin-right:0;}
#three .padding{padding-bottom:60px;}

#four{margin:50px 0 0px 0;}
#four h2{margin-bottom:35px;}
#four ul.inlineBlock{text-align:left;}
#four .inlineBlock>li{width:48.5%; margin-right:3%; vertical-align: top; background: #F7F5F5; border-bottom:1px solid #E7E7E7; padding:15px 10px 10px 0px; box-sizing:border-box;text-align: center;}
#four .inlineBlock>li p{padding:10px 15px 10px 35px;text-align: left;}
#four .inlineBlock>li:nth-child(2),#four .inlineBlock>li:nth-child(4){margin-right:0px;}
#four .inlineBlock>li:nth-child(1),#four .inlineBlock>li:nth-child(2){margin-bottom:25px;}

#five{margin:50px 0 70px 0;}
#five h2{margin-bottom:35px;}
#five .inlineBlock>li{width:49%; margin-right:2%; vertical-align: top;}
#five .inlineBlock>li:nth-child(even){margin-right:0%;}
#five .inlineBlock>li dt{float:left; width:25%; color:#00AEE6;}
#five .inlineBlock>li dd{overflow:hidden;}
#five .inlineBlock>li dt{margin-right:20px;}
#five .inlineBlock>li dl{border-bottom:1px solid #E5E5E5; padding:10px;}

#six{margin:0 0 70px 0;}
#six h2{margin-bottom:35px;}
#six .inner>ul{border:2px solid rgba(0,174,230,0.7); border-radius: 5px; padding:2px 2px;margin:0 auto; width:60%;text-align: left;}
#six .inner>ul > li > p > span{font-size:55px;font-weight:600;}
#six .inner>ul strong{font-size:30px; margin-right:10px;letter-spacing: -8px;}
#six .inlineBlock>li{vertical-align: middle;}
#six li:first-child{display: inline-block;background: rgba(0,174,230,0.7);color:#fff; padding:35px 60px; font-weight:600; border-radius: 4px; margin-right:90px;    font-size: 25px;}
#six li:nth-child(2){padding:10px 0 0 0;}
#six .red01{color: #EB1D24;}


@media screen and (max-width : 640px ){
    #one .inlineBlock>li{width:100%;padding-top: 20px;}
    #one .inlineBlock>li>div:before{content: none;}
    #one .inlineBlock>li>div:after{content: none;}
    #three .inlineBlock>li{width:100%;}
    #four .inlineBlock>li{width:100%;padding-top: 0px;margin-bottom: 25px;}
    #four img{width:calc(100% + 10px);}
    #five .inlineBlock>li{width:100%;}
    #five .inlineBlock>li dt{width:unset;}

    #six .inner>ul{width:100%;}
    #six li:first-child{
        width: 100%;
        text-align: center;
        padding: 10px 0px;
    }
    #six li:nth-child(2){
        padding: 25px 0px 10px 0px;
        text-align: center;
        width: 100%;
    }

}