@charset "UTF-8";
@media screen and (min-width: 768px),print {

.main-title{ background: url(../images/works/h1.png)no-repeat top right;}


#works #mainbox {background: url(../images/works/contentsmain-back02.png)no-repeat bottom center,url(../images/works/contentsmain-back01.png)no-repeat top center;background-size: contain,cover;padding: 0 0 100px 0;margin: 0 auto -170px auto;max-width: 1920px;}
#works #mainbox .inner-Box{max-width: 1440px;margin: 0 auto;padding: 0 30px;width: 100%;min-width: 1280px;}
#works #mainbox .inner-Box h2.smainttl{text-align: center;padding: 49px 0 42px;position: relative;left: -5px;}
#works #mainbox ul{ display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#works #mainbox li{border: 2px solid #FFFFFF;width: 30.4%;margin-right: 4.4%;position: relative;margin-bottom: 60px;}
#works #mainbox li a{display: block;padding: 20px 10px 10px 10px;}
#works #mainbox  ul li:nth-child(3n) { margin-right: 0px; }
#works #mainbox .postno {
    background-image:url(../images/works/works-num.svg);
    background-position:0px 0px;
    background-repeat:no-repeat;
    padding: 9px 29px 6px 16px;
    display: inline-block;
    color: #191919;
    position: absolute;
    top: -25px;
    left: -3px;
    font-size: 18px;
    letter-spacing: 1.08px;
    font-weight: 500;
    line-height: 1;
    }
