@charset "UTF-8";

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

.main-titlebox h1.main-title .jp{top: 62.1%;height: 380px;}

#contentsmain {margin: -128px auto 0 auto;position: relative;background: url('../images/engineeringworks/contentsmain-back01.jpg')no-repeat top center;background-size: 100% auto;padding: 96px 0 183px;}
#contentsmain .inner-Box {margin: 0 auto;position: relative;text-align: center;color: #fff;}
#contentsmain .inner-Box h2 {font-size: 10.5rem;line-height: 1.75;font-weight: 700;letter-spacing: 1.05rem;margin-bottom: -21px;position: relative;opacity: 0.3;}
#contentsmain .inner-Box p.text {font-size: 1.6rem;line-height: 3;font-weight: 500;letter-spacing: 0.32rem;margin-bottom: 30px;position: relative;}

#contents01{background: #E9E7DE;position: relative;padding-bottom: 17.6rem;}
#contents01::before{content: "";display: block;width: 100%;height: 128px;background: url(../images/engineeringworks/contents01-back01.svg)no-repeat top center;position: absolute;top: -128px;left: 0;background-size: cover;}

#contents01 {}
#contents01 .inner-Box {margin: 0 auto 74px;position: relative;padding: 6px 4rem;max-width: 1180px;}
#contents01 .inner-Box h2 {font-size: 2.4rem;line-height: 1.75;font-weight: 700;letter-spacing: 0.48rem;margin-bottom: -9px;position: relative;text-align: center;}
#contents01 .inner-Box .tticon{display: block;text-align: center;margin-bottom: 40px;}
#contents01 .inner-Box .tticon img{ }
#contents01 .inner-Box ul.stlist {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;}
#contents01 .inner-Box ul.stlist li {position: relative;width: 31.5%;margin-right: 2.7%;}
#contents01 .inner-Box ul.stlist li:nth-child(3n) { margin-right: 0px; }
#contents01 .inner-Box figure.photo {position: relative;top: 0;left: 0;overflow: hidden;border-radius: 10px;margin-bottom: 19px;}
#contents01 .inner-Box figure.photo img{width: 100%;}
#contents01 .inner-Box h3 {font-size: 1.8rem;line-height: 1;font-weight: 700;letter-spacing: 0.18rem;margin-bottom: 14px;position: relative;color: #1788A0;border-left: #1788A0 5px solid;padding: 0 0 0 0.7rem;}
#contents01 .inner-Box p.ltext {font-size: 1.6rem;line-height: 2;font-weight: 400;letter-spacing: 0.16rem;margin-bottom: 27px;position: relative;}

#contents01 .inner-Box2 {margin: 0 auto 80px;position: relative;padding: 6px 4rem;max-width: 1180px;}
#contents01 .inner-Box2 h2 {font-size: 2.4rem;line-height: 1.75;font-weight: 700;letter-spacing: 0.48rem;margin-bottom: -9px;position: relative;text-align: center;}
#contents01 .inner-Box2 .tticon{display: block;text-align: center;margin-bottom: 40px;}
#contents01 .inner-Box2 .tticon img{ }
#contents01 .inner-Box2 ul.systemlist {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: 1.5rem;}
#contents01 .inner-Box2 ul.systemlist li {position: relative;width: 31.5%;margin-right: 2.7%;}
#contents01 .inner-Box2 ul.systemlist li:nth-child(3n) { margin-right: 0px; }
#contents01 .inner-Box2 ul.systemlist li a {  }
#contents01 .inner-Box2 ul.systemlist li a:hover {  }
#contents01 .inner-Box2 ul.systemlist li .systemphoto-box{position: relative;overflow: hidden;margin-bottom: 12px;}
#contents01 .inner-Box2 ul.systemlist .photo {width: 100%;aspect-ratio: 347 / 217;overflow: hidden;text-align: center;/* margin-bottom: 15px; */position: relative;border-radius: 1rem;}
#contents01 .inner-Box2 ul.systemlist .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

#contents01 .inner-Box2 p.systemcate {font-size: 1.2rem;line-height: 2;font-weight: 400;letter-spacing: 0.16rem;margin-bottom: 3px;position: relative;text-align: left;}
#contents01 .inner-Box2 p.systemcate span {display: inline-block;background: #C4C4C4;border-radius: 2rem;padding: 0.1rem 0.8rem;margin: 0 0.5rem 0.5rem 0;}
#contents01 .inner-Box2 p.systemttl {font-size: 1.6rem;line-height: 2;font-weight: 500;letter-spacing: 0.16rem;margin-bottom: 30px;position: relative;text-align: left;}
#contents01 .inner-Box2 p.smorebtn {font-size: 1.4rem;line-height: 2;font-weight: 700;letter-spacing: 0.28rem;margin-bottom: -28px;position: relative;text-align: center;}
#contents01 .inner-Box2 p.smorebtn span {cursor: pointer;display: inline-block;width: 15.5rem;height: 3.6rem;border: 1px solid #000000;border-radius: 21px;padding-top: 0.2rem;transition: all 0.3s ease-in-out;}
#contents01 .inner-Box2 p.smorebtn span:hover {background: #fff;}
}
@media screen and (min-width:768px) and ( max-width:1919px) {
	
#contentsmain { background-size: 1920px auto; }

	
}


