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

#works-section {position: relative;overflow: hidden;margin-bottom: 46px;z-index: 0;}      
#works-section .inner-Box {max-width: 1271px;padding: 0px 0px 54px;margin: 0 auto;position: relative;z-index: 2;}      

#works-section .inner-Box h2{font-size: 3.4rem;font-weight: bold;letter-spacing: 0.102rem;margin-left: 6px;margin-bottom: -39px;}
#works-section .inner-Box h2 .f-en{font-size: 1.4rem;font-weight: bold;color: #0057AA;display: block;margin-bottom: 13px;position: relative;right: 6px;}
#works-section .inner-Box h2 .f-en img{display: inline-block;margin: 0 15px 0 0;position: relative;top: -4px;left: 5px;}

#works-section .subtext{margin-left: 184px;margin-bottom: 73px;font-size: 1.6rem;}
#works-section .inner-Box .system-list{}
#works-section .inner-Box .system-list .inb{border-bottom: #D2D2D2 1px solid;padding: 0 0 47px;margin-bottom: 56px;}
#works-section .inner-Box .system-list .inb .worksphoto{position: relative;margin-bottom: 14px;width: 31.1%;float: left;margin-right: 5.3%;}
#works-section .inner-Box .system-list .inb .img{overflow: hidden;border-radius: 19px;}
#works-section .inner-Box .system-list .inb .img img{width: 100%;height: 260px;}
#works-section .inner-Box .system-list .inb h3{text-align: left;color: #0057AA;font-size: 2.8rem;font-weight: bold;letter-spacing: 0.14rem;margin-bottom: 18px;}
#works-section .inner-Box .system-list .systext{font-size: 1.6rem;line-height: 1.8;margin-bottom: 28px;}
#works-section .inner-Box .system-list a.link-arr .post-arrow{ top: auto; bottom: 2px; right: 0; }

#works-section .inner-Box .system-list .inb .textbox{width: 62.9%;float: left;}
#works-section .inner-Box .system-list .inb .textbox .mibox{border-radius: 16px;background: #fff;padding: 24px 24px 19px 45px;background: #F3F5FA;}
#works-section .inner-Box .system-list .inb .textbox .mibox .mtext{font-size: 1.6rem;letter-spacing: 0.08rem;margin-bottom: 3px;position: relative;padding-left: 89px;}
#works-section .inner-Box .system-list .inb .textbox .mibox .mtext span{position: absolute;top: 0;left: 0;font-weight: bold;}
#works-section .inner-Box .system-list .inb .textbox .mibox .mtext span::before{content: "";display: block;width: 7px;height: 7px;background: #0057AA;border-radius: 50%;position: absolute;top: 10px;left: -14px;}


#works-section .inner-Box .system-list .slick-dots {position: absolute;bottom: -17px;display: block;width: 100%;padding: 0 5px 0;margin: 0  0 0;list-style: none;z-index: 3;text-align: center;}
#works-section .inner-Box .system-list .slick-dots li {position: relative;display: inline-block;width: 10px;height: 10px;margin: 0 5px;padding: 0;cursor: pointer;}
#works-section .inner-Box .system-list .slick-dots li button {font-size: 0;line-height: 0;display: block;width: 10px;height: 10px;padding: 5px;cursor: pointer;color: transparent;border: 0;outline: none;background: transparent;background: #E2E5E7;border-radius: 50%;}
#works-section .inner-Box .system-list .slick-dots li button:hover,
#works-section .inner-Box .system-list .slick-dots li button:focus { outline: none; }
#works-section .inner-Box .system-list .slick-dots li button:hover:before,
#works-section .inner-Box .system-list .slick-dots li button:focus:before { opacity: 1; }
#works-section .inner-Box .system-list .slick-dots li button:before {font-family: 'slick';font-size: 6px;line-height: 20px;position: absolute;top: 0;left: 0;width: 10px;height: 10px;content: ' ';text-align: center;opacity: .25;color: black;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
#works-section .inner-Box .system-list .slick-dots li.slick-active button { background: #0057AA; }


.main-title{padding: 109px 5.1rem 0;}
#works-section .ltext{margin-bottom: 54px;}


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

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

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


}



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

  #works-section {position: relative;overflow: hidden;margin-bottom: 12.27vw;z-index: 0;}      
