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


#works {
position:relative;
margin: 0 auto 150px
}

#works .section_wrap{
width: 1200px;
margin: 0 auto;
}

/*index
--------------------------*/
#works .works_list{
width: 100%;
margin: 0 auto 60px;
display: flex;
flex-wrap: wrap;
}

#works .works_list li{
width: 31.5%;
margin-right: 2%;
margin-bottom: 2%;
padding: 5px;
box-sizing: border-box;
transition: .5s;
border:1px solid rgba(0,72,134);
}

#works .works_list li a{
display: block;
transition: .5s;
}

#works .works_list li a:hover{
transition: .5s;
opacity: .5;
}

#works .works_list li:nth-child(3n){
margin-right: 0;
}

#works .works_list li .img{
overflow: hidden;
margin:0;
}

#works .works_list li h2{
font-size: .8rem;
line-height: 1;
font-weight: 300;
padding: 10px 5px;
box-sizing: border-box;
color: #121212;

}

#works .works_list li h2 span{
display: block;
font-size: 1.5rem;
margin-bottom: 5px;
color: rgba(0,72,134);
}


/*ct_list
----------------------------------*/

#works .ct_list{
width: 100%;
margin: 40px auto 60px;
display: flex;
flex-wrap: wrap;
}

#works .ct_list li{
width: 31.5%;
margin-right: 2%;
margin-bottom: 2%;
transition: .5s;
position: relative;
}

#works .ct_list li a{
display: block;
transition: .5s;
color: #121212;
}

#works .ct_list li a:hover{
opacity: .5;
transition: .5s;
}

#works .ct_list li:nth-child(3n){
margin-right: 0;
}

#works .ct_list li .img{
border-radius: .5rem;
overflow: hidden;
margin: 0 0 20px;
}

#works .ct_list li h2{
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
margin: 0 0 20px;
}

#works .ct_list li dl{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: .8rem;
margin: 0 0 20px;
}

#works .ct_list li dl dt{
width: 100px;
padding: 5px;
box-sizing: border-box;
border-bottom: 1px solid #00488a;
white-space: nowrap;
font-weight: 500;
}

#works .ct_list li dl dd{
width:calc(100% - 100px);
padding: 5px;
box-sizing: border-box;
text-align: left;
border-bottom: 1px solid rgba(0,0,0,.15);
}


/*detail
---------------------------------*/
#works .common_btn_box{
text-align: center;
}
#works .block{
width: 100%;
margin: 0 auto 160px;
min-width: 1200px;
}
.slider {
width: 100%;
margin: 0 0 160px;
}
.slider .slick-slide{
margin-right:12px!important;
margin-left:12px!important;
}

#works .block .txt_box{
width: 1000px;
margin:80px auto 120px;
}

#works .block .txt_box .red_txt{
font-weight: 300;
margin: 0 0 40px;
text-align: center;
}

#works .block .txt_box .detail_list{
width: 600px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: .9rem;
}

#works .block .txt_box .detail_list dt{
padding:10px 5px;
box-sizing: border-box;
width: 20%;
border-bottom: 1px solid #002386;
}

#works .block .txt_box .detail_list dd{
padding:10px 5px;
box-sizing: border-box;
width:80%;
border-bottom: 1px solid #002386;
}


.pagination {
display:inline-block;
padding-left:0;
margin:20px 0;
border-radius:4px
}
.pagination>li {
display:inline
}
.pagination>li>a,
.pagination>li>span {
position:relative;
float:left;
padding:6px 12px;
margin-left:-1px;
line-height:1.42857143;
color:#002386;
text-decoration:none;
background-color:#fff;
border:1px solid #ddd
}
.pagination>li:first-child>a,
.pagination>li:first-child>span {
margin-left:0;
border-top-left-radius:4px;
border-bottom-left-radius:4px
}
.pagination>li:last-child>a,
.pagination>li:last-child>span {
border-top-right-radius:4px;
border-bottom-right-radius:4px
}
.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
color:#2a6496;
background-color:#eee;
border-color:#ddd
}
.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
z-index:2;
color:#fff;
cursor:default;
background-color:#002386;
border-color:#002386
}
.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
color:#777;
cursor:not-allowed;
background-color:#fff;
border-color:#ddd
}
.pagination-lg>li>a,
.pagination-lg>li>span {
padding:10px 16px;
font-size:18px
}
.pagination-lg>li:first-child>a,
.pagination-lg>li:first-child>span {
border-top-left-radius:6px;
border-bottom-left-radius:6px
}
.pagination-lg>li:last-child>a,
.pagination-lg>li:last-child>span {
border-top-right-radius:6px;
border-bottom-right-radius:6px
}
.pagination-sm>li>a,
.pagination-sm>li>span {
padding:5px 10px;
font-size:12px
}
.pagination-sm>li:first-child>a,
.pagination-sm>li:first-child>span {
border-top-left-radius:3px;
border-bottom-left-radius:3px
}
.pagination-sm>li:last-child>a,
.pagination-sm>li:last-child>span {
border-top-right-radius:3px;
border-bottom-right-radius:3px
}


}
/*sp*/
@media only screen and (max-width: 767px) {


#works {
position:relative;
margin: 0 auto 80px
}

