@charset "UTF-8";
/* CSS Document */

/*-------------------------------------------

name:uniq.css

-------------------------------------------*/

#news{}
#news > .inner{}
#news .newsArea{}
#news .newsList .btn01{ width:200px; margin:0 auto; letter-spacing:0;}
#news .newsList .btn01 a{ font-size:100%; padding:14px 0;}

/*新着情報 一覧*/
.newsList{}
.newsList > ul{ margin:0 0 30px; border-top:1px solid #e5e5e5;}
.newsList > ul > li{ padding:19px 5%; border-bottom:1px solid #ddd; position:relative;}
.newsList > ul > li > a{ display:table;}
.newsList > ul > li > a::after{ content:""; display:block; border:4px solid transparent; border-left:5px solid #003978; position:absolute; right:2%; top:50%; transform:translate(0,-50%);}
.newsList > ul > li > a .date,
.newsList > ul > li > a .ctgry,
.newsList > ul > li > a .title{ display:table-cell;}
.newsList > ul > li > a .date{ color:#aaa; padding:0 15px 0 0;}
.newsList > ul > li > a .ctgry{}
.newsList > ul > li > a .ctgry > span{ display:inline-block; width:110px; padding:6px 0; font-size:90%; color:#fff; text-align:center; line-height:1;}
.newsList > ul > li > a .title{ padding:0 0 0 15px; line-height:1.4;}
.newsList > ul > li > a:hover .title{ opacity:.6;}
/*カテゴリカラー*/
.c01 > span{ background:#E3B025;}
.c02 > span{ background:#2ea875;}
.c03 > span{ background:#4ca5d8;}

.category_area{ margin:0 auto 35px; text-align:center;}
.category_area ul{ width:100%; display:flex; justify-content:center; align-items:center;}
.category_area ul li{ max-width:180px; width:24.8%; margin:0 .1%; background:#edeae6; line-height:1; cursor:pointer; position:relative; transition:all 0.3s ease;}
.category_area ul li > div{}
.category_area ul li > div > *{ padding:0; display:flex; justify-content:center; align-items:center;}
/*current*/
/*.category_area ul li.current,
.category_area ul li:not(.current):hover{ background:#003978; color:#fff;}*/
.category_area ul li :hover,
.category_area ul li div .active,
.category_area ul li.current div
{
  background:#003978; color:#fff;
}
.category_area ul li :hover a{
  color: #FFF;
}
.category_area ul li a{
  display: block;
  padding: 20px 0;
  width: 100%;
}
.category_area ul li.current div a{
  color: #FFF;
}


/*.pager{}
.pager ul{
        text-align: center;
        position: relative;
        padding: 0 85px;
    width: 100%;}

.pager ul li{
            display: inline-block;
            width: calc(100% / 11);
    margin-bottom: 10px;}

.pager ul li a, span{
                @include transition();
                margin: 0 2px;
                display: block;
                width: 100%;
                height: 100%;
                padding: 0.5em 0;
                border: 1px solid #ccc;
                border-radius: 3px;
            }

.pager ul li span{
                background: #aaa;
                color: #fff;
            }

.pager ul li a:hover{
                background: $usuiDarkKeyColor;
            }

.pager ul li.prev, li.next{
            text-align: center;
            position: absolute;
            width: 80px;
            top: 0;
        }

 .pager ul li.prev{
            left: 0;
        }

 .pager ul li.next{
            right: 0;
        }*/
.detail_n .btn01{ width:200px; margin:4% auto; letter-spacing:0;}

.pager  ul.pagination {
  text-align: center;
  margin: 0;
  padding: 0;
}

.pager .pagination li {
  display: inline;
  margin: 0 2px;
  padding: 0;
  display: inline-block;
  background:#003978;
  width: 50px;
  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: #fff;
  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: #000;
  background: #ccf;
}

@media only screen and (max-width: 749px){
  .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件へ　";
  }*/

}

.d_c li {
    display: inline-block;
    margin: 0.2rem;
}

.d_c li span{
    width: 110px;
    padding: 6px 6px;
    font-size: 90%;
    color: #fff;
    text-align: center;
    line-height: 1;
}

/*===================================================

	タブレット

===================================================*/
@media only screen and (max-width: 1024px) {


}







/*===================================================

	スマホ

===================================================*/
@media only screen and (max-width: 739px) {

#news{}
#news > .inner{}
#news .newsArea{}
#news .newsList .btn01{}
#news .newsList .btn01 a{}

/*新着情報 一覧*/
.newsList{}
.newsList > ul{ margin:0 0 20px;}
.newsList > ul > li{ padding:15px 5% 15px 0;}
.newsList > ul > li > a{ display:block;}
.newsList > ul > li > a::after{ content:""; display:block; border:4px solid transparent; border-left:5px solid #003978; position:absolute; right:2%; top:50%; transform:translate(0,-50%);}
.newsList > ul > li > a .date,
.newsList > ul > li > a .ctgry{ display:inline-block; vertical-align:middle; font-size:90%;}
.newsList > ul > li > a .title{ display:block;}
.newsList > ul > li > a .date{ padding:0 5px 0 0;}
.newsList > ul > li > a .ctgry{}
.newsList > ul > li > a .ctgry > span{ width:90px; font-size:80%; padding:4px 0;}
.newsList > ul > li > a .title{ padding:5px 0 0;}

.category_area ul li a{
  display: block;
  padding: 12px 0;
  width: 100%;
}

/*.pager ul {padding: 0 0 50px 0;}

.pager ul li.prev{
                width: 40px;
                top: auto;
                bottom: 0;
              left: 0;}

.pager ul li.prev  a{
                    padding: 0;
                }

.pager ul  li.next {
                width: 40px;
                top: auto;
                bottom: 0;
              right: 0;}

.pager ul li.next a {padding: 0;}*/

}