@charset "UTF-8";

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

.basic_mini_title h3{
    color: #00349f;
    font-size: 1.9em;
    line-height: 1.2em;
    border-bottom: 2px solid #00349f;
    margin: 30px 0 0;}

#picture_box .add_img,
#picture_box .close_btn {display:none;}
#contents2{margin-bottom:60px;}
#main #contents2 .page_title{ max-width: 1040px; margin: 0 auto;}
#main #contents2 .pic_title{ width:1040px!important; margin:0 auto 30px!important;}
#main #contents2 .basic_sub_title{ text-align: left; width:1040px!important; margin:0 auto!important;}
#contents2 .basic_p{ width:1040px!important; margin:0 auto 30px; text-align: left;}

#contents2 #kts_list{ width:1040px; margin:0 auto;}
#contents2 #kts_list ul li{ z-index: 0; position: relative; float:left; margin:0 20px 20px 0; width: 33.33333%; width: calc((100% - 41px) / 3); width: -webkit-calc((100% - 41px) / 3); width: -moz-calc((100% - 41px) / 3); height: auto; box-sizing:border-box; padding: 10px; border: 1px solid #ddd;}
#contents2 #kts_list ul li .photo{ width: 100%; height: 300px; overflow: hidden; position: relative; margin-bottom: 10px; background-color: #eee;}
#contents2 #kts_list ul li .photo 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;}
#contents2 #kts_list ul li .photo:hover img{filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;}
#contents2 #kts_list ul li a{ color: #00349f; text-decoration:none;}
#contents2 .bukken_title{ text-align:left;}
#contents2 .bukken_title p{ font-size:1.7em; line-height: 1.3; font-weight: 700;}
/*#contents2 .bukken_title p::before{content: ''; position: absolute; top: -15px; border-style: solid; border-color: transparent; left: 0; border-width: 15px 15px 0 0; border-right-color: #eeac2d;}*/

.sub_title{ text-align: center; font-size: 1.9em; line-height: 1.8em; font-weight: 700; margin-bottom: 20px;}

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

#contents2 #kts_list ul li:nth-child(3n){ margin-right: 0;}
    
}

@media screen and (max-width: 767px) {
    
.basic_mini_title h3{
    color: #00349f;
    font-size: 1.7em;
    line-height: 1.2em;
    border-bottom: 2px solid #00349f;
    margin: 20px 0 10px;
    font-weight: 700;}
#contents2{margin-bottom:30px;}
#main #contents2 .page_title{ margin: 0 auto; padding: 0 10px;}
#main #contents2 .pic_title{ width:100%!important; margin:0 auto 10px!important;}
#main #contents2 .basic_sub_title{ text-align: left; width:100%!important; margin:0 auto!important;}
#contents2 .basic_p{ width:100%!important; margin:0 auto 10px; text-align: left;}

#contents2 #kts_list{ width:100%; margin:0 auto;}
#contents2 .kts_inner{ padding: 0 10px;}
#contents2 #kts_list ul li{ position: relative; float:left; margin:0 10px 10px 0; width: 50%; width: calc((100% - 11px) / 2); width: -webkit-calc((100% - 11px) / 2); width: -moz-calc((100% - 11px) / 2); /*height: 170px;*/ box-sizing:border-box; padding: 5px; border: 1px solid #ddd;}
#contents2 #kts_list ul li:nth-child(2n){ margin-right: 0;}
#contents2 #kts_list ul li .photo{ width: 100%; height: 150px; overflow: hidden;}

#contents2 .bukken_title{}
#contents2 .bukken_title p{ /*position: relative; padding: 8px 8px 5px; background-color: #ffe700;*/ font-size:1.3em; color:#02218a;}
/*#contents2 .bukken_title p::before{content: ''; position: absolute; top: -7px; border-style: solid; border-color: transparent; left: 0; border-width: 7px 7px 0 0; border-right-color: #eeac2d;}*/

.sub_title{ font-size: 1.3em; line-height: 1.6em; margin-bottom: 10px;}
    
}


/*ページャー*/

.pager{ margin-top: 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{ margin-top: 10px;}
.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 li.pre span::after{ content: "　前の10件へ";}
.pager .pagination li.next span::before{ content: "次の10件へ　";}

}


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



.picture_box{}
.picture_box .detail_text{ font-size: 1.4em; line-height: 1.6;}
.picture_box ul.p_open li{ background-color: #eee;}

.equipment_btn{ margin-bottom: 30px; text-align: center;}
.equipment_btn ul li{
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 33.33333%;
    width: calc((100% - 41px) / 3);
    width: -webkit-calc((100% - 41px) / 3);
    width: -moz-calc((100% - 41px) / 3);}
.equipment_btn ul li:nth-child(3n){ margin-right: 0;}
.equipment_btn a{ display: inline-block; width: 100%; box-sizing: border-box; border: 2px solid #00349f; color: #00349f; font-size: 1.5em; line-height: 1.2em; padding: 20px 20px 15px; text-decoration: none; border-radius: 5px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease; position: relative;}
.equipment_btn a span{
    position: relative;
    padding-left: 25px;}
.equipment_btn a span::before{
    content: '';
    background-image: url(images/pdf.png);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    position: absolute;
    vertical-align: middle;
    margin-left: -25px;
    bottom: 0;}
.equipment_btn a:hover{ background-color: #00349f; color: #fff;}

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

.picture_box{ margin: 30px 0 0;}
.picture_box ul.p_open{ width: 100%;}
.picture_box ul.p_open li{ height: 190px; position: relative; overflow: hidden; float:left; margin-bottom: 15px; margin-right:15px; width: 20%; width: calc((100% - 60px) / 5); width: -webkit-calc((100% - 60px) / 5); width: -moz-calc((100% - 60px) / 5); box-sizing:border-box;}
.picture_box ul.p_open li:nth-child(5n){margin-right: 0;}
.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;}
.picture_box ul.p_open li:hover img{filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}
.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_box{ padding: 10px;}
.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);}
.picture_box ul.p_open li:nth-child(2n){ margin-right: 0px;}
.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%;}

.equipment_btn ul li{
    float: none;
    width: 100%;
     margin-right: 0px;
    margin-bottom: 10px;}
.equipment_btn{ margin-bottom: 20px; margin-top: 15px;}
.equipment_btn a{ display: block; font-size: 1.3em; padding: 14px 5px 11px;}
.equipment_btn a:hover{}

}