@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-top:39.14%; height:0; background-image:url("../../img/pc/works_main2.jpg"); background-repeat:no-repeat; background-size:115%; background-position:-90px 0;}

#works_sub{width:100%; border-top:1px solid #ddd; margin:0 auto;}
#works_sub h3{font-size:130%; color:#4b5861; text-align:center; margin:3% auto; padding:0;}
#works_sub p{text-align:left; font-size:90%; line-height:200%; margin:3% auto; color:#333; width:94%;}

#works_con{width:100%; margin:4% auto 6% auto;}
#works_con ul{margin:0 auto; padding:0; list-style:none; width:100%;}
#works_con li{width:33.33%; margin:0 0 0 0; padding:0; float:left; height:410px;}
#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:100%; height:175px; 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:100%; line-height:150%; color:#4b5861; text-align:center; margin:18px auto 10px auto; padding:0 20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#works_con li p{text-align:center; font-size:80%; 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:70%;}
.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:142px; background:#7b94a5; padding:12px 0 12px 20px; text-align:center; color:#fff; text-decoration:none; margin:0 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:100%;}
.works_title_box{border:solid 1px #ddd; border-top:none; padding:0; margin:0; width:100%; box-sizing:border-box;}
.works_title_box h2.works_title{font-size:120%; color:#4b5861; text-align:left; line-height:100%; margin:-7px 0 0 0; padding:4% 4% 1% 4%; border:0;}
.works_title_box p.works_title_subtext{text-align:left; font-size:90%; line-height:160%; margin:0 0 3% 4%; color:#333; padding:0; font-weight:bold;}

.works_detail{width:100%;}
.works_detail ul{width:90%; margin:0 auto; padding:3% 0 3% 3%;}
.works_detail ul li{width:100%; margin:0 0 2% 0; padding:0; font-size:90%; line-height:190%;}

.works_detail_pict{width:100%;}
.works_detail_pict ul{width:100%; list-style:none; margin:0; padding:0;}
.works_detail_pict ul li{width:80%; margin:0 auto 2.5% auto; padding:0;}
.works_detail_pict ul li p{text-align:center; font-size:80%; line-height:160%; margin:0 auto; padding:0;}

.content_l .detail_btn{width:275px; margin:10% auto; padding:0;}