@media screen and (max-width: 767px) {
.seo_bread_list{
    margin-bottom: 51.8vw;
}
    .main-titlebox{}
    .main-titlebox h1.main-title .jp{top: 42.1vw;height: 90vw;left: 10.5vw;}

    #contentsmain {margin: -64vw auto 0 auto;position: relative;background: url('../images/engineeringworks/sp-contentsmain-back01.jpg')no-repeat top center;background-size: 100% auto;padding: 22.4vw 0 12.2vw;}
    #contentsmain .inner-Box {position: relative;text-align: center;color: #fff;}
    #contentsmain .inner-Box h2 {font-size: 14.13vw;line-height: 1.75;font-weight: 700;letter-spacing: 1.41vw;margin-bottom: -1.6vw;position: relative;opacity: 0.3;}
    #contentsmain .inner-Box p.text {font-size: 3.73vw;line-height: 2.5;font-weight: 500;letter-spacing: 0.75vw;margin: 0 5.4vw 8.0vw;position: relative;text-align: left;}
    
    #contents01{background: #E9E7DE;position: relative;padding-bottom: 3.6vw;}
    #contents01::before{content: "";display: block;width: 100vw;height: 7.13vw;background: url(../images/engineeringworks/contents01-back01.svg)no-repeat top center;position: absolute;top: -7vw;left: 0;background-size: cover;}
    
    #contents01 {}
    #contents01 .inner-Box {margin: 0 auto 4.63vw;position: relative;padding-top: 6.4vw;}
    #contents01 .inner-Box h2 {font-size: 5.87vw;line-height: 1.75;font-weight: 700;letter-spacing: 1.28vw;margin-bottom: -1.5vw;position: relative;text-align: center;}
    #contents01 .inner-Box .tticon{display: block;text-align: center;margin: 0 46.2vw 7.97vw;}
    #contents01 .inner-Box .tticon img{ }
    #contents01 .inner-Box ul.stlist {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 5.4vw;}
    #contents01 .inner-Box ul.stlist li {position: relative;width: 100%;margin-bottom: 0vw;}
    #contents01 .inner-Box ul.stlist li:nth-child(3n) { margin-right: 0.0vw; }
    #contents01 .inner-Box figure.photo {position: relative;top: 0;left: 0;overflow: hidden;border-radius: 2.67vw;margin-bottom: 5.07vw;}
    #contents01 .inner-Box figure.photo img{width: 100%;}
    #contents01 .inner-Box h3 {font-size: 4.8vw;line-height: 1;font-weight: 700;letter-spacing: 0.48vw;margin-bottom: 3.73vw;position: relative;color: #1788A0;border-left: #1788A0 1.33vw solid;padding: 0 0 0 0.7rem;}
    #contents01 .inner-Box p.ltext {font-size: 3.73vw;line-height: 2;font-weight: 400;letter-spacing: 0.43vw;margin-bottom: 7.2vw;position: relative;}
    
    #contents01 .inner-Box2 {margin: 0 auto 21.33vw;position: relative;}
    #contents01 .inner-Box2 h2 {font-size: 5.87vw;line-height: 1.75;font-weight: 700;letter-spacing: 1.28vw;margin-bottom: -1.5vw;position: relative;text-align: center;}
    #contents01 .inner-Box2 .tticon{display: block;text-align: center;margin: 0 46.2vw 7.97vw;}
    #contents01 .inner-Box2 .tticon img{ }
    #contents01 .inner-Box2 ul.systemlist {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 1.3vw;}
    #contents01 .inner-Box2 ul.systemlist li {position: relative;width: 100%;margin-bottom: 7.4vw;}
    #contents01 .inner-Box2 ul.systemlist li:nth-child(3n) { margin-right: 0.0vw; }
    #contents01 .inner-Box2 ul.systemlist li a {  }
    #contents01 .inner-Box2 ul.systemlist li a:hover {  }
    #contents01 .inner-Box2 ul.systemlist li .systemphoto-box{position: relative;overflow: hidden;margin-bottom: 3.2vw;}
    #contents01 .inner-Box2 ul.systemlist .photo {width: 100%;aspect-ratio: 347 / 217;overflow: hidden;text-align: center;/* margin-bottom: 4.0vw; */position: relative;border-radius: 2.67vw;}
    #contents01 .inner-Box2 ul.systemlist .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    
    #contents01 .inner-Box2 p.systemcate {font-size: 3.2vw;line-height: 2;font-weight: 400;letter-spacing: 0.43vw;margin-bottom: 0.8vw;position: relative;text-align: left;}
    #contents01 .inner-Box2 p.systemcate span {display: inline-block;background: #C4C4C4;border-radius: 2rem;padding: 0.1rem 0.8rem;margin: 0 0.5rem 0.5rem 0;}
    #contents01 .inner-Box2 p.systemttl {font-size: 4.27vw;line-height: 2;font-weight: 500;letter-spacing: 0.43vw;position: relative;text-align: left;}
    #contents01 .inner-Box2 p.smorebtn {font-size: 3.73vw;line-height: 2;font-weight: 700;letter-spacing: 0.75vw;margin-bottom: 0vw;position: relative;text-align: center;}
    #contents01 .inner-Box2 p.smorebtn span {cursor: pointer;display: inline-block;width: 41.5vw;height: 9.5vw;border: 0.27vw solid #000000;border-radius: 5.6vw;padding-top: 0.2rem;transition: all 0.3s ease-in-out;}
    #contents01 .inner-Box2 p.smorebtn span:hover {background: #fff;}
}