#works-section .inner-Box {padding: 6.73vw 0.0vw 14.4vw;margin: 0 6.2vw;position: relative;z-index: 2;}      

#works-section .inner-Box h2{font-size: 9.07vw;font-weight: bold;letter-spacing: 0.27vw;margin-left: 1.6vw;margin-bottom: 0vw;}
#works-section .inner-Box h2 .f-en{font-size: 3.73vw;font-weight: bold;color: #0057AA;display: block;margin-bottom: 3.47vw;position: relative;right: 1.6vw;}
#works-section .inner-Box h2 .f-en img{display: inline-block;margin: 0 4.0vw 0 0;position: relative;top: 0vw;left: 1.33vw;}

#works-section .subtext{margin-left: 49.07vw;margin-bottom: 19.47vw;font-size: 4.27vw;}
#works-section .inner-Box .system-list{}
#works-section .inner-Box .system-list .inb{border-bottom: #D2D2D2 0.27vw solid;padding: 0 0 7.53vw;margin-bottom: 8.63vw;}
#works-section .inner-Box .system-list .inb .worksphoto{position: relative;margin-bottom: 8.73vw;width: 100%;}
#works-section .inner-Box .system-list .inb .img{overflow: hidden;border-radius: 2.77vw;}
#works-section .inner-Box .system-list .inb .img img{width: 100%;height: 59.83vw;}
#works-section .inner-Box .system-list .inb h3{text-align: left;color: #0057AA;font-size: 4.80vw;font-weight: bold;letter-spacing: 0.24vw;margin-bottom: 3.3vw;}
#works-section .inner-Box .system-list .systext{font-size: 3.73vw;line-height: 1.8;letter-spacing: 0.19vw;margin-bottom: 5.47vw;}
#works-section .inner-Box .system-list a.link-arr .post-arrow{ top: auto; bottom: 0.53vw; right: 0; }

#works-section .inner-Box .system-list .inb .textbox{width: 100%;}
#works-section .inner-Box .system-list .inb .textbox .mibox{border-radius: 4.27vw;background: #fff;padding: 6.1vw 6.4vw 5.07vw 6.3vw;background: #F3F5FA;}
#works-section .inner-Box .system-list .inb .textbox .mibox .mtext{font-size: 3.73vw;letter-spacing: 0.19vw;margin-bottom: 2.2vw;position: relative;}
#works-section .inner-Box .system-list .inb .textbox .mibox .mtext span{position: relative;top: 0;left: 0;font-weight: bold;display: block;padding: 0 0 0 3.9vw;}
#works-section .inner-Box .system-list .inb .textbox .mibox .mtext span::before{content: "";display: block;width: 1.37vw;height: 1.37vw;background: #0057AA;border-radius: 50%;position: absolute;top: 2.27vw;left: 0.2vw;}


#works-section .inner-Box .system-list .slick-dots {position: absolute;bottom: -5.5vw;display: block;width: 100%;padding: 0 1.33vw 0;margin: 0  0 0;list-style: none;z-index: 3;text-align: center;}
#works-section .inner-Box .system-list .slick-dots li {position: relative;display: inline-block;height: 2.13vw;width: 2.13vw;margin: 0 1.33vw;padding: 0;cursor: pointer;}
#works-section .inner-Box .system-list .slick-dots li button {font-size: 0;line-height: 0;display: block;width: 2.13vw;height: 2.13vw;padding: 1.33vw;cursor: pointer;color: transparent;border: 0;outline: none;background: transparent;background: #E2E5E7;border-radius: 50%;}
#works-section .inner-Box .system-list .slick-dots li button:hover,
#works-section .inner-Box .system-list .slick-dots li button:focus { outline: none; }
#works-section .inner-Box .system-list .slick-dots li button:hover:before,
#works-section .inner-Box .system-list .slick-dots li button:focus:before { opacity: 1; }
#works-section .inner-Box .system-list .slick-dots li button:before {font-family: 'slick';font-size: 1.6vw;line-height: 5.33vw;position: absolute;top: 0;left: 0;height: 2.13vw;width: 2.13vw;content: ' ';text-align: center;opacity: .25;color: black;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
#works-section .inner-Box .system-list .slick-dots li.slick-active button { background: #0057AA; }


.main-title{padding: 2.2vw 0 0 2.3vw;}
#works-section .ltext{margin-bottom: 4vw;font-size: 3.73vw;letter-spacing: 0.19vw;}

}