@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:73.19%; height:0; background-image:url("../../img/sp/top_main_large2_sp.jpg"); background-repeat:no-repeat; background-size:contain;}

#works_sub{width:100%; margin:5% auto 0 auto;}
#works_sub h3{font-size:120%; color:#4b5861; text-align:center; margin:0 auto; padding:0;}
#works_sub p{text-align:left; font-size:100%; line-height:200%; margin:5% auto 7% auto; width:88%;}

#works_con{width:100%; margin:0 auto 0 auto;}
#works_con ul{margin:0 auto; padding:0; list-style:none; width:100%;}
#works_con li{width:50%; margin:0; padding:0; float:left;}
#works_con li a{display:block; text-decoration:none; padding:0 0 12% 0;}
#works_con li a:hover{background-color:#f9fbfc;}
#works_con li .works_pict{width:100%; height:150px; overflow:hidden;}
#works_con li .works_pict img:hover{opacity:0.8;}

#works_con li h4{font-size:90%; line-height:150%; color:#4b5861; text-align:center; margin:4% auto 5% auto; padding:0 4%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#works_con li p{text-align:center; font-size:90%; line-height:160%; margin:5% auto 6% auto; color:#333; padding:0 4%;}

.works_detail_arrow{position:relative; display:inline-block; padding:0; color:#fff; vertical-align:middle; text-decoration:none; font-size:90%;}
.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:20px; top:-2px; width:7px; height:7px; 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:70%; background:#7b94a5; padding:6% 0 6% 7%; text-align:center; color:#fff; text-decoration:none; margin:0 auto;}
.works_detail_btn:after{content:""; position:absolute; top:-100%; left:-150%; height:100%; width:100%; 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:center; line-height:100%; margin:0 0 0 0; padding:4% 4% 2% 4%; border:0; width:92%;}
.works_title_box p.works_title_subtext{text-align:center; font-size:100%; line-height:160%; margin:0 auto; color:#333; padding:0 4% 3% 4%; font-weight:bold; width:92%;}

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

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

.content_l .detail_btn{width:60%; margin:7% auto 0 auto; padding:0;}