@charset "utf-8";

/* ************************************************ 
*	一覧
* ************************************************ */
.news-listbox {
width: 1000px;
max-width: 90%;
margin: 0 auto;
padding: 80px 0;
}

ul.news{
margin: 0 0 50px 0;
padding: 0 0 0 0;
list-style: none;
}
ul.news li{
margin: 0 0 0 0;
padding: 20px 0 20px 10px;
border-bottom:1px solid #999;
text-align: left;
}
ul.news li a{
margin: 0 0 0 30px;
color:#333;
text-decoration: none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
ul.news li a:hover{
color:#000;
text-decoration: underline;
}

.pager{
margin: 0 auto;
padding: 50px 0;
text-align:center;
}
.list-page-navi{
margin: 0 3px;
padding: 0;
text-align:center;
display: inline-block;
border: 1px solid #000;
border-radius: 50vh; /* CSS3 */
 -webkit-border-radius: 50vh; /* Firefox */
 -moz-border-radius: 50vh; /* Safari,Chrome */
}
.list-page-navi a{
color: #333;
font-size: min(2vw,16px);
display: inline-block;
line-height: 1;
padding: 10px 5px 0 5px;
text-decoration:none;
height: 30px;
width: 30px;
}
.list-page-navi a:hover{
color: #fff;
background-color:#000;
text-decoration:none;
border-radius: 50vh; /* CSS3 */
 -webkit-border-radius: 50vh; /* Firefox */
 -moz-border-radius: 50vh; /* Safari,Chrome */
}


/* ************************************************ 
*	詳細
* ************************************************ */
.news-detailbox {
width: 1000px;
max-width: 90%;
margin: 0 auto;
padding: 80px 0 150px 0;
}
.midashi-title {
  position: relative;
  padding: 0 0 15px 0;
  margin: 0 0 15px 0;
  font-size: min(2.4vw,24px);
  font-weight: 500;
  line-height: 150%;
  display: block;
}
.midashi-title:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #999, #999 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #999, #999 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.news-contents-box {
padding: 0;
margin: 0 0 60px 0;
}
.news-contents-box p{
font-size: min(1.6vw,16px);
}
.date {
text-align: right;
padding: 0;
margin: 0 0 10px 0;
font-size: min(1.6vw,16px);
}

.morelink {
margin: 0 auto;
padding: 0;
text-align:center;
background-color:#fff;
border: 1px solid #333;
width: 300px;
border-radius: 50vh; /* CSS3 */
 -webkit-border-radius: 50vh; /* Firefox */
 -moz-border-radius: 50vh; /* Safari,Chrome */
}
.morelink a{
color: #333;
display: block;
padding: 10px 0 11px 0;
line-height: 200%;
text-decoration: none;
font-size: min(2vw,18px);
}
.morelink a::after,
.morelink a:hover::after {
position:relative;
top: -2px;
left: 10px;
content:"";
display:inline-block;
width:5px;
height:10px;
background:url("../images/arrow.svg") no-repeat;
background-size:contain;
}
.morelink a::after {
background:url("../images/arrow.svg") no-repeat;
}
.morelink a:hover::after {
background:url("../images/arrow_mo.svg") no-repeat;
}
.morelink a:hover{
color: #fff;
background-color:#000;
border-radius: 50vh; /* CSS3 */
 -webkit-border-radius: 50vh; /* Firefox */
 -moz-border-radius: 50vh; /* Safari,Chrome */
}


/* ************************************************ 
*   レスポンシブ
* ************************************************ */
/* PC 画面の横幅が960px以上 */
@media only screen and (min-width: 960px){

}

/* Tablet (Portrait) 画面の横幅が768px〜959pxまで */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.news-listbox { padding: 70px 0; }
.pager { padding: 10px 0; }
.news-detailbox { padding: 70px 0 120px 0; }
}

/* Mobile (Portrait) 画面の横幅が767pxまで */
@media only screen and (max-width: 767px) {
.news-listbox { padding: 50px 0; }
ul.news { margin: 0 0 40px 0; }
ul.news li{
padding: 15px 0;
font-size: 4.5vw;
line-height:150%;
}
ul.news li a { margin: 0 0 0 0; }
.pager { padding: 20px 0; }
.list-page-navi a {
font-size: 4vw;
padding: 11px 5px 0 5px;
height: 30px;
width: 30px;
}

.news-detailbox { padding: 50px 0 80px 0; }
.midashi-title { font-size: 5vw; }
.news-contents-box { margin: 0 0 40px 0; }
.news-contents-box p{ font-size: 4.5vw; }
.date { font-size: 4vw; }
.morelink { width: 100%; }
.morelink a { font-size: 4.5vw; }
}