@charset "UTF-8";

/*-------------------------
__style
-------------------------*/

/*==========一覧ここから==========*/

#report_list{ max-width: 1040px; overflow: hidden;}
#report_list ul li{ border: 5px solid #dcdddd; padding: 10px; box-sizing: border-box; float:left; margin-right:25px; margin-bottom: 25px; width: 33.33333%; width: calc((100% - 51px) / 3); width: -webkit-calc((100% - 51px) / 3); width: -moz-calc((100% - 51px) / 3);}
#report_list ul li .number{ font-size: 1.4em; font-weight: 700; margin-bottom: 10px;}
#report_list ul li .genba_photo{ margin-bottom: 10px; width: 100%; height: 240px; position: relative; overflow: hidden; background-color: #eee;}
#report_list ul li .genba_photo a{}
#report_list ul li .genba_photo a img{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 100%;}
#report_list ul li .genba_name{ font-size: 1.4em; font-weight: 700;}

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

#report_list ul li:nth-child(3n){ margin-right:0;}
#report_list ul li .genba_photo a img{-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease;}
#report_list ul li .genba_photo a:hover img{ filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}
    
}

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

#report_list ul li .number{ margin-bottom: 6px;}
#report_list ul li{ border: 3px solid #dcdddd; padding: 6px; box-sizing: border-box; float:left; margin-right:10px; margin-bottom: 10px; width: 50%; width: calc((100% - 10px) / 2); width: -webkit-calc((100% - 10px) / 2); width: -moz-calc((100% - 10px) / 2);}
#report_list ul li:nth-child(2n){ margin-right:0;}
#report_list ul li .genba_photo{ margin-bottom: 6px; width: 100%; height: 120px; position: relative; overflow: hidden; background-color: #eee;}
#report_list ul li .genba_name{ /*overflow: hidden; text-overflow: ellipsis; white-space: nowrap;*/font-size: 1.3em; line-height: 1.3em; font-weight: 700;}

}

/*==========詳細ここから==========*/


#detail_list .detail_box{ background-color: #efefef; padding: 20px; box-sizing: border-box; margin-bottom: 20px;}
#detail_list .detail_box .date{ font-size: 1.4em; line-height: 1.6; margin-bottom: 10px;}
#detail_list .detail_box .picture_box{}
#detail_list .detail_box .picture_box .detail_text{ font-size: 1.4em; line-height: 1.6;}

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

#detail_list .detail_box .picture_box ul.p_open{ width: 470px; float: left;}
#detail_list .detail_box .picture_box ul.p_open li{ width: 220px; height: 180px; position: relative; overflow: hidden; float: left;}
#detail_list .detail_box .picture_box ul.p_open li:nth-child(1){ margin-right: 10px;}
#detail_list .detail_box .picture_box ul.p_open li img{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 100%;
    -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease;}
#detail_list .detail_box .picture_box ul.p_open li:hover img{filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}
#detail_list .detail_box .picture_box .detail_text{ float: right; box-sizing: border-box; margin-left: -470px; padding-left: 470px; width: 100%;}
    
}

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

#detail_list .detail_box{ padding: 10px;}
#detail_list .detail_box .picture_box ul.p_open li{ overflow: hidden; height: 120px; position:relative; box-sizing: border-box; float:left; margin-right:10px; margin-bottom: 10px; width: 50%; width: calc((100% - 10px) / 2); width: -webkit-calc((100% - 10px) / 2); width: -moz-calc((100% - 10px) / 2);}
#detail_list .detail_box .picture_box ul.p_open li:nth-child(2n){ margin-right: 0px;}
#detail_list .detail_box .picture_box ul.p_open li img{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 100%;}
    
}

/*ページャー*/

.pager{ margin-top: 30px; margin-bottom: 30px;}
.pager  ul.pagination {text-align: center; margin: 0; padding: 0;}
.pager .pagination li { font-size: 1.4em; display: inline; margin: 0 2px; padding: 0; display: inline-block; background:#efefef; width: 40px; height: 50px; text-align: center; position: relative;}
.pager .pagination li a{ vertical-align: middle; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; display:table; color: #888; text-decoration: none;}
.pager .pagination li a span{ display:table-cell; vertical-align:middle;}
.pager .pagination li a:hover,
.pager .pagination li a.active{ color: #fff; background: #00349f;}
.back_btn{ text-align: center; width: 190px; margin: 30px auto 0;}
.back_btn a{ font-size: 1.5em; font-weight: 700; display: block; padding: 12px 0 10px; color: #00349f; text-decoration: none; border: 2px solid #00349f;}
.back_btn a:hover{color: #ffffff; background-color: #00349f;}

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

.pager .pagination li{ display: none;}
.pager .pagination li.pre,
.pager .pagination li.next{ display: inline-block; width: 40%; height: 50px; text-align: center;}
.pager .pagination li.pre a,
.pager .pagination li.next a{ width: 100%; text-align: center;}
.pager .pagination.page10 li.pre span::after{ content: "　前へ";}
.pager .pagination.page10 li.next span::before{ content: "次へ　";}
.pager .pagination.page12 li.pre span::after{ content: "　前へ";}
.pager .pagination.page12 li.next span::before{ content: "次へ　";}

}