#works .section_wrap{
width: 90%;
margin: 0 auto;
}


/*index
--------------------------------*/
#works .works_list{
width: 100%;
margin: 0 auto;
}

#works .works_list li{
width:100%;
margin-bottom:15px;
padding: 5px;
box-sizing: border-box;
transition: .5s;
border:1px solid rgba(0,72,134);
}

#works .works_list li a{
display: block;
transition: .5s;
}

#works .works_list li a:hover{
transition: .5s;
opacity: .5;
}

#works .works_list li .img{
overflow: hidden;
margin:0;
}

#works .works_list li h2{
font-size: .7rem;
line-height: 1;
font-weight: 300;
padding: 10px 5px;
box-sizing: border-box;
color: #121212;

}

#works .works_list li h2 span{
display: block;
font-size: 1.2rem;
margin-bottom: 5px;
color: rgba(0,72,134);
}

/*ct_list
----------------------------------*/

#works .ct_list{
width: 100%;
margin: 40px auto 60px;
display: flex;
flex-wrap: wrap;
}

#works .ct_list li{
width: 49%;
margin-bottom: 2%;
transition: .5s;
position: relative;
}

#works .ct_list li a{
display: block;
transition: .5s;
color: #121212;
}

#works .ct_list li a:hover{
opacity: .5;
transition: .5s;
}

#works .ct_list li:nth-child(3n){
margin-right: 0;
}

#works .ct_list li .img{
border-radius: .5rem;
overflow: hidden;
margin: 0 0 15px;
}

#works .ct_list li h2{
font-size: .8rem;
font-weight: 600;
line-height: 1.4;
margin: 0 0 10px;
}

#works .ct_list li dl{
font-size: .75rem;
margin: 0 0 20px;
}

#works .ct_list li dl dt{
width:100%;
padding: 5px 5px 0;
box-sizing: border-box;
white-space: nowrap;
font-weight: 500;
}

#works .ct_list li dl dd{
width:100%;
padding: 5px;
box-sizing: border-box;
text-align: left;
border-bottom: 1px solid rgba(0,0,0,.15);
}

/*detail
---------------------------------*/
#works .common_btn_box{
text-align: center;
}
#works .block{
width: 100%;
margin: 0 auto 60px;
}
.slider {
width: 100%;
margin: 0 0 80px;
}
.slider .slick-slide{
margin-right:8px!important;
margin-left:8px!important;
}

#works .block .txt_box{
width: 80%;
margin:60px auto 80px;
}

#works .block .txt_box .red_txt{
font-weight: 300;
margin: 0 0 40px;
text-align: center;
}

#works .block .txt_box .detail_list{
width: 100%;
margin: auto;
}

#works .block .txt_box .detail_list dt{
padding:10px 5px 0;
box-sizing: border-box;
width:100%;
line-height: 1;
font-size: .7rem;
}

#works .block .txt_box .detail_list dd{
padding:10px 5px;
box-sizing: border-box;
width:100%;
border-bottom: 1px solid #002386;
font-size: .8rem;
}


.pagination {
display:inline-block;
padding-left:0;
margin:20px 0;
border-radius:4px
}
.pagination>li {
display:inline
}
.pagination>li>a,
.pagination>li>span {
position:relative;
float:left;
padding:6px 12px;
margin-left:-1px;
line-height:1.42857143;
color:#002386;
text-decoration:none;
background-color:#fff;
border:1px solid #ddd
}
.pagination>li:first-child>a,
.pagination>li:first-child>span {
margin-left:0;
border-top-left-radius:4px;
border-bottom-left-radius:4px
}
.pagination>li:last-child>a,
.pagination>li:last-child>span {
border-top-right-radius:4px;
border-bottom-right-radius:4px
}
.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
color:#2a6496;
background-color:#eee;
border-color:#ddd
}
.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
z-index:2;
color:#fff;
cursor:default;
background-color:#002386;
border-color:#002386
}
.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
color:#777;
cursor:not-allowed;
background-color:#fff;
border-color:#ddd
}
.pagination-lg>li>a,
.pagination-lg>li>span {
padding:10px 16px;
font-size:18px
}
.pagination-lg>li:first-child>a,
.pagination-lg>li:first-child>span {
border-top-left-radius:6px;
border-bottom-left-radius:6px
}
.pagination-lg>li:last-child>a,
.pagination-lg>li:last-child>span {
border-top-right-radius:6px;
border-bottom-right-radius:6px
}
.pagination-sm>li>a,
.pagination-sm>li>span {
padding:5px 10px;
font-size:12px
}
.pagination-sm>li:first-child>a,
.pagination-sm>li:first-child>span {
border-top-left-radius:3px;
border-bottom-left-radius:3px
}
.pagination-sm>li:last-child>a,
.pagination-sm>li:last-child>span {
border-top-right-radius:3px;
border-bottom-right-radius:3px
}

}