@charset "utf-8";
/* CSS Document */

.works_main{width:100%;}
.works_main h2{text-indent:100%; white-space:nowrap; line-height:100%; overflow:hidden; margin:0; padding:0; height:595px; background-image:url("../../img/pc/works_main2.jpg"); background-repeat:no-repeat; background-size:cover; background-position:center center;}

#works_sub{width:850px; margin:40px auto;}
#works_sub h3{font-size:180%; color:#4b5861; text-align:center; margin:0 auto; padding:0;}
#works_sub p{text-align:left; font-size:100%; line-height:200%; margin:30px auto; color:#333;}

#works_con{width:1265px; margin:40px auto 60px auto;}
#works_con ul{margin:0 auto; padding:0; list-style:none; width:1265px;}
#works_con li{width:305px; margin:0 0 0 15px; padding:0; float:left; height:480px;}
#works_con li:nth-child(4n+1){margin:0 0 0 0;}
#works_con li a{display:block; text-decoration:none; padding:0 0 20px 0;}
#works_con li a:hover{background-color:#f9fbfc;}
#works_con li .works_pict{width:305px; height:225px; overflow:hidden;}
#works_con li .works_pict img:hover{transform:scale(1.1,1.1); transition:0.5s all; opacity:0.8;}

#works_con li h4{font-size:110%; line-height:150%; color:#4b5861; text-align:center; margin:18px auto 10px auto; padding:0 20px;}
#works_con li p{text-align:center; font-size:87%; line-height:160%; margin:10px auto; color:#333; padding:0 20px; height:50px;}

.works_detail_arrow{position:relative; display:inline-block; padding:0; color:#fff; vertical-align:middle; text-decoration:none; font-size:100%;}
.works_detail_arrow::before,.works_detail_arrow::after{position:absolute; top:0; bottom:0; left:0; margin:auto; content:""; vertical-align:middle;}

.works_detail_arrow_icon::before{left:34px; top:0px; width:6px; height:6px; border-top:1px solid #fff; border-right:1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg);}

.works_detail_btn{display:block; position:relative; overflow:hidden; width:180px; background:#7b94a5; padding:12px 0 12px 20px; text-align:center; color:#fff; text-decoration:none; margin:20px auto 0 auto;}
.works_detail_btn:after{content:""; position:absolute; top:-100%; left:-150%; height:100%; width:182px; background :#fff; opacity:0.3; transition:.4s;}
.works_detail_btn:hover:after{top:0; left:0;}


/* works_detail */
.works_detail_main{width:770px;}
.works_title_box{border:solid 1px #ddd; border-top:none; padding:0; margin:0; width:770px; box-sizing:border-box;}
.works_title_box h2.works_title{font-size:140%; color:#4b5861; text-align:left; line-height:100%; margin:-7px 0 0 0; padding:30px 40px 10px 40px; border:0; width:688px;}
.works_title_box p.works_title_subtext{text-align:left; font-size:100%; line-height:160%; margin:0 0 30px 40px; color:#333; padding:0; font-weight:bold;}

.works_detail{width:770px;}
.works_detail ul{width:740px; margin:0; padding:10px 0 30px 30px;}
.works_detail ul li{width:740px; margin:0 0 5px 0; padding:0; font-size:100%; line-height:190%;}

.works_detail_pict{width:770px;}
.works_detail_pict ul{width:770px; list-style:none; margin:0; padding:0;}
.works_detail_pict ul li{float:left; width:380px; margin:0 0 25px 10px; padding:0;}
.works_detail_pict ul li:nth-child(2n+1){margin:0 0 25px 0;}
.works_detail_pict ul li p{text-align:center; width:380px; font-size:90%; line-height:160%; margin:0 auto; padding:0;}

.content_l .detail_btn{width:275px; margin:50px auto 300px auto; padding:0;}