#works #mainbox .wkstext{font-size: 14px;line-height: 30px;letter-spacing: 0.7px;font-weight: 500;}
#works #mainbox .system-ttl-01{font-size: 18px;line-height: 32px;letter-spacing: 0.9px;font-weight: 700;margin-bottom: 10px;padding: 0 10px 0 10px;}
#works #mainbox .arr{ }
#works #mainbox .system-pic{height: 240px;/* overflow: hidden; */margin-bottom: 4px;}
#works #mainbox .system-pic img{width: 400px;height: 240px;}
#works #mainbox span.arr {display: block;line-height: 1;position: absolute;bottom: -2px;right: -2px;}
.page-list {font-size: 16px;margin: 50px 0 51px;text-align: center;}
.page-list a {padding: 31px 23px;display: inline-block;/* color: #303030; */line-height: 1;margin: 0 10.5px;border: 1px solid #00B7FF;}
.page-list .current {padding: 31px 23px;display: inline-block;line-height: 1;margin: 0 3.5px;border: 1px solid #00B7FF;background: #00B7FF;}
.page-list a.next,.page-list a.prev,.page-list a.last,.page-list a.first {padding: 31px 23px;display: inline-block;line-height: 1;margin: 0 3.5px;border: none;background: none;color: #fff;background: #242424;}




#system-contentsw {background: url(../images/works/contentsmain-back01.png)no-repeat top center;margin-bottom: 112px;}
#system-contentsw .inner-Box{}
#system-contentsw .main-bx{max-width: 1460px;width: 100%;min-width: 1280px;margin: 0 auto;position: relative;padding: 31px 30px 57px 30px;}
#system-contentsw .main-bx img{ width: 100%; height: auto;}
#system-contentsw .main-bx h2.system-ttl{font-size: 40px;line-height: 46px;letter-spacing: 0px;font-weight: 700;margin-bottom: 29px;}

#system-contentsw .main-site-bx {width: 1100px;margin: 0 auto 76px;}
#system-contentsw .main-site-bx .leftbox{ width: 503px; float: left; margin-right: 45px; }
#system-contentsw .main-site-bx .leftbox h3{font-size: 29px;line-height: 1.6;letter-spacing: 0px;font-weight: 700;border-bottom: 1px solid #fff;padding-bottom: 14px;margin-bottom: 14px;}
#system-contentsw .main-site-bx .leftbox ul{ }
#system-contentsw .main-site-bx .leftbox ul li{ }
#system-contentsw .main-site-bx .leftbox ul li p {font-size: 18px;line-height: 1.4;letter-spacing: 0px;
  font-weight: 700;position: relative;padding-left: 100px;margin-bottom: 12px;}
#system-contentsw .main-site-bx .leftbox ul li p span{position: absolute;top: 0;left: 0;}
#system-contentsw .main-site-bx .rightbox{ width: 550px; float: left; }
#system-contentsw .main-site-bx .rightbox h3{font-size: 29px;line-height: 1.6;letter-spacing: 0px;font-weight: 700;border-bottom: 1px solid #fff;padding-bottom: 14px;margin-bottom: 14px;}
#system-contentsw .main-site-bx .rightbox p { font-size: 16px; line-height: 34px; letter-spacing: 0.8px; font-weight: 500; }

#system-contentsw .main-site-bx2 {width: 1200px;margin: 0 auto 90px;}
#system-contentsw .main-site-bx2 ul{ display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#system-contentsw .main-site-bx2 ul li{ margin-right: 50px; width: 700px;}
#system-contentsw .main-site-bx2 ul li:nth-child(2){ margin-right: 20px; width: 215px;}
#system-contentsw .main-site-bx2 ul li:nth-child(3){ margin-right: 0px; width: 215px;}
#system-contentsw .main-site-bx2 ul li img{ width: 100%; height: auto;}

#system-contentsw .main-site-bx3 {background: #303030;padding: 90px 0 1px;}
#system-contentsw .main-site-bx3 .inbox {width: 1200px;margin: 0 auto 90px;}
#system-contentsw .main-site-bx3 ul{display: -webkit-box;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -ms-flexbox;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-bottom: 104px;}
#system-contentsw .main-site-bx3 ul li{ margin-right: 26px; width: 382px;}
#system-contentsw .main-site-bx3 ul li img{ width: 100%; height: auto;}
#system-contentsw .main-site-bx3 ul li:nth-child(3n){ margin-right: 0px; }
#system-contentsw .main-site-bx3 .spimages{ text-align: center; }

#works .pagen{width: 1100px;margin: 0 auto -60px;position: relative;z-index: 3;}
#works .pagen .lista{position: absolute;left: 50%;transform: translateX(-50%);top: -46px;width: 440px;}

}





@media screen and (min-width: 768px) and (max-width: 1500px) {
  #works #mainbox {max-width: 1920px;background: url(../images/works/contentsmain-back02.png) no-repeat bottom center, url(../images/works/contentsmain-back01.png) no-repeat top center;background-size: cover;padding: 0 0 10vw 0;margin: 0 0 -16vw 0;}
  #works #mainbox .inner-Box {max-width: 96vw; margin: 0 auto; padding: 0 2vw; width: 100%; min-width: 85.33vw;}
  #works #mainbox .inner-Box h2.smainttl {text-align: center; padding: 3.27vw 0 2.8vw; position: relative; left: -0.33vw;}
  #works #mainbox ul {display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
  #works #mainbox li {border:0.13vw solid #FFFFFF;width:30.4%;margin-right:2.82vw;position:relative;margin-bottom: 3.19vw;padding: 1vw 0vw 0 0vw;}
  #works #mainbox li a {display:block;padding: 0.5vw 0.5vw 0.5vw 0.5vw;}
  #works #mainbox ul li:nth-child(3n) {margin-right: 0vw;}
  #works #mainbox .postno {
    background-image:url(../images/works/works-num.svg);
    background-position:0px 0px;
    background-repeat:no-repeat;
    /* padding: 0.8vw 0.4vw 0.4vw 1.5vw; */
    display: inline-block;
    color: #191919;
    position: absolute;
    top: -1.67vw;
    width: 117px;
    left: -0.2vw;
    /* font-size: 1.2vw; */
    height: 34px;
    letter-spacing: 0.072vw;
    font-weight: 500;
    line-height: 1;
    }
  #works #mainbox .wkstext {font-size: 14px;line-height: 1.8;/* letter-spacing: 0.047vw; */font-weight: 500;}
  #works #mainbox .system-ttl-01 {/* font-size:1.15vw; *//* line-height:2.05vw; *//* letter-spacing:0.06vw; */font-weight:700;margin-bottom: 0.6vw;padding: 0 0.8vw 0 0.8vw;}
  #works #mainbox .system-pic {width:100%;height: 15.8vw;overflow:hidden;margin-bottom: 0;}
  #works #mainbox .system-pic img {width: 100%;height: 16.1vw;}
  #works #mainbox span.arr {display: block; line-height: 1; position: absolute; bottom: -0.13vw; right: -0.13vw;}
  .page-list {font-size: 1.07vw; margin: 3.33vw 0 3.4vw; text-align: center;}
  .page-list a {padding: 2.07vw 1.53vw; display: inline-block; line-height: 1; margin: 0 0.7vw; border: 1px solid #00B7FF;}
  .page-list .current {padding: 2.07vw 1.53vw; display: inline-block; line-height: 1; margin: 0 0.23vw; border: 1px solid #00B7FF; background: #00B7FF;}
  .page-list a.next, .page-list a.prev, .page-list a.last, .page-list a.first {padding: 2.07vw 1.53vw; display: inline-block; line-height: 1; margin: 0 0.23vw; border: none; background: none; color: #fff; background: #242424;}
}




@media screen and (min-width: 768px) and (max-width: 1580px) {
  #system-contentsw {background: url(../images/works/contentsmain-back01.png) no-repeat top center; margin-bottom: 7.09vw;}
  #system-contentsw .inner-Box {}
  #system-contentsw .main-bx {max-width: 92.41vw; width: 100%; min-width: 81.01vw; margin: 0 auto; position: relative; padding: 1.96vw 1.89vw 3.61vw 1.89vw;}
  #system-contentsw .main-bx img {width: 100%; height: auto;}
  #system-contentsw .main-bx h2.system-ttl {font-size: 2.53vw; line-height: 2.91vw; letter-spacing: 0vw; font-weight: 700; margin-bottom: 1.83vw;}
  
  #system-contentsw .main-site-bx {width: 86vw;margin: 0 auto 4.81vw;}
  #system-contentsw .main-site-bx .leftbox {width: 34.84vw;float: left;margin-right: 3vw;}
  #system-contentsw .main-site-bx .leftbox h3 {font-size: 1.83vw; line-height: 1.6; letter-spacing: 0vw; font-weight: 700; border-bottom: 1px solid #fff; padding-bottom: 0.89vw; margin-bottom: 0.89vw;}
  #system-contentsw .main-site-bx .leftbox ul {}
  #system-contentsw .main-site-bx .leftbox ul li {}
  #system-contentsw .main-site-bx .leftbox ul li p {font-size: 16px;line-height: 1.4;letter-spacing: 0vw;
    font-weight: 700;position: relative;padding-left: 7.33vw;margin-bottom: 0.8vw;}
  #system-contentsw .main-site-bx .leftbox ul li p span {position: absolute; top: 0; left: 0;}
  #system-contentsw .main-site-bx .rightbox {width: 48vw;float: left;}
  #system-contentsw .main-site-bx .rightbox h3 {font-size: 1.83vw; line-height: 1.6; letter-spacing: 0vw; font-weight: 700; border-bottom: 1px solid #fff; padding-bottom: 0.89vw; margin-bottom: 0.89vw;}
  #system-contentsw .main-site-bx .rightbox p {font-size: 14px;line-height: 2.2;/* letter-spacing: 0.05vw; */font-weight: 500;}
  
  #system-contentsw .main-site-bx2 {width: 75.95vw; margin: 0 auto 5.7vw;}
  #system-contentsw .main-site-bx2 ul {display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
  #system-contentsw .main-site-bx2 ul li {margin-right: 3.23vw; width: 44.3vw;}
  #system-contentsw .main-site-bx2 ul li:nth-child(2) {margin-right: 1.2vw; width: 13.61vw;}
  #system-contentsw .main-site-bx2 ul li:nth-child(3) {margin-right: 0vw; width: 13.61vw;}
  #system-contentsw .main-site-bx2 ul li img {width: 100%; height: auto;}
  
  #system-contentsw .main-site-bx3 {background: #303030;padding: 5.7vw 0 0.06vw;}
  #system-contentsw .main-site-bx3 .inbox {width: 75.95vw;margin: 0 auto 5.7vw;}
  #system-contentsw .main-site-bx3 ul {display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 6.58vw;}
  #system-contentsw .main-site-bx3 ul li {margin-right: 1.77vw; width: 24.11vw;}
  #system-contentsw .main-site-bx3 ul li img {width: 100%; height: auto;}
  #system-contentsw .main-site-bx3 ul li:nth-child(3n) {margin-right: 0vw;}
  #system-contentsw .main-site-bx3 .spimages {text-align: center;}
  
  #works .pagen img{width: 100%;}
  #works .pagen {width: 69.62vw; margin: 0 auto -3.8vw; position: relative; z-index: 3;}
  #works .pagen .lista {position: absolute;left: 50%;transform: translateX(-50%);top: -1.91vw;width: 25vw;}
}






@media screen and (max-width: 767px) {
    .main-title{ background: url(../images/works/sp-h1.png)no-repeat top right;background-size: 100% auto;}


    #works #mainbox {background: url(../images/works/sp-contentsmain-back02.png)no-repeat bottom center,url(../images/works/sp-contentsmain-back01.png)no-repeat top center;background-size: 100% auto;margin: -11vw 0 0;}
    #works #mainbox .inner-Box{}
    #works #mainbox .inner-Box h2.smainttl{text-align: center;padding: 1vw 4.4vw 10.1vw 7vw;position: relative;left: -1.2vw;margin-bottom: 17.3vw;}
    

    #works #mainbox ul{display: -webkit-box;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -ms-flexbox;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-bottom: 1vw;margin: 0 9vw;}
    #works #mainbox li{border: 0.5vw solid #FFFFFF;width: 82.2vw;position: relative;margin-bottom: 16.2vw;}
    #works #mainbox li a{display: block;padding: 6.5vw 3.1vw 0;}
    #works #mainbox  ul li:nth-child(3n) { margin-right: 0.0vw; }
    #works #mainbox li span.arr {display: block;line-height: 1;position: absolute;bottom: -0.5vw;right: -0.5vw;}
    
    #works #mainbox .postno {
      background-image:url(../images/works/sp-works-num.svg);
      background-position:0px 0px;
      background-repeat:no-repeat;
      width: 35vw;
      padding: 2.5vw 3.6vw 2.8vw 4.8vw;
      display: inline-block;
      color: #191919;
      position: absolute;
      top: -7.5vw;
      left: -0.7vw;
      font-size: 4.83vw;
      letter-spacing: 0.28vw;
      font-weight: 500;
      line-height: 1;
      height: 10vw;
      }
    #works #mainbox .wkstext{font-size: 3.38vw;line-height: 7.24vw;letter-spacing: 0.16vw;font-weight: 500;}
    #works #mainbox .system-ttl-01{font-size: 4.34vw;line-height: 7.24vw;letter-spacing: 0.56vw;font-weight: 700;margin-bottom: 2.3vw;}
    #works #mainbox .arr{ }
    #works #mainbox .arr img{width: 8.7vw;}
    #works #mainbox .system-pic{width: 100%;height: 45.4vw;/* overflow: hidden; */margin-bottom: 3.9vw;}
    #works #mainbox .system-pic img{height: 45.4vw;}
    
    .page-list {font-size: 3.9vw;margin: 12.1vw 0 12.3vw;text-align: center;}
    .page-list a {padding: 7.5vw 5.6vw;display: inline-block;/* color: #303030; */line-height: 1;margin: 0 2.5vw;border: 0.2vw solid #00B7FF;}
    .page-list .current {padding: 7.5vw 5.6vw;display: inline-block;line-height: 1;margin: 0 0.8vw;border: 0.2vw solid #00B7FF;background: #00B7FF;}
    .page-list a.next,.page-list a.prev,.page-list a.last,.page-list a.first {padding: 7.5vw 5.6vw;display: inline-block;line-height: 1;margin: 0 0.8vw;border: none;background: none;color: #fff;background: #242424;}
    

    #system-contentsw {background: url(../images/works/contentsmain-back01.png)no-repeat top center;margin-bottom: 27.1vw;}
    #system-contentsw .inner-Box{}
    
    #system-contentsw .main-bx{position: relative;margin: 0 9vw 10.2vw;}
    #system-contentsw .main-bx img{ width: 100%; height: auto;}
    #system-contentsw .main-bx h2.system-ttl{font-size: 4.83vw;line-height:1.6;letter-spacing: 0.3vw;font-weight: 700;margin: 0 -3.9vw 6.3vw;}
    
    #system-contentsw .main-site-bx {margin: 0 9vw 13.5vw;}
    #system-contentsw .main-site-bx .leftbox{
    margin-bottom: 8.6vw;
}
    #system-contentsw .main-site-bx .leftbox h3{font-size: 4.34vw;line-height: 1.6;letter-spacing: 0vw;font-weight: 700;border-bottom: 0.4vw solid #fff;padding-bottom: 4.9vw;margin-bottom: 3.8vw;}
    #system-contentsw .main-site-bx .leftbox ul{ }
    #system-contentsw .main-site-bx .leftbox ul li{ }
    #system-contentsw .main-site-bx .leftbox ul li p {font-size: 3.62vw;line-height: 2;letter-spacing: 0vw;font-weight: 700;position: relative;padding-left: 12.4vw;margin-bottom: 0.7vw;}
    #system-contentsw .main-site-bx .leftbox ul li p span{position: absolute;top: 0;left: 0;}
    #system-contentsw .main-site-bx .rightbox{   }
    #system-contentsw .main-site-bx .rightbox h3{font-size: 4.34vw;line-height: 1.6;letter-spacing: 0vw;font-weight: 700;border-bottom: 0.4vw solid #fff;padding-bottom: 4.9vw;margin-bottom: 3.8vw;}

    #system-contentsw .main-site-bx .rightbox p {font-size: 3.38vw;line-height: 2;letter-spacing: 0.16vw;font-weight: 500;}
    
    #system-contentsw .main-site-bx2 {margin: 0 auto 7.7vw;}
    #system-contentsw .main-site-bx2 ul{display: -webkit-box;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -ms-flexbox;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;margin: 0 9vw;}
    #system-contentsw .main-site-bx2 ul li{
    width: 100%;
    margin-bottom: 7.3vw;
    overflow: hidden;
}
    #system-contentsw .main-site-bx2 ul li:nth-child(2){
    /* height: 241vw; */
}
    #system-contentsw .main-site-bx2 ul li:nth-child(3){ margin-right: 0.0vw; }
    #system-contentsw .main-site-bx2 ul li img{ width: 100%; height: auto;}
    
    #system-contentsw .main-site-bx3 {background: #303030;padding: 15.7vw 0 0.2vw;}
    #system-contentsw .main-site-bx3 .inbox {margin: 0 auto 21.7vw;}
    #system-contentsw .main-site-bx3 ul{display: -webkit-box;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -ms-flexbox;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;margin: 0 8.9vw 25.1vw;}
    #system-contentsw .main-site-bx3 ul li{
    width: 100%;
    margin-bottom: 7.4vw;
}
    #system-contentsw .main-site-bx3 ul li img{ width: 100%; height: auto;}
    #system-contentsw .main-site-bx3 ul li:nth-child(3n){ margin-right: 0.0vw; }
    #system-contentsw .main-site-bx3 .spimages{text-align: center;overflow: hidden;margin: -17vw -20vw;}
    #system-contentsw .main-site-bx3 .spimages img{}
    
    #works .pagen{margin: 0 auto 14.9vw;position: relative;z-index: 3;padding-top: 11vw;}
    #works .pagen .lista{position: absolute;top: -17.1vw;margin: 0 5.5vw;}